/* ============================================================
   LZR Tech Design System v2.0 — Fundação de Tokens
   Fonte única de verdade. Nunca hardcode valores.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;600&display=swap');

/* ---------- TIPOGRAFIA (compartilhada) ---------- */
:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Syne', 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', ui-monospace, monospace;
  --font-hand: 'Caveat', cursive;

  /* Escala tipográfica em rem. Base 16px. */
  --fs-display: 3.25rem;   /* 52px — hero */
  --fs-h1: 2rem;           /* 32px */
  --fs-h2: 1.5rem;         /* 24px */
  --fs-h3: 1.125rem;       /* 18px */
  --fs-body-lg: 1rem;      /* 16px */
  --fs-body: 0.9375rem;    /* 15px — base confortável p/ leitura longa */
  --fs-sm: 0.8125rem;      /* 13px */
  --fs-xs: 0.75rem;        /* 12px — mínimo */
  --fs-label: 0.6875rem;   /* 11px — só uppercase/mono */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---------- ESPAÇAMENTO (4pt) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADIUS ---------- */
  --r-xs: 2px;
  --r-sm: 4px;   /* ★ padrão — 90% dos casos */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-entry: 480ms;

  /* ---------- Z-INDEX ---------- */
  --z-sticky: 10;
  --z-nav: 20;
  --z-dropdown: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---------- GRID ---------- */
  --container: 1280px;
  --gutter: 24px;
}

/* ============================================================
   BRAND — LZR (valores fixos, não mudam entre produtos)
   ============================================================ */
:root {
  --lzr-green-50:  #E8F5EC;
  --lzr-green-100: #C4E3CE;
  --lzr-green-200: #9BCFAD;
  --lzr-green-300: #6EB98A;
  --lzr-green-400: #48A56E;
  --lzr-green-500: #2E8B57;  /* ★ accent */
  --lzr-green-600: #227A4C;
  --lzr-green-700: #1A6640;
  --lzr-green-800: #154D30;
  --lzr-green-900: #0D3320;
  --lzr-green-950: #071A0F;

  --lzr-amber-50:  #FCF0E3;
  --lzr-amber-100: #F6DCBA;
  --lzr-amber-300: #E8A869;
  --lzr-amber-500: #C97B2E;  /* ★ accent 2 */
  --lzr-amber-700: #8F5419;
  --lzr-amber-900: #4A2A0C;

  /* Sage — neutros com subtom verde (a "Floresta Noturna") */
  --sage-50:  #F3F8F5;
  --sage-100: #E4EEE8;
  --sage-200: #C8D8CE;
  --sage-300: #9EB2A6;
  --sage-400: #6E8276;
  --sage-500: #4E6255;
  --sage-600: #38463D;
  --sage-700: #253028;
  --sage-800: #16201A;
  --sage-900: #0D1612;
  --sage-950: #070F0B;

  /* Semânticos (robustos p/ daltonismo — sempre + ícone + texto) */
  --ok-500: #2E8B57;
  --ok-400: #3DAF6E;
  --warn-500: #C89020;
  --warn-400: #E0A838;
  --err-500: #C24C4C;
  --err-400: #D96868;
  --info-500: #3D8FAE;
  --info-400: #4FA8CC;

  /* Data viz — ordem obrigatória (nunca começar no vermelho) */
  --dv-1: #3DAF6E;
  --dv-2: #4FA8CC;
  --dv-3: #E0A838;
  --dv-4: #9B6BC8;
  --dv-5: #4AB8A0;
  --dv-6: #D96868;
  --dv-7: #C87A3A;
  --dv-8: #8AAA3D;
}

/* ============================================================
   SUPERFÍCIE (varia por tema) — LIGHT como padrão
   Designed for long-duty comfort: off-whites com subtom verde,
   texto em Graphite morno (não preto puro), contrastes AA+
   ============================================================ */
:root,
[data-theme="day"] {
  --bg:         #F4F7F4;   /* sage off-white — reduz brilho */
  --bg-soft:    #EAF0EC;
  --surface:    #FFFFFF;
  --elevated:   #FBFDFB;
  --sunken:     #ECF2EE;

  --border:     #D8E2DB;
  --border-hi:  #BAC9BF;
  --divider:    rgba(22, 32, 26, 0.08);

  --text-1:     #13201A;   /* graphite morno */
  --text-2:     #425249;
  --text-3:     #6B7E72;   /* tertiary — AA em 15px+ */
  --text-placeholder: #5A6E62;  /* AA 4.5:1 em #FFFFFF */
  --text-inv:   #FFFFFF;

  --accent:     var(--lzr-green-500);
  --accent-hi:  var(--lzr-green-600);
  --accent-lo:  var(--lzr-green-400);
  --accent-bg:  rgba(46, 139, 87, 0.10);
  --accent-bd:  rgba(46, 139, 87, 0.28);
  --accent-glow:rgba(46, 139, 87, 0.32);

  --accent2:    var(--lzr-amber-500);
  --accent2-bg: rgba(201, 123, 46, 0.10);
  --accent2-bd: rgba(201, 123, 46, 0.28);

  --ok:   var(--ok-500);
  --warn: var(--warn-500);
  --err:  var(--err-500);
  --info: var(--info-500);

  --shadow-sm: 0 1px 2px rgba(13, 22, 18, 0.04), 0 1px 3px rgba(13, 22, 18, 0.06);
  --shadow-md: 0 2px 6px rgba(13, 22, 18, 0.05), 0 8px 20px rgba(13, 22, 18, 0.06);
  --shadow-lg: 0 6px 16px rgba(13, 22, 18, 0.08), 0 20px 48px rgba(13, 22, 18, 0.10);
  --shadow-accent: 0 4px 20px rgba(46, 139, 87, 0.28);
  --shadow-ring: 0 0 0 3px var(--accent-glow);

  --grad-brand: linear-gradient(135deg, #1A6640 0%, #2E8B57 45%, #C97B2E 100%);
  --grad-accent: linear-gradient(135deg, #2E8B57 0%, #48A56E 100%);
  --grad-hero: radial-gradient(ellipse at top left, rgba(46, 139, 87, 0.08), transparent 60%),
               radial-gradient(ellipse at bottom right, rgba(201, 123, 46, 0.06), transparent 55%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #FBFDFB 100%);
}

/* ---------- NIGHT — Floresta Noturna (subtom verde intencional) ---------- */
[data-theme="night"] {
  --bg:         #0A1410;
  --bg-soft:    #0E1A14;
  --surface:    #0F1C16;
  --elevated:   #152820;
  --sunken:     #0A1410;

  --border:     #1E3329;
  --border-hi:  #2A4436;
  --divider:    rgba(208, 232, 216, 0.06);

  --text-1:     #D6EADC;
  --text-2:     #8EAE99;
  --text-3:     #607B68;
  --text-placeholder: #7A9786;
  --text-inv:   #0A1410;

  --accent:     var(--lzr-green-500);
  --accent-hi:  var(--lzr-green-400);
  --accent-lo:  var(--lzr-green-300);
  --accent-bg:  rgba(62, 175, 110, 0.14);
  --accent-bd:  rgba(62, 175, 110, 0.36);
  --accent-glow:rgba(62, 175, 110, 0.40);

  --accent2:    #DB9246;
  --accent2-bg: rgba(219, 146, 70, 0.14);
  --accent2-bd: rgba(219, 146, 70, 0.36);

  --ok:   var(--ok-400);
  --warn: var(--warn-400);
  --err:  var(--err-400);
  --info: var(--info-400);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-accent: 0 4px 24px rgba(62, 175, 110, 0.34);
  --shadow-ring: 0 0 0 3px var(--accent-glow);

  --grad-brand: linear-gradient(135deg, #0D3320 0%, #227A4C 50%, #C97B2E 100%);
  --grad-accent: linear-gradient(135deg, #1A6640 0%, #3DAF6E 100%);
  --grad-hero: radial-gradient(ellipse at top left, rgba(62, 175, 110, 0.10), transparent 55%),
               radial-gradient(ellipse at bottom right, rgba(201, 123, 46, 0.07), transparent 50%);
  --grad-surface: linear-gradient(180deg, #152820 0%, #0F1C16 100%);
}

/* ---------- SUNSET — Âmbar dourado, hora mágica ---------- */
[data-theme="sunset"] {
  --bg:         #FDF6EC;
  --bg-soft:    #FAF0E0;
  --surface:    #FFFDF8;
  --elevated:   #FFFEF9;
  --sunken:     #F5EAD6;

  --border:     #E8D5B0;
  --border-hi:  #D4B880;
  --divider:    rgba(90, 55, 10, 0.08);

  --text-1:     #2D1F08;
  --text-2:     #5C3D12;
  --text-3:     #8A6030;
  --text-placeholder: #7A5525;
  --text-inv:   #FFFFFF;

  --accent:     var(--lzr-amber-500);
  --accent-hi:  var(--lzr-amber-700);
  --accent-lo:  var(--lzr-amber-300);
  --accent-bg:  rgba(201, 123, 46, 0.12);
  --accent-bd:  rgba(201, 123, 46, 0.30);
  --accent-glow:rgba(201, 123, 46, 0.36);

  --accent2:    var(--lzr-green-500);
  --accent2-bg: rgba(46, 139, 87, 0.10);
  --accent2-bd: rgba(46, 139, 87, 0.28);

  --ok:   var(--ok-500);
  --warn: var(--warn-500);
  --err:  var(--err-500);
  --info: var(--info-500);

  --shadow-sm: 0 1px 2px rgba(90, 55, 10, 0.06), 0 1px 3px rgba(90, 55, 10, 0.08);
  --shadow-md: 0 2px 6px rgba(90, 55, 10, 0.07), 0 8px 20px rgba(90, 55, 10, 0.08);
  --shadow-lg: 0 6px 16px rgba(90, 55, 10, 0.10), 0 20px 48px rgba(90, 55, 10, 0.12);
  --shadow-accent: 0 4px 20px rgba(201, 123, 46, 0.32);
  --shadow-ring: 0 0 0 3px var(--accent-glow);

  --grad-brand: linear-gradient(135deg, #8F5419 0%, #C97B2E 45%, #E8A869 100%);
  --grad-accent: linear-gradient(135deg, #C97B2E 0%, #E8A869 100%);
  --grad-hero: radial-gradient(ellipse at top left, rgba(232, 168, 105, 0.18), transparent 60%),
               radial-gradient(ellipse at bottom right, rgba(201, 123, 46, 0.10), transparent 55%);
  --grad-surface: linear-gradient(180deg, #FFFDF8 0%, #FDF6EC 100%);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
::selection { background: var(--accent-bg); color: var(--text-1); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
code, pre { font-family: var(--font-mono); }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; }

::placeholder { color: var(--text-placeholder); opacity: 1; }

/* Focus ring padrão */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: var(--r-sm);
}

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

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 5vw, var(--fs-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.t-h2 { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
.t-h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-base); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--text-2); }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-base); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-3);
}
.t-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.t-muted { color: var(--text-2); }
.t-dim { color: var(--text-3); }
.t-accent { color: var(--accent); }