/* =================================================================
   DESIGN SYSTEM · TOKENS
   ----------------------------------------------------------------
   Camada de tokens. Define TODAS as variáveis do sistema.
   Light mode = :root | Dark mode = [data-theme="dark"]
   ================================================================= */

@layer tokens {

  :root {
    /* ───────────────────────────────────────────────────────────
       1. PALETA BRUTA (RAW PALETTE)
       Cores primitivas. NUNCA referenciar direto em componentes.
       Sempre usar semantic tokens abaixo.
       ─────────────────────────────────────────────────────────── */

    /* Brand · Teal */
    --raw-brand-50:   oklch(97% 0.015 190);
    --raw-brand-100:  oklch(93% 0.030 190);
    --raw-brand-200:  oklch(86% 0.055 190);
    --raw-brand-300:  oklch(76% 0.080 190);
    --raw-brand-400:  oklch(68% 0.090 190);
    --raw-brand-500:  oklch(63% 0.088 190); /* base turquesa */
    --raw-brand-600:  oklch(54% 0.088 190);
    --raw-brand-700:  oklch(48% 0.088 190);
    --raw-brand-800:  oklch(38% 0.075 190);
    --raw-brand-900:  oklch(28% 0.055 190);
    --raw-brand-950:  oklch(20% 0.040 190);

    /* Accent · Dourado / Âmbar */
    --raw-accent-50:  oklch(97% 0.025 40);
    --raw-accent-100: oklch(92% 0.060 40);
    --raw-accent-200: oklch(86% 0.105 40);
    --raw-accent-300: oklch(80% 0.140 40);
    --raw-accent-400: oklch(78% 0.155 40);  /* base terracota */
    --raw-accent-500: oklch(72% 0.150 40);
    --raw-accent-600: oklch(68% 0.145 40);  
    --raw-accent-700: oklch(58% 0.135 40);
    --raw-accent-800: oklch(48% 0.110 40);
    --raw-accent-900: oklch(35% 0.080 40);

    /* Neutros */
    --raw-neutral-0:    oklch(100% 0 0);
    --raw-neutral-50:   oklch(98.5% 0.005 210);
    --raw-neutral-100:  oklch(96% 0.010 210);
    --raw-neutral-200:  oklch(92% 0.012 210);
    --raw-neutral-300:  oklch(86% 0.015 210);
    --raw-neutral-400:  oklch(72% 0.018 210);
    --raw-neutral-500:  oklch(58% 0.022 210);
    --raw-neutral-600:  oklch(46% 0.030 210);
    --raw-neutral-700:  oklch(35% 0.035 210);
    --raw-neutral-800:  oklch(24% 0.040 210);
    --raw-neutral-900:  oklch(16% 0.035 210);
    --raw-neutral-950:  oklch(10% 0.025 210);
    --raw-neutral-1000: oklch(6% 0.015 210);

    /* Cores semânticas raw */
    --raw-success-500: oklch(62% 0.130 155);
    --raw-success-600: oklch(54% 0.130 155);
    --raw-success-100: oklch(94% 0.040 155);
    --raw-success-900: oklch(28% 0.075 155);

    --raw-warning-500: oklch(75% 0.150 80);
    --raw-warning-600: oklch(68% 0.155 70);
    --raw-warning-100: oklch(95% 0.045 85);
    --raw-warning-900: oklch(32% 0.080 70);

    --raw-error-500:   oklch(60% 0.190 25);
    --raw-error-600:   oklch(52% 0.190 25);
    --raw-error-100:   oklch(94% 0.035 25);
    --raw-error-900:   oklch(30% 0.110 25);

    --raw-info-500:    oklch(60% 0.140 250);
    --raw-info-600:    oklch(52% 0.150 250);
    --raw-info-100:    oklch(94% 0.040 250);
    --raw-info-900:    oklch(30% 0.110 250);

    /* ───────────────────────────────────────────────────────────
       2. SEMANTIC TOKENS · LIGHT MODE (DEFAULT)
       É O QUE OS COMPONENTES USAM. Trocar entre modos = trocar isto.
       ─────────────────────────────────────────────────────────── */

    /* Superfícies (background hierarchy) */
    --color-bg-base:        var(--raw-neutral-50);   /* fundo da página */
    --color-bg-subtle:      var(--raw-neutral-100);  /* surface alternativa */
    --color-bg-muted:       var(--raw-neutral-200);  /* surface 3 */
    --color-surface:        var(--raw-neutral-0);    /* cards, modais */
    --color-surface-raised: var(--raw-neutral-0);    /* dropdowns, popovers */
    --color-surface-sunken: var(--raw-neutral-100);  /* inputs, wells */
    --color-overlay:        oklch(15% 0.025 210 / 0.55); /* scrim */

    /* Texto */
    --color-text:           var(--raw-neutral-900);
    --color-text-secondary: var(--raw-neutral-700);
    --color-text-tertiary:  var(--raw-neutral-600);
    --color-text-disabled:  var(--raw-neutral-400);
    --color-text-inverse:   var(--raw-neutral-50);
    --color-text-link:      var(--raw-brand-700);
    --color-text-link-hover:var(--raw-brand-800);
    --color-text-on-brand:  var(--raw-neutral-0);
    --color-text-on-accent: var(--raw-neutral-900);

    /* Bordas / Dividers */
    --color-border-subtle:  oklch(86% 0.015 210 / 0.6);
    --color-border:         var(--raw-neutral-300);
    --color-border-strong:  var(--raw-neutral-400);
    --color-border-focus:   var(--raw-brand-500);
    --color-divider:        oklch(86% 0.015 210 / 0.4);

    /* Brand (interactive) */
    --color-brand:          var(--raw-brand-500);
    --color-brand-hover:    var(--raw-brand-600);
    --color-brand-active:   var(--raw-brand-700);
    --color-brand-subtle:   oklch(93% 0.030 190 / 0.5);
    --color-brand-muted:    oklch(63% 0.088 190 / 0.10);
    --color-brand-strong:   var(--raw-brand-800);

    /* Accent (interactive) */
    --color-accent:         var(--raw-accent-400);
    --color-accent-hover:   var(--raw-accent-500);
    --color-accent-active:  var(--raw-accent-600);
    --color-accent-subtle:  oklch(95% 0.040 40 / 0.6);
    --color-accent-muted:   oklch(78% 0.155 40 / 0.12);

    /* Semânticas */
    --color-success:        var(--raw-success-500);
    --color-success-bg:     oklch(94% 0.040 155 / 0.5);
    --color-success-fg:     var(--raw-success-900);
    --color-success-border: oklch(62% 0.130 155 / 0.35);

    --color-warning:        var(--raw-warning-600);
    --color-warning-bg:     oklch(95% 0.045 85 / 0.5);
    --color-warning-fg:     var(--raw-warning-900);
    --color-warning-border: oklch(75% 0.150 80 / 0.35);

    --color-error:          var(--raw-error-500);
    --color-error-bg:       oklch(94% 0.035 25 / 0.5);
    --color-error-fg:       var(--raw-error-900);
    --color-error-border:   oklch(60% 0.190 25 / 0.35);

    --color-info:           var(--raw-info-500);
    --color-info-bg:        oklch(94% 0.040 250 / 0.5);
    --color-info-fg:        var(--raw-info-900);
    --color-info-border:    oklch(60% 0.140 250 / 0.35);

    /* Estados de input */
    --color-input-bg:       var(--raw-neutral-0);
    --color-input-border:   var(--raw-neutral-300);
    --color-input-border-hover: var(--raw-neutral-400);
    --color-input-placeholder:  var(--raw-neutral-500);
    --color-input-disabled-bg:  var(--raw-neutral-100);

    /* ───────────────────────────────────────────────────────────
       3. TIPOGRAFIA
       ─────────────────────────────────────────────────────────── */

    --font-serif: "Prata", Georgia, "Times New Roman", serif;
    --font-sans:  "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale (Perfect Fourth · 1.333) */
    --text-2xs:    clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem); /* 10–11 */
    --text-xs:     clamp(0.75rem,  0.72rem + 0.10vw, 0.8125rem); /* 12–13 */
    --text-sm:     clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem); /* 14–15 */
    --text-base:   clamp(1rem,     0.96rem + 0.20vw, 1.0625rem); /* 16–17 */
    --text-md:     clamp(1.0625rem,1.02rem + 0.22vw, 1.125rem);  /* 17–18 */
    --text-lg:     clamp(1.25rem,  1.18rem + 0.35vw, 1.375rem);  /* 20–22 */
    --text-xl:     clamp(1.5rem,   1.40rem + 0.50vw, 1.75rem);   /* 24–28 */
    --text-2xl:    clamp(1.875rem, 1.70rem + 0.85vw, 2.25rem);   /* 30–36 */
    --text-3xl:    clamp(2.25rem,  1.95rem + 1.50vw, 3rem);      /* 36–48 */
    --text-4xl:    clamp(2.75rem,  2.30rem + 2.25vw, 4rem);      /* 44–64 */
    --text-5xl:    clamp(3.5rem,   2.80rem + 3.50vw, 5.5rem);    /* 56–88 */
    --text-display:clamp(4rem,     3.20rem + 4vw,    7rem);      /* 64–112 */

    /* Pesos */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* Line heights */
    --leading-none:    1;
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;
    --leading-loose:   1.8;

    /* Letter spacing */
    --tracking-tightest: -0.04em;
    --tracking-tight:    -0.02em;
    --tracking-normal:   0;
    --tracking-wide:     0.04em;
    --tracking-wider:    0.08em;
    --tracking-widest:   0.18em;

    /* ───────────────────────────────────────────────────────────
       4. ESPAÇAMENTO (base 4px)
       ─────────────────────────────────────────────────────────── */
    --space-0:    0;
    --space-px:   1px;
    --space-0-5:  0.125rem;  /* 2  */
    --space-1:    0.25rem;   /* 4  */
    --space-1-5:  0.375rem;  /* 6  */
    --space-2:    0.5rem;    /* 8  */
    --space-3:    0.75rem;   /* 12 */
    --space-4:    1rem;      /* 16 */
    --space-5:    1.25rem;   /* 20 */
    --space-6:    1.5rem;    /* 24 */
    --space-7:    1.75rem;   /* 28 */
    --space-8:    2rem;      /* 32 */
    --space-10:   2.5rem;    /* 40 */
    --space-12:   3rem;      /* 48 */
    --space-14:   3.5rem;    /* 56 */
    --space-16:   4rem;      /* 64 */
    --space-20:   5rem;      /* 80 */
    --space-24:   6rem;      /* 96 */
    --space-32:   8rem;      /* 128 */

    /* Fluid section spacing */
    --space-section-sm: clamp(2.5rem, 4vw, 4rem);
    --space-section:    clamp(4rem,   7vw, 6rem);
    --space-section-lg: clamp(6rem,   10vw, 9rem);

    /* ───────────────────────────────────────────────────────────
       5. LAYOUT
       ─────────────────────────────────────────────────────────── */
    --container-xs:     480px;
    --container-sm:     640px;
    --container-md:     820px;
    --container-lg:     1160px;
    --container-xl:     1440px;
    --container-padding: clamp(1rem, 3vw, 2.5rem);

    /* Breakpoints (referência — usar @media queries) */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;

    /* Z-index scale */
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  1000;
    --z-sticky:    1100;
    --z-overlay:   1200;
    --z-modal:     1300;
    --z-popover:   1400;
    --z-toast:     1500;
    --z-tooltip:   1600;
    --z-max:       9999;

    /* ───────────────────────────────────────────────────────────
       6. BORDAS, RAIOS E SOMBRAS
       ─────────────────────────────────────────────────────────── */
    --radius-none: 0;
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    --border-width-hairline: 0.5px;
    --border-width-thin:     1px;
    --border-width-medium:   1.5px;
    --border-width-thick:    2px;

    /* Shadows · light */
    --shadow-xs:  0 1px 2px oklch(20% 0.04 210 / 0.06);
    --shadow-sm:  0 1px 3px oklch(20% 0.04 210 / 0.08), 0 1px 2px oklch(20% 0.04 205 / 0.06);
    --shadow-md:  0 4px 12px oklch(20% 0.04 210 / 0.10), 0 2px 4px oklch(20% 0.04 205 / 0.06);
    --shadow-lg:  0 12px 28px oklch(20% 0.04 210 / 0.12), 0 4px 10px oklch(20% 0.04 205 / 0.08);
    --shadow-xl:  0 24px 56px oklch(20% 0.04 210 / 0.16), 0 8px 20px oklch(20% 0.04 205 / 0.10);
    --shadow-2xl: 0 36px 80px oklch(20% 0.04 210 / 0.22);
    --shadow-inner: inset 0 2px 4px oklch(20% 0.04 210 / 0.06);

    --shadow-brand: 0 8px 28px oklch(63% 0.088 190 / 0.28);
    --shadow-accent: 0 8px 28px oklch(78% 0.155 40 / 0.32);
    --shadow-focus: 0 0 0 3px oklch(63% 0.088 190 / 0.25);
    --shadow-focus-error: 0 0 0 3px oklch(60% 0.190 25 / 0.25);

    /* ───────────────────────────────────────────────────────────
       7. MOTION
       ─────────────────────────────────────────────────────────── */
    --duration-instant: 75ms;
    --duration-fast:    150ms;
    --duration-base:    250ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;
    --duration-slowest: 900ms;

    --ease-linear:   linear;
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-premium:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* ─────────────────────────────────────────────────────────────
     DARK MODE OVERRIDES
     Apenas semantic tokens trocam. Raw palette permanece igual.
     ───────────────────────────────────────────────────────────── */
  [data-theme="dark"] {
    /* Superfícies */
    --color-bg-base:        var(--raw-neutral-1000);
    --color-bg-subtle:      var(--raw-neutral-950);
    --color-bg-muted:       var(--raw-neutral-900);
    --color-surface:        var(--raw-neutral-900);
    --color-surface-raised: var(--raw-neutral-800);
    --color-surface-sunken: var(--raw-neutral-950);
    --color-overlay:        oklch(5% 0.020 210 / 0.75);

    /* Texto */
    --color-text:           oklch(96% 0.012 210);
    --color-text-secondary: oklch(78% 0.020 210);
    --color-text-tertiary:  oklch(62% 0.025 210);
    --color-text-disabled:  oklch(42% 0.030 210);
    --color-text-inverse:   var(--raw-neutral-900);
    --color-text-link:      var(--raw-brand-300);
    --color-text-link-hover:var(--raw-brand-200);
    --color-text-on-brand:  var(--raw-neutral-50);
    --color-text-on-accent: var(--raw-neutral-950);

    /* Bordas */
    --color-border-subtle:  oklch(35% 0.030 210 / 0.5);
    --color-border:         oklch(38% 0.035 210 / 0.7);
    --color-border-strong:  oklch(52% 0.035 210 / 0.8);
    --color-border-focus:   var(--raw-brand-300);
    --color-divider:        oklch(35% 0.030 210 / 0.4);

    /* Brand */
    --color-brand:          var(--raw-brand-400);
    --color-brand-hover:    var(--raw-brand-300);
    --color-brand-active:   var(--raw-brand-200);
    --color-brand-subtle:   oklch(28% 0.055 190 / 0.55);
    --color-brand-muted:    oklch(68% 0.090 190 / 0.15);
    --color-brand-strong:   var(--raw-brand-200);

    /* Accent */
    --color-accent:         var(--raw-accent-300);
    --color-accent-hover:   var(--raw-accent-200);
    --color-accent-active:  var(--raw-accent-100);
    --color-accent-subtle:  oklch(35% 0.080 40 / 0.30);
    --color-accent-muted:   oklch(78% 0.155 40 / 0.16);

    /* Semânticas */
    --color-success:        oklch(72% 0.140 155);
    --color-success-bg:     oklch(28% 0.075 155 / 0.35);
    --color-success-fg:     oklch(88% 0.080 155);
    --color-success-border: oklch(62% 0.130 155 / 0.40);

    --color-warning:        oklch(82% 0.150 85);
    --color-warning-bg:     oklch(32% 0.080 70 / 0.35);
    --color-warning-fg:     oklch(92% 0.080 85);
    --color-warning-border: oklch(75% 0.150 80 / 0.40);

    --color-error:          oklch(70% 0.180 25);
    --color-error-bg:       oklch(30% 0.110 25 / 0.35);
    --color-error-fg:       oklch(90% 0.060 25);
    --color-error-border:   oklch(60% 0.190 25 / 0.45);

    --color-info:           oklch(72% 0.130 250);
    --color-info-bg:        oklch(30% 0.110 250 / 0.35);
    --color-info-fg:        oklch(90% 0.060 250);
    --color-info-border:    oklch(60% 0.140 250 / 0.40);

    /* Input */
    --color-input-bg:           oklch(20% 0.030 210);
    --color-input-border:       oklch(38% 0.035 210 / 0.7);
    --color-input-border-hover: oklch(52% 0.035 210 / 0.9);
    --color-input-placeholder:  oklch(55% 0.025 210);
    --color-input-disabled-bg:  oklch(15% 0.025 210);

    /* Shadows · dark (mais profundas, menos opacidade) */
    --shadow-xs:  0 1px 2px oklch(0% 0 210 / 0.30);
    --shadow-sm:  0 1px 3px oklch(0% 0 210 / 0.40), 0 1px 2px oklch(0% 0 0 / 0.30);
    --shadow-md:  0 4px 12px oklch(0% 0 210 / 0.45), 0 2px 4px oklch(0% 0 0 / 0.30);
    --shadow-lg:  0 12px 28px oklch(0% 0 210 / 0.55), 0 4px 10px oklch(0% 0 0 / 0.35);
    --shadow-xl:  0 24px 56px oklch(0% 0 210 / 0.65), 0 8px 20px oklch(0% 0 0 / 0.45);
    --shadow-2xl: 0 36px 80px oklch(0% 0 210 / 0.75);
    --shadow-inner: inset 0 2px 4px oklch(0% 0 210 / 0.30);

    --shadow-brand: 0 8px 28px oklch(63% 0.088 190 / 0.40);
    --shadow-accent: 0 8px 28px oklch(78% 0.155 40 / 0.30);
    --shadow-focus: 0 0 0 3px oklch(76% 0.080 190 / 0.40);
    --shadow-focus-error: 0 0 0 3px oklch(70% 0.180 25 / 0.40);
  }

  /* Auto dark mode (respeita preferência do sistema se não setado manualmente) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
    }
  }
}