/* ─────────────────────────────────────────
       TOKENS
    ───────────────────────────────────────── */
    :root {
      /* ── Color — Global Palette ── */

      /* Brand — CTA / Primary action · H45° S100% L50% · 500 = #FFBE00 (golden) */
      --palette-brand-50:  #FFFAED;  /* ← anchor — warm white do sistema (bg-page, text-on-dark) */
      --palette-brand-100: #FFF2B3;
      --palette-brand-200: #FFE680;
      --palette-brand-300: #FFD94D;
      --palette-brand-400: #FFCC1A;
      --palette-brand-500: #FFBE00;  /* ← anchor — CTA principal */
      --palette-brand-600: #D9A200;
      --palette-brand-700: #B38600;
      --palette-brand-800: #8C6900;
      --palette-brand-900: #664D00;

      /* Primary — Structural / Identity · 300 = #A48680 (anchor) · 500 = #754C44 (anchor) */
      --palette-primary-50:  #F6F3F2;  /* surface mauve sutil — alternate surface (color-surface-primary) */
      --palette-primary-100: #EDDFD9;
      --palette-primary-200: #D2BCB4;
      --palette-primary-300: #A48680;  /* ← anchor — ícones decorativos, intermediário */
      --palette-primary-400: #8C6862;
      --palette-primary-500: #754C44;  /* ← anchor — text/border/icon de outline+ghost+iconbutton, surface-inverse, headings */
      --palette-primary-600: #5C3B33;
      --palette-primary-700: #432A22;  /* dark elevation 2, sidebar */
      --palette-primary-800: #2D1A15;  /* dark elevation 1, cards */
      --palette-primary-900: #18100B;  /* dark scaffold bg */
      --palette-primary-950: #0E0805;  /* OLED / deepest dark */

      /* Neutral — Cinza Neutro Quente · text content */
      --palette-neutral-50:  #FFFFFF;
      --palette-neutral-100: #F5F4F4;
      --palette-neutral-200: #DDDADA;
      --palette-neutral-300: #B1ABAB;
      --palette-neutral-400: #928989;
      --palette-neutral-500: #696060;
      --palette-neutral-600: #433E3D;  /* text-default — 10.2:1 AAA */
      --palette-neutral-700: #262323;  /* text on primary CTA (gold) — 8.7:1 AAA */
      --palette-neutral-800: #0E0D0D;

      /* Accent — Coral suave / Highlight · H18° S87% L66% · 500 = #F28B5E */
      --palette-accent-50:  #FFF4EE;
      --palette-accent-100: #FFE4D1;
      --palette-accent-200: #FFD0B0;
      --palette-accent-300: #FFB88A;
      --palette-accent-400: #FFA060;
      --palette-accent-500: #F28B5E;  /* base — acento warm */
      --palette-accent-600: #C46030;
      --palette-accent-700: #A04820;
      --palette-accent-800: #783418;
      --palette-accent-900: #502210;

      /* Support — Cool accent · H182° S48% L73% · mantida desta iteração */
      --palette-support-50:  #F3FAFB;
      --palette-support-100: #D0ECED;
      --palette-support-200: #BEE7E8;
      --palette-support-300: #99D8DB;
      --palette-support-400: #60C3C7;
      --palette-support-500: #40A8AD;
      --palette-support-600: #328C8F;
      --palette-support-700: #2B7275;
      --palette-support-800: #1E5052;
      --palette-support-900: #143537;

      /* Feature — Premium / Featured · H274° S76% L63% */
      --palette-feature-50:  #F8F1FD;
      --palette-feature-200: #D8B2F4;
      --palette-feature-400: #A754E7;
      --palette-feature-600: #6A17AA;

      /* Feedback — harmonizados via HSL com a paleta principal (sistema independente) */
      --palette-green-100: #EBF8F3;
      --palette-green-500: #2E9369;
      --palette-red-100:   #FCE9E8;
      --palette-red-500:   #C72418;
      --palette-amber-100: #FCF7E8;
      --palette-amber-500: #E5AC00;
      --palette-blue-100:  #EAF2F9;
      --palette-blue-500:  #317CB9;

      /* ── Color — Semantic ── */

      /* Surface & Background */
      --color-bg-page:           #FFFAED;  /* brand-50 — warm white do sistema */
      --color-surface:           #FFFFFF;  /* neutral-50 */
      --color-surface-primary:   #F6F3F2;  /* primary-50 — surface mauve sutil (alternada) */
      --color-surface-support:   #F3FAFB;  /* support-50 — surface sutil cool */
      --color-surface-inverse:   #754C44;  /* primary-500 — bottom sheets, dark panels */
      --color-surface-featured:  #A754E7;  /* feature-400 — premium cards */

      /* Primary (CTA) — references brand palette (gold) */
      --color-primary:        #FFBE00;  /* brand-500 — CTA principal */
      --color-primary-hover:  #FFCC1A;  /* brand-400 */
      --color-primary-muted:  #FFFAED;  /* brand-50 */

      /* Text — Neutral scale */
      --color-text-default:    #433E3D;  /* neutral-600 — 10.2:1 AAA */
      --color-text-subtle:     #696060;  /* neutral-500 */
      --color-text-heading:    #754C44;  /* primary-500 — títulos, secondary buttons (outline/ghost/iconbutton) */
      --color-text-link:       #754C44;  /* primary-500 — links secundários */
      --color-text-accent:     #8C6862;  /* primary-400 — accent text */
      --color-text-muted:      #928989;  /* neutral-400 */
      --color-text-disabled:   #D2BCB4;  /* primary-200 */
      --color-text-on-primary: #262323;  /* neutral-700 — texto escuro sobre brand-500 (gold) — 8.7:1 AAA */
      --color-text-on-dark:    #FFFAED;  /* brand-50 — texto warm white sobre primary-500 (mauve) */

      /* Border */
      --color-border:         #EDDFD9;  /* primary-100 */
      --color-border-strong:  #D2BCB4;  /* primary-200 */
      --color-border-focus:   #FFBE00;  /* brand-500 — foco em inputs/links */

      /* Accents (semantic, palette-agnostic naming) */
      --color-cool:        #99D8DB;  /* support-300 — accent cool */
      --color-cool-soft:   #BEE7E8;  /* support-200 — badge bg cool */
      --color-warm:        #FFB88A;  /* accent-300 — accent warm/highlight */
      --color-warm-soft:   #FFE4D1;  /* accent-100 — soft warm em fundo escuro */
      --color-feature:     #D8B2F4;  /* feature-200 */
      --color-feature-text: #6A17AA; /* feature-600 */

      /* Tag colors — bg saturado da paleta + text com contraste AA+ */
      --color-tag-warm-bg:     #FFB88A;  /* accent-300 */
      --color-tag-warm-text:   #502210;  /* accent-900 */
      --color-tag-cool-bg:     #99D8DB;  /* support-300 */
      --color-tag-cool-text:   #1E5052;  /* support-800 */
      --color-tag-feature-bg:  #D8B2F4;  /* feature-200 */
      --color-tag-feature-text:#6A17AA;  /* feature-600 */

      /* Button gradient flash — shimmer band brand-300 sobre brand-500 (subtle, decisão B v1.17.1) */
      --gradient-button-flash: linear-gradient(to right,
        var(--color-primary) 0%,
        var(--color-primary) 22%,
        var(--palette-brand-300) 63%,
        var(--color-primary) 78%,
        var(--color-primary) 100%
      );

      /* Feedback (sistema independente — AAA-compliant sobre warm white) */
      --color-success:         #2E9369;  /* feedback.success-medium — ícones, badges (3.7:1) */
      --color-success-text:    #1F6346;  /* feedback.success — texto AAA (6.9:1) */
      --color-success-subtle:  #EBF8F3;
      --color-warning:         #DC7700;  /* feedback.warning-medium — laranja distinto do brand gold (5.0:1) */
      --color-warning-text:    #8A4500;  /* feedback.warning — texto AAA orange-brown (7.5:1 sobre primary-50) */
      --color-warning-subtle:  #FCEFD9;  /* fundo de aviso — laranja pálido */
      --color-danger:          #C72418;  /* feedback.danger-medium */
      --color-danger-text:     #A91E15;  /* feedback.danger — texto AAA (7.0:1) */
      --color-danger-subtle:   #FCE9E8;
      --color-info:            #317CB9;
      --color-info-text:       #245A87;
      --color-info-subtle:     #EAF2F9;

      /* States — solid palette */
      --color-state-hover:    #EDDFD9;  /* primary-100 — solid hover */
      --color-state-pressed:  #DDDADA;  /* neutral-200 — solid pressed */
      --color-state-focus:    #FFF2B3;  /* brand-100 — focus ring (sólido) */
      --color-state-disabled: #EDDFD9;  /* primary-100 — disabled bg */

      /* Dark context — borders & subtle (rgba do primary-500 = 117,76,68) */
      --color-dark-border:        rgba(117, 76, 68, 0.12);
      --color-dark-border-strong: rgba(117, 76, 68, 0.22);

      /* ── Typography ── */
      --font-family-base: 'Funnel Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

      /* ── Spacing — base 4px ── */
      --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-14: 56px;
      --space-16: 64px;
      --space-20: 80px;

      /* ── Border Radius — múltiplos de 4px ── */
      --radius-none:      0px;
      --radius-sm:        4px;
      --radius-md:        8px;
      --radius-lg:        16px;
      --radius-2xl:       24px;
      --radius-full:      999px;

      /* ── Elevation — primary-tinted (rgb 117,76,68), warmth via accent (rgb 242,139,94) ── */
      --shadow-none: none;
      --shadow-sm:   0px 1px 3px rgba(117,76,68,0.08), 0px 3px 10px rgba(117,76,68,0.05);
      --shadow-md:   0px 2px 8px rgba(242,139,94,0.07), 0px 8px 28px rgba(117,76,68,0.10);
      --shadow-lg:   0px 4px 14px rgba(242,139,94,0.08), 0px 18px 52px rgba(117,76,68,0.12), 0px 36px 84px rgba(117,76,68,0.06);
      --shadow-knob: 0px 1px 4px rgba(117,76,68,0.14), 0px 2px 6px rgba(117,76,68,0.09);

      /* ── Z-index ── */
      --z-dropdown: 100;
      --z-sticky:   200;
      --z-modal:    300;
      --z-toast:    400;
      --z-tooltip:  500;

      /* ── Size scale — control heights ── */
      --size-sm: 32px;
      --size-md: 36px;
      --size-lg: 40px;
      --size-xl: 44px;

      /* ── Icon sizes — múltiplos de 4 ── */
      --icon-xs: 12px;
      --icon-sm: 16px;
      --icon-md: 20px;
      --icon-lg: 24px;

      /* ── Border Width ── */
      --border-width-default: 1px;
      --border-width-strong:  2px;
      --dropdown-gap:         1px;

      /* ── Shared input tokens (used by Select, Combobox, etc.) ── */
      --color-bg-input:              var(--color-surface);
      --radius-input-default:        999px;
      --radius-input-active:         16px;
      --size-input-height:           52px;

      /* ── TextInput component tokens ── */
      --ti-border-default:   #A48680;   /* primary-300 — 4.0:1 vs branco ✓ WCAG 1.4.11 */
      --ti-border-active:    #8C6862;   /* primary-400 — 5.0:1 vs branco ✓ */
      --ti-border-error:     var(--color-danger);
      --ti-border-warning:   #8A4500;   /* feedback.warning-text orange-brown — AAA */
      --ti-border-disabled:  #EDDFD9;   /* primary-100 */
      --ti-height-sm:        40px;
      --ti-height-md:        44px;
      --ti-height-lg:        52px;
      --ti-padding-x-sm:     12px;
      --ti-padding-x-md:     16px;
      --ti-padding-x-lg:     16px;
      --ti-icon-gap:         8px;
      --ti-label-gap:        4px;
      --ti-helper-gap:       4px;
      /* Backward-compat aliases */
      --color-border-input-default:  var(--ti-border-default);
      --color-border-input-focused:  var(--ti-border-active);
      --color-border-input-error:    var(--color-danger);
      --motion-duration-fast:        150ms;
      --motion-duration-normal:      250ms;
      --motion-duration-expressive:  800ms;
      --motion-duration-slow:        400ms;
      --motion-easing-standard:      cubic-bezier(0.2, 0, 0, 1);
      --motion-easing-decelerate:    cubic-bezier(0, 0, 0, 1);
      --motion-easing-expressive:    cubic-bezier(0.56, 0, 0, 1);

      /* ── Motion (additional) ── */
      --motion-duration-instant:     100ms;
      --motion-easing-linear:        linear;

      /* ── Opacity scale ── */
      --opacity-hover:    0.08;
      --opacity-pressed:  0.12;
      --opacity-focus:    0.12;
      --opacity-disabled: 0.38;
      --opacity-ghost-pressed: 0.9;

      /* ── Toggle component tokens ── */
      --tg-track-width:   52px;
      --tg-track-height:  30px;
      --tg-knob-size:     24px;
      --tg-knob-offset:   3px;
      --tg-translate-on:  22px;
      --tg-gap:           var(--space-3);

      /* ── Track/fill tokens (ProgressBar + Slider shared archetype) ── */
      --track-height-sm:    4px;
      --track-height-md:    8px;
      --track-height-lg:    12px;
      --track-thumb-size:   20px;
      --track-border-accent: 1.5px;

      /* ── Avatar component tokens ── */
      --av-size-sm:        48px;
      --av-size-md:        88px;
      --av-size-lg:        112px;
      --av-size-xl:        140px;
      --av-initials-sm:    18px;
      --av-initials-md:    32px;
      --av-initials-lg:    40px;
      --av-initials-xl:    52px;
      --av-group-overlap:  -12px;
      --av-status-size:    10px;
      --av-status-border:  2px;
      --av-status-inset:   var(--space-3);

      /* ── Spinner component tokens ── */
      --sp-border-width-sm:  2px;
      --sp-border-width-md:  3px;
      --sp-border-width-lg:  3px;
      --sp-border-width-xl:  4px;
      --sp-size-sm:          20px;
      --sp-size-md:          28px;
      --sp-size-lg:          40px;
      --sp-size-xl:          48px;
      --sp-duration:         var(--motion-duration-slow);
      /* Dark variant track: brand-50 (#FFFAED) at 20% alpha */
      --color-spinner-track-dark: rgba(255, 250, 237, 0.2);

      /* ── Tooltip component tokens ── */
      --tip-offset:    8px;
      --tip-arrow-size: 5px;
      --tip-max-width: 220px;
      --tip-duration:  var(--motion-duration-instant);

      /* ── Tabs component tokens ── */
      --tab-indicator-height:   3px;
      --tab-indicator-radius:   var(--radius-sm) var(--radius-sm) 0 0;
      --tab-indicator-color:    var(--color-primary);
      --tab-bar-border-color:   var(--color-border);
      --tab-bar-height-sm:      36px;
      --tab-bar-height-md:      44px;
      --tab-bar-height-lg:      52px;
      --tab-item-px-sm:         var(--space-3);
      --tab-item-px-md:         var(--space-4);
      --tab-item-px-lg:         var(--space-5);
      --tab-font-size-sm:       var(--btn-font-sm);
      --tab-font-size-md:       var(--btn-font-md);
      --tab-font-size-lg:       var(--btn-font-xl);
      --tab-font-size:          var(--tab-font-size-md);
      --tab-color:              var(--color-text-subtle);
      --tab-color-hover:        var(--color-text-default);
      --tab-color-active:       var(--color-text-heading);
      --tab-color-disabled:     var(--color-text-disabled);
      --tab-bg-hover:           var(--color-surface-primary);

      /* ── Tag component tokens ── */
      --tag-font-size:      12px;
      --tag-padding-h:      var(--space-2);
      --tag-padding-v:      3px;
      --tag-icon-size:      12px;
      --tag-height-sm:      22px;
      --tag-height-md:      26px;
      --tag-height-lg:      32px;
      --tag-border-width:   1px;
      --tag-radius:         var(--radius-full);
      --tag-group-gap:      var(--space-2);
      --tag-group-row-gap:  var(--space-2);
      --tag-dismiss-size:   14px;
      --tag-icon-gap:       var(--space-1);

      /* ── Badge indicator tokens ── */
      --bdg-size-sm:       16px;
      --bdg-size-md:       20px;
      --bdg-size-lg:       24px;
      --bdg-dot-size:      8px;
      --bdg-font-size:     10px;
      --bdg-font-weight:   var(--font-weight-semibold);
      --bdg-border-width:  2px;
      --bdg-offset-x:      -6px;
      --bdg-offset-y:      -6px;

      /* ── Link component tokens ── */
      --link-underline-offset:    2px;
      --link-underline-thickness: 1px;
      --link-color:         var(--color-text-link);   /* primary-500 */
      --link-color-hover:   var(--color-text-accent); /* primary-400 */
      --link-color-active:  var(--palette-primary-600); /* #594340 */
      --link-color-visited: var(--palette-primary-600);
      --link-color-disabled: var(--color-text-muted);

      /* ── Divider component tokens ── */
      --divider-label-gap:        var(--space-3);
      --divider-thickness:        1px;
      --divider-color:            var(--color-border);
      --divider-color-strong:     var(--color-border-strong);
      --divider-spacing-y:        var(--space-4);
      --divider-inset:            var(--space-6);
      --divider-label-font-size:  12px;
      --divider-label-color:      var(--color-text-subtle);

      /* ── Slider component tokens ── */
      --sl-thumb-size-sm:      16px;
      --sl-thumb-size-md:      var(--track-thumb-size);
      --sl-thumb-size-lg:      24px;
      --sl-track-bg:           var(--color-surface-primary);
      --sl-fill-color:         var(--color-primary);
      --sl-thumb-bg:           var(--color-surface);
      --sl-thumb-border:       var(--color-primary);
      --sl-thumb-border-width: 2px;

      /* ── Button component tokens ── */
      --btn-padding-sm:  14px;
      --btn-padding-md:  18px;
      --btn-padding-lg:  var(--space-5);
      --btn-padding-xl:  var(--space-6);
      --btn-font-sm:     13px;
      --btn-font-md:     14px;
      --btn-font-lg:     15px;
      --btn-font-xl:     16px;
      --btn-gap:         var(--space-2);
      --btn-border:      var(--border-width-strong);
      --btn-radius:      var(--radius-lg);

    /* ── ButtonIcon container sizes ── */
    --btn-buttonicon-lg: 48px;
    --btn-buttonicon-md: 36px;

      /* ── Typography tokens ── */
      --font-weight-semibold: 600;
      --font-weight-bold:     700;
      --letter-spacing-tight: -0.02em;

      /* ── Focus ring tokens ── */
      --focus-ring-width:          var(--border-width-strong);
      --focus-ring-offset:         3px;
      --focus-ring-offset-compact: 2px;
    }

    /* ── A11y Gap Markers ── */
    .a11y-gap {
      display: flex; align-items: flex-start; gap: 8px;
      background: #CCFF33; color: #1a1a1a;
      font-size: 11px; font-weight: 600;
      font-family: var(--font-family-mono); letter-spacing: 0; line-height: 1.5;
      padding: 6px 10px; border-radius: 4px;
      margin: 8px 0;
    }
    .a11y-gap::before {
      content: "⚠ A11Y GAP";
      flex-shrink: 0;
      background: rgba(0,0,0,0.12); padding: 1px 5px; border-radius: 3px;
    }