/* =============================================================
   Renlight Design System — Core tokens
   Colors, typography, spacing, radius, shadow.
   ============================================================= */

/* -------- Brand fonts (local, variable) -------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-variation-settings: "opsz" 14;
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-variation-settings: "opsz" 14;
}

:root {
  /* -------- Brand colors -------- */
  --azul-renlight: #0585B6;   /* primary brand, CTAs, highlights */
  --azul-escuro:   #03506D;   /* headers, destaque, hover CTA */
  --azul-medio:    #42AED7;   /* gradients, área 2 */
  --azul-claro:    #E0F3FB;   /* subtle bgs, info cards */

  /* -------- Neutrals -------- */
  --grafite:     #1F2937;
  --cinza-texto: #4B5563;
  --cinza-claro: #F3F4F6;
  --cinza-borda: #E5E7EB;
  --branco:      #FFFFFF;

  /* -------- Semantic -------- */
  --sucesso: #10B981;
  --alerta:  #F59E0B;
  --erro:    #EF4444;

  /* Tint backgrounds for semantic badges */
  --sucesso-bg: #D1FAE5;
  --alerta-bg:  #FEF3C7;
  --erro-bg:    #FEE2E2;

  /* -------- Gradients -------- */
  --gradient-primary: linear-gradient(135deg, #0585B6 0%, #03506D 100%);
  --gradient-soft:    linear-gradient(180deg, #E0F3FB 0%, #FFFFFF 100%);
  --gradient-hero:    linear-gradient(135deg, #03506D 0%, #0585B6 60%, #42AED7 100%);

  /* -------- Semantic foreground aliases -------- */
  --fg-1: var(--grafite);       /* body */
  --fg-2: var(--cinza-texto);   /* secondary */
  --fg-brand: var(--azul-escuro);
  --fg-accent: var(--azul-renlight);
  --bg-1: var(--branco);
  --bg-2: var(--cinza-claro);
  --bg-accent-soft: var(--azul-claro);
  --border-1: var(--cinza-borda);

  /* -------- Typography -------- */
  --font-sans: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl: clamp(48px, 6vw, 72px);
  --fs-display-lg: clamp(36px, 4.5vw, 56px);
  --fs-display-md: clamp(28px, 3.5vw, 40px);
  --fs-heading-lg: 24px;
  --fs-heading-md: 20px;
  --fs-heading-sm: 18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-metric:     clamp(32px, 4vw, 48px);

  --lh-display-xl: 1.05;
  --lh-display-lg: 1.1;
  --lh-display-md: 1.15;
  --lh-heading-lg: 1.25;
  --lh-heading-md: 1.3;
  --lh-heading-sm: 1.4;
  --lh-body-lg:    1.6;
  --lh-body:       1.6;
  --lh-body-sm:    1.5;
  --lh-caption:    1.4;
  --lh-metric:     1.0;

  /* -------- Spacing (4px base) -------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* -------- Radius -------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* -------- Shadow -------- */
  --shadow-sm:   0 1px 2px rgba(16,24,40,0.05);
  --shadow-md:   0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg:   0 12px 28px rgba(16,24,40,0.10);
  --shadow-glow: 0 0 24px rgba(5,133,182,0.25);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-hover: 200ms;
  --dur-base: 300ms;

  /* -------- Layout -------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

@media (min-width: 1024px) {
  :root { --container-pad: 48px; }
}

/* =============================================================
   Base element styles — semantic defaults
   ============================================================= */
html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; color: var(--fg-1); background: var(--bg-1); font-size: var(--fs-body); line-height: var(--lh-body); }

h1, h2, h3, h4, h5, h6 { color: var(--fg-brand); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); }
h2 { font-size: var(--fs-display-md); line-height: var(--lh-display-md); }
h3 { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); font-weight: 600; }
h4 { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); font-weight: 600; }
h5 { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); font-weight: 600; }
h6 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }

p { margin: 0; color: var(--fg-1); }
a { color: var(--fg-accent); text-decoration: none; transition: color var(--dur-hover) var(--ease-out); }
a:hover { color: var(--azul-escuro); }

small, .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--fg-2); }

/* Typography utility classes */
.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: 700; letter-spacing: -0.02em; }
.t-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: 700; letter-spacing: -0.01em; }
.t-display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); font-weight: 600; }
.t-heading-lg { font-size: var(--fs-heading-lg); line-height: var(--lh-heading-lg); font-weight: 600; }
.t-heading-md { font-size: var(--fs-heading-md); line-height: var(--lh-heading-md); font-weight: 600; }
.t-heading-sm { font-size: var(--fs-heading-sm); line-height: var(--lh-heading-sm); font-weight: 600; }
.t-body-lg    { font-size: var(--fs-body-lg);    line-height: var(--lh-body-lg); }
.t-body       { font-size: var(--fs-body);       line-height: var(--lh-body); }
.t-body-sm    { font-size: var(--fs-body-sm);    line-height: var(--lh-body-sm); color: var(--fg-2); }
.t-caption    { font-size: var(--fs-caption);    line-height: var(--lh-caption); font-weight: 500; }
.t-metric     { font-size: var(--fs-metric);     line-height: var(--lh-metric); font-weight: 700; color: var(--azul-renlight); }

/* Focus ring — accessibility */
*:focus-visible {
  outline: 2px solid var(--azul-renlight);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}