/* ============================================================================
   CSS FRAMEWORK — Static design system tokens
   DO NOT MODIFY — this file is auto-generated and identical across all sites.
   Brand colors/fonts are in tokens.css. This file references them via var().
   ============================================================================ */


/* ============================================================================
   1. NON-BRAND PRIMITIVES
   Fixed scale values that don't change per brand.
   ============================================================================ */

:root {

  /* ── Typography: Font weights ── */
  --weight-thin:        100;
  --weight-extralight:  200;
  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-extrabold:   800;
  --weight-black:       900;

  /* ── Typography: Font sizes (rem, 16px root) ── */
  --text-2xs:   0.625rem;
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;
  --text-8xl:   6rem;
  --text-9xl:   8rem;

  /* ── Typography: Line heights ── */
  --leading-none:     1;
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;
  --leading-loose:    2;

  /* ── Typography: Letter spacing ── */
  --tracking-tighter:  -0.05em;
  --tracking-tight:    -0.025em;
  --tracking-normal:    0em;
  --tracking-wide:      0.025em;
  --tracking-wider:     0.05em;
  --tracking-widest:    0.1em;

  /* ── Spacing ── */
  --space-0:     0;
  --space-px:    1px;
  --space-0-5:   0.125rem;
  --space-1:     0.25rem;
  --space-1-5:   0.375rem;
  --space-2:     0.5rem;
  --space-2-5:   0.625rem;
  --space-3:     0.75rem;
  --space-3-5:   0.875rem;
  --space-4:     1rem;
  --space-5:     1.25rem;
  --space-6:     1.5rem;
  --space-7:     1.75rem;
  --space-8:     2rem;
  --space-9:     2.25rem;
  --space-10:    2.5rem;
  --space-11:    2.75rem;
  --space-12:    3rem;
  --space-14:    3.5rem;
  --space-16:    4rem;
  --space-20:    5rem;
  --space-24:    6rem;
  --space-28:    7rem;
  --space-32:    8rem;
  --space-36:    9rem;
  --space-40:    10rem;
  --space-48:    12rem;
  --space-56:    14rem;
  --space-64:    16rem;
  --space-72:    18rem;
  --space-80:    20rem;
  --space-96:    24rem;

  /* ── Border radius ── */
  --radius-none:   0;
  --radius-xs:     0.125rem;
  --radius-sm:     0.25rem;
  --radius-md:     0.375rem;
  --radius-lg:     0.5rem;
  --radius-xl:     0.75rem;
  --radius-2xl:    1rem;
  --radius-3xl:    1.5rem;
  --radius-full:   9999px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:     0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:     0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl:    0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner:  inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none:   0 0 0 0 transparent;

  /* ── Border widths ── */
  --border-0:    0px;
  --border-1:    1px;
  --border-2:    2px;
  --border-3:    3px;
  --border-4:    4px;
  --border-8:    8px;

  /* ── Transitions ── */
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --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-bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-instant:  0ms;
  --duration-75:       75ms;
  --duration-100:      100ms;
  --duration-150:      150ms;
  --duration-200:      200ms;
  --duration-300:      300ms;
  --duration-500:      500ms;
  --duration-700:      700ms;
  --duration-1000:     1000ms;

  /* ── Z-index ── */
  --z-behind:     -1;
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-overlay:    30;
  --z-modal:      40;
  --z-popover:    50;
  --z-toast:      60;
  --z-tooltip:    70;
  --z-max:        9999;

  /* ── Containers ── */
  --container-xs:    20rem;
  --container-sm:    24rem;
  --container-md:    28rem;
  --container-lg:    32rem;
  --container-xl:    36rem;
  --container-2xl:   42rem;
  --container-3xl:   48rem;
  --container-4xl:   56rem;
  --container-5xl:   64rem;
  --container-6xl:   72rem;
  --container-7xl:   80rem;
  --container-prose: 65ch;

  /* ── Opacity ── */
  --opacity-0:     0;
  --opacity-5:     0.05;
  --opacity-10:    0.1;
  --opacity-20:    0.2;
  --opacity-25:    0.25;
  --opacity-30:    0.3;
  --opacity-40:    0.4;
  --opacity-50:    0.5;
  --opacity-60:    0.6;
  --opacity-70:    0.7;
  --opacity-75:    0.75;
  --opacity-80:    0.8;
  --opacity-90:    0.9;
  --opacity-95:    0.95;
  --opacity-100:   1;

  /* ── Aspect ratios ── */
  --aspect-square:    1 / 1;
  --aspect-video:     16 / 9;
  --aspect-photo:     4 / 3;
  --aspect-portrait:  3 / 4;
  --aspect-cinema:    21 / 9;
}


/* ============================================================================
   2. SEMANTIC TOKENS — LIGHT THEME (default)
   Map primitives to purpose. Components reference ONLY these.
   ============================================================================ */

:root,
[data-theme="light"] {

  /* ── Surfaces ── */
  --bg-page:          var(--color-white);
  --bg-surface:       var(--color-white);
  --bg-surface-raised: var(--gray-50);
  --bg-surface-sunken: var(--gray-100);
  --bg-surface-overlay: var(--color-white);
  --bg-muted:         var(--gray-100);
  --bg-subtle:        var(--gray-50);
  --bg-inverse:       var(--gray-900);
  --bg-backdrop:      rgb(0 0 0 / 0.5);

  /* ── Text ── */
  --text-primary:      var(--gray-900);
  --text-secondary:    var(--gray-600);
  --text-tertiary:     var(--gray-500);
  --text-placeholder:  var(--gray-400);
  --text-disabled:     var(--gray-300);
  --text-inverse:      var(--color-white);
  --text-link:         var(--primary-600);
  --text-link-hover:   var(--primary-700);
  --text-link-visited: var(--secondary-700);
  --text-on-primary:   var(--color-white);
  --text-on-secondary: var(--color-white);
  --text-on-accent:    var(--color-white);
  --text-on-success:   var(--color-white);
  --text-on-warning:   var(--gray-900);
  --text-on-danger:    var(--color-white);
  --text-on-info:      var(--color-white);

  /* ── Borders ── */
  --border-default:    var(--gray-200);
  --border-strong:     var(--gray-300);
  --border-subtle:     var(--gray-100);
  --border-disabled:   var(--gray-200);
  --border-inverse:    var(--gray-700);
  --border-focus:      var(--primary-500);
  --border-error:      var(--danger-500);
  --border-success:    var(--success-500);
  --border-warning:    var(--warning-500);

  /* ── Semantic fills ── */
  --bg-primary:        var(--primary-600);
  --bg-primary-hover:  var(--primary-700);
  --bg-primary-active: var(--primary-800);
  --bg-primary-subtle: var(--primary-50);

  --bg-secondary:        var(--secondary-600);
  --bg-secondary-hover:  var(--secondary-700);
  --bg-secondary-active: var(--secondary-800);
  --bg-secondary-subtle: var(--secondary-50);

  --bg-accent:        var(--accent-600);
  --bg-accent-hover:  var(--accent-700);
  --bg-accent-active: var(--accent-800);
  --bg-accent-subtle: var(--accent-50);

  --bg-success:        var(--success-500);
  --bg-success-hover:  var(--success-600);
  --bg-success-subtle: var(--success-50);

  --bg-warning:        var(--warning-500);
  --bg-warning-hover:  var(--warning-600);
  --bg-warning-subtle: var(--warning-50);

  --bg-danger:        var(--danger-500);
  --bg-danger-hover:  var(--danger-600);
  --bg-danger-subtle: var(--danger-50);

  --bg-info:        var(--info-500);
  --bg-info-hover:  var(--info-600);
  --bg-info-subtle: var(--info-50);

  /* ── Focus ring ── */
  --ring-color:        var(--primary-500);
  --ring-offset-color: var(--color-white);
  --ring-width:        3px;
  --ring-offset-width: 2px;

  /* ── Selection ── */
  --selection-bg:    var(--primary-200);
  --selection-text:  var(--primary-900);

  /* ── Scrollbar ── */
  --scrollbar-track:  var(--gray-100);
  --scrollbar-thumb:  var(--gray-300);
  --scrollbar-thumb-hover: var(--gray-400);

  /* ── Shadow (theme-aware) ── */
  --shadow-color: 220 3% 15%;
  --shadow-elevation-low:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
    0.4px 0.8px 1px hsl(var(--shadow-color) / 0.1);
  --shadow-elevation-medium:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.11),
    0.8px 1.6px 2px hsl(var(--shadow-color) / 0.11),
    2px 4px 5px hsl(var(--shadow-color) / 0.11);
  --shadow-elevation-high:
    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.1),
    1.5px 2.9px 3.7px hsl(var(--shadow-color) / 0.1),
    2.7px 5.4px 6.8px hsl(var(--shadow-color) / 0.1),
    4.5px 8.9px 11.2px hsl(var(--shadow-color) / 0.1),
    7.1px 14.3px 18px hsl(var(--shadow-color) / 0.1);
}


/* ============================================================================
   2 (cont). SEMANTIC TOKENS — DARK THEME
   ============================================================================ */

[data-theme="dark"] {
  --bg-page:            var(--gray-950);
  --bg-surface:         var(--gray-900);
  --bg-surface-raised:  var(--gray-800);
  --bg-surface-sunken:  var(--gray-950);
  --bg-surface-overlay: var(--gray-800);
  --bg-muted:           var(--gray-800);
  --bg-subtle:          var(--gray-900);
  --bg-inverse:         var(--gray-100);
  --bg-backdrop:        rgb(0 0 0 / 0.7);

  --text-primary:      var(--gray-50);
  --text-secondary:    var(--gray-400);
  --text-tertiary:     var(--gray-500);
  --text-placeholder:  var(--gray-600);
  --text-disabled:     var(--gray-700);
  --text-inverse:      var(--gray-900);
  --text-link:         var(--primary-400);
  --text-link-hover:   var(--primary-300);
  --text-link-visited: var(--secondary-400);

  --border-default:    var(--gray-700);
  --border-strong:     var(--gray-600);
  --border-subtle:     var(--gray-800);
  --border-disabled:   var(--gray-800);
  --border-inverse:    var(--gray-300);

  --bg-primary:        var(--primary-500);
  --bg-primary-hover:  var(--primary-400);
  --bg-primary-active: var(--primary-600);
  --bg-primary-subtle: var(--primary-950);

  --bg-secondary:        var(--secondary-500);
  --bg-secondary-hover:  var(--secondary-400);
  --bg-secondary-active: var(--secondary-600);
  --bg-secondary-subtle: var(--secondary-950);

  --bg-accent:        var(--accent-500);
  --bg-accent-hover:  var(--accent-400);
  --bg-accent-active: var(--accent-600);
  --bg-accent-subtle: var(--accent-950);

  --bg-success-subtle: var(--success-900);
  --bg-warning-subtle: var(--warning-900);
  --bg-danger-subtle:  var(--danger-900);
  --bg-info-subtle:    var(--info-900);

  --ring-color:        var(--primary-400);
  --ring-offset-color: var(--gray-900);

  --selection-bg:    var(--primary-800);
  --selection-text:  var(--primary-100);

  --scrollbar-track:       var(--gray-800);
  --scrollbar-thumb:       var(--gray-600);
  --scrollbar-thumb-hover: var(--gray-500);

  --shadow-color: 220 40% 2%;
  --shadow-xs:     0 1px 2px 0 rgb(0 0 0 / 0.2);
  --shadow-sm:     0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  --shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg:     0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.35);
  --shadow-xl:     0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
  --shadow-2xl:    0 25px 50px -12px rgb(0 0 0 / 0.6);
}


/* ============================================================================
   2 (cont). SEMANTIC TOKENS — ACCENT THEME
   ============================================================================ */

[data-theme="accent"] {
  --bg-page:            var(--primary-700);
  --bg-surface:         var(--primary-600);
  --bg-surface-raised:  var(--primary-500);
  --bg-surface-sunken:  var(--primary-800);
  --bg-surface-overlay: var(--primary-500);
  --bg-muted:           var(--primary-800);
  --bg-subtle:          var(--primary-700);
  --bg-inverse:         var(--color-white);
  --bg-backdrop:        rgb(0 0 0 / 0.6);

  --text-primary:      var(--color-white);
  --text-secondary:    var(--primary-100);
  --text-tertiary:     var(--primary-200);
  --text-placeholder:  var(--primary-300);
  --text-disabled:     var(--primary-400);
  --text-inverse:      var(--primary-900);
  --text-link:         var(--primary-100);
  --text-link-hover:   var(--color-white);

  --border-default:    var(--primary-400);
  --border-strong:     var(--primary-300);
  --border-subtle:     var(--primary-600);
  --border-disabled:   var(--primary-700);
  --border-inverse:    var(--color-white);

  --bg-primary:        var(--color-white);
  --bg-primary-hover:  var(--gray-100);
  --bg-primary-active: var(--gray-200);
  --bg-primary-subtle: var(--primary-800);
  --text-on-primary:   var(--primary-700);

  --ring-color:        var(--color-white);
  --ring-offset-color: var(--primary-600);

  --selection-bg:    var(--primary-400);
  --selection-text:  var(--color-white);

  --shadow-color: 220 60% 10%;
}


/* ============================================================================
   3. COMPONENT TOKENS
   ============================================================================ */

:root {

  /* ── Heading composites ── */
  --h1-size:     var(--text-5xl);
  --h1-weight:   var(--weight-extrabold);
  --h1-leading:  var(--leading-tight);
  --h1-tracking: var(--tracking-tight);
  --h1-family:   var(--font-heading);

  --h2-size:     var(--text-4xl);
  --h2-weight:   var(--weight-bold);
  --h2-leading:  var(--leading-tight);
  --h2-tracking: var(--tracking-tight);
  --h2-family:   var(--font-heading);

  --h3-size:     var(--text-3xl);
  --h3-weight:   var(--weight-bold);
  --h3-leading:  var(--leading-snug);
  --h3-tracking: var(--tracking-normal);
  --h3-family:   var(--font-heading);

  --h4-size:     var(--text-2xl);
  --h4-weight:   var(--weight-semibold);
  --h4-leading:  var(--leading-snug);
  --h4-tracking: var(--tracking-normal);
  --h4-family:   var(--font-heading);

  --h5-size:     var(--text-xl);
  --h5-weight:   var(--weight-semibold);
  --h5-leading:  var(--leading-normal);
  --h5-tracking: var(--tracking-normal);
  --h5-family:   var(--font-heading);

  --h6-size:     var(--text-lg);
  --h6-weight:   var(--weight-semibold);
  --h6-leading:  var(--leading-normal);
  --h6-tracking: var(--tracking-normal);
  --h6-family:   var(--font-heading);

  /* ── Body composites ── */
  --body-2xl-size:     var(--text-2xl);
  --body-2xl-weight:   var(--weight-regular);
  --body-2xl-leading:  var(--leading-relaxed);

  --body-xl-size:      var(--text-xl);
  --body-xl-weight:    var(--weight-regular);
  --body-xl-leading:   var(--leading-relaxed);

  --body-lg-size:      var(--text-lg);
  --body-lg-weight:    var(--weight-regular);
  --body-lg-leading:   var(--leading-relaxed);

  --body-base-size:    var(--text-base);
  --body-base-weight:  var(--weight-regular);
  --body-base-leading: var(--leading-normal);

  --body-sm-size:      var(--text-sm);
  --body-sm-weight:    var(--weight-regular);
  --body-sm-leading:   var(--leading-normal);

  --body-xs-size:      var(--text-xs);
  --body-xs-weight:    var(--weight-regular);
  --body-xs-leading:   var(--leading-normal);

  /* ── Utility typography ── */
  --label-size:        var(--text-sm);
  --label-weight:      var(--weight-medium);
  --label-tracking:    var(--tracking-wide);

  --caption-size:      var(--text-xs);
  --caption-weight:    var(--weight-regular);

  --overline-size:     var(--text-xs);
  --overline-weight:   var(--weight-semibold);
  --overline-tracking: var(--tracking-widest);

  --code-size:         var(--text-sm);
  --code-family:       var(--font-mono);
  --code-weight:       var(--weight-regular);

  --blockquote-size:   var(--text-xl);
  --blockquote-weight: var(--weight-light);
  --blockquote-style:  italic;
  --blockquote-family: var(--font-accent);

  /* ── Button sizes ── */
  --btn-height-xs:  var(--space-7);
  --btn-height-sm:  var(--space-8);
  --btn-height-md:  var(--space-10);
  --btn-height-lg:  var(--space-12);
  --btn-height-xl:  var(--space-14);

  --btn-px-xs:  var(--space-2-5);
  --btn-px-sm:  var(--space-3);
  --btn-px-md:  var(--space-4);
  --btn-px-lg:  var(--space-6);
  --btn-px-xl:  var(--space-8);

  --btn-font-xs:  var(--text-xs);
  --btn-font-sm:  var(--text-sm);
  --btn-font-md:  var(--text-sm);
  --btn-font-lg:  var(--text-base);
  --btn-font-xl:  var(--text-lg);

  --btn-weight:       var(--weight-semibold);
  --btn-radius:       var(--radius-lg);
  --btn-border-width: var(--border-2);
  --btn-transition:   all var(--duration-200) var(--ease-default);
  --btn-icon-gap:     var(--space-2);

  /* ── Button: Primary ── */
  --btn-primary-bg:           var(--bg-primary);
  --btn-primary-bg-hover:     var(--bg-primary-hover);
  --btn-primary-bg-active:    var(--bg-primary-active);
  --btn-primary-text:         var(--text-on-primary);
  --btn-primary-border:       transparent;
  --btn-primary-shadow:       var(--shadow-sm);
  --btn-primary-shadow-hover: var(--shadow-md);

  /* ── Button: Secondary ── */
  --btn-secondary-bg:         var(--bg-secondary);
  --btn-secondary-bg-hover:   var(--bg-secondary-hover);
  --btn-secondary-bg-active:  var(--bg-secondary-active);
  --btn-secondary-text:       var(--text-on-secondary);
  --btn-secondary-border:     transparent;
  --btn-secondary-shadow:     var(--shadow-sm);

  /* ── Button: Outline ── */
  --btn-outline-bg:           transparent;
  --btn-outline-bg-hover:     var(--bg-primary-subtle);
  --btn-outline-bg-active:    var(--primary-100);
  --btn-outline-text:         var(--bg-primary);
  --btn-outline-text-hover:   var(--bg-primary-hover);
  --btn-outline-border:       var(--bg-primary);
  --btn-outline-border-hover: var(--bg-primary-hover);

  /* ── Button: Ghost ── */
  --btn-ghost-bg:         transparent;
  --btn-ghost-bg-hover:   var(--bg-muted);
  --btn-ghost-bg-active:  var(--gray-200);
  --btn-ghost-text:       var(--text-primary);
  --btn-ghost-text-hover: var(--text-primary);

  /* ── Button: Soft ── */
  --btn-soft-bg:         var(--bg-primary-subtle);
  --btn-soft-bg-hover:   var(--primary-100);
  --btn-soft-bg-active:  var(--primary-200);
  --btn-soft-text:       var(--primary-700);

  /* ── Button: Link ── */
  --btn-link-text:              var(--text-link);
  --btn-link-text-hover:        var(--text-link-hover);
  --btn-link-underline-offset:  2px;

  /* ── Button: Danger ── */
  --btn-danger-bg:               var(--bg-danger);
  --btn-danger-bg-hover:         var(--bg-danger-hover);
  --btn-danger-text:             var(--text-on-danger);
  --btn-danger-border:           transparent;
  --btn-danger-outline-bg:       transparent;
  --btn-danger-outline-bg-hover: var(--danger-50);
  --btn-danger-outline-text:     var(--danger-600);
  --btn-danger-outline-border:   var(--danger-600);

  /* ── Button: Success ── */
  --btn-success-bg:       var(--bg-success);
  --btn-success-bg-hover: var(--bg-success-hover);
  --btn-success-text:     var(--text-on-success);

  /* ── Button: Warning ── */
  --btn-warning-bg:       var(--bg-warning);
  --btn-warning-bg-hover: var(--bg-warning-hover);
  --btn-warning-text:     var(--text-on-warning);

  /* ── Button: Disabled ── */
  --btn-disabled-bg:      var(--gray-100);
  --btn-disabled-text:    var(--gray-400);
  --btn-disabled-border:  var(--gray-200);
  --btn-disabled-opacity: 0.6;

  /* ── Button: Icon-only ── */
  --btn-icon-size-xs:  var(--space-7);
  --btn-icon-size-sm:  var(--space-8);
  --btn-icon-size-md:  var(--space-10);
  --btn-icon-size-lg:  var(--space-12);
  --btn-icon-size-xl:  var(--space-14);

  /* ── Input / Form ── */
  --input-height-sm:       var(--space-8);
  --input-height-md:       var(--space-10);
  --input-height-lg:       var(--space-12);
  --input-px:              var(--space-3);
  --input-font:            var(--text-sm);
  --input-radius:          var(--radius-lg);
  --input-border-width:    var(--border-1);
  --input-border-color:    var(--border-default);
  --input-border-hover:    var(--border-strong);
  --input-border-focus:    var(--border-focus);
  --input-bg:              var(--bg-surface);
  --input-bg-disabled:     var(--bg-muted);
  --input-text:            var(--text-primary);
  --input-text-placeholder:var(--text-placeholder);
  --input-shadow-focus:    0 0 0 var(--ring-width) rgb(59 130 246 / 0.2);
  --input-transition:      border-color var(--duration-150) var(--ease-default),
                           box-shadow var(--duration-150) var(--ease-default);
  --textarea-min-height:   var(--space-24);
  --select-indicator-size: var(--space-4);

  /* ── Checkbox / Radio ── */
  --check-size-sm:        var(--space-4);
  --check-size-md:        var(--space-5);
  --check-size-lg:        var(--space-6);
  --check-radius:         var(--radius-sm);
  --radio-radius:         var(--radius-full);
  --check-bg-checked:     var(--bg-primary);
  --check-border:         var(--border-strong);
  --check-border-checked: var(--bg-primary);
  --check-icon-color:     var(--color-white);

  /* ── Toggle / Switch ── */
  --toggle-width:       var(--space-11);
  --toggle-height:      var(--space-6);
  --toggle-thumb-size:  var(--space-5);
  --toggle-bg-off:      var(--gray-300);
  --toggle-bg-on:       var(--bg-primary);
  --toggle-thumb-color: var(--color-white);

  /* ── Card ── */
  --card-bg:           var(--bg-surface);
  --card-border-color: var(--border-default);
  --card-border-width: var(--border-1);
  --card-radius:       var(--radius-xl);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding:      var(--space-6);
  --card-gap:          var(--space-4);
  --card-transition:   box-shadow var(--duration-200) var(--ease-default),
                       transform var(--duration-200) var(--ease-default);

  /* ── Badge ── */
  --badge-height-sm:      var(--space-5);
  --badge-height-md:      var(--space-6);
  --badge-height-lg:      var(--space-7);
  --badge-px:             var(--space-2);
  --badge-font:           var(--text-xs);
  --badge-weight:         var(--weight-medium);
  --badge-radius:         var(--radius-full);
  --badge-radius-square:  var(--radius-md);
  --badge-primary-bg:     var(--primary-100);
  --badge-primary-text:   var(--primary-700);
  --badge-secondary-bg:   var(--secondary-100);
  --badge-secondary-text: var(--secondary-700);
  --badge-success-bg:     var(--success-100);
  --badge-success-text:   var(--success-700);
  --badge-warning-bg:     var(--warning-100);
  --badge-warning-text:   var(--warning-700);
  --badge-danger-bg:      var(--danger-100);
  --badge-danger-text:    var(--danger-700);
  --badge-info-bg:        var(--info-100);
  --badge-info-text:      var(--info-700);
  --badge-neutral-bg:     var(--gray-100);
  --badge-neutral-text:   var(--gray-700);

  /* ── Avatar ── */
  --avatar-size-xs:       var(--space-6);
  --avatar-size-sm:       var(--space-8);
  --avatar-size-md:       var(--space-10);
  --avatar-size-lg:       var(--space-12);
  --avatar-size-xl:       var(--space-16);
  --avatar-size-2xl:      var(--space-20);
  --avatar-radius:        var(--radius-full);
  --avatar-border-width:  var(--border-2);
  --avatar-border-color:  var(--color-white);
  --avatar-fallback-bg:   var(--gray-200);
  --avatar-fallback-text: var(--gray-600);

  /* ── Alert ── */
  --alert-padding:      var(--space-4);
  --alert-radius:       var(--radius-lg);
  --alert-border-width: var(--border-1);
  --alert-icon-size:    var(--text-xl);
  --alert-info-bg:      var(--bg-info-subtle);
  --alert-info-border:  var(--info-200);
  --alert-info-text:    var(--info-800);
  --alert-info-icon:    var(--info-500);
  --alert-success-bg:      var(--bg-success-subtle);
  --alert-success-border:  var(--success-200);
  --alert-success-text:    var(--success-800);
  --alert-success-icon:    var(--success-500);
  --alert-warning-bg:      var(--bg-warning-subtle);
  --alert-warning-border:  var(--warning-200);
  --alert-warning-text:    var(--warning-800);
  --alert-warning-icon:    var(--warning-500);
  --alert-danger-bg:       var(--bg-danger-subtle);
  --alert-danger-border:   var(--danger-200);
  --alert-danger-text:     var(--danger-800);
  --alert-danger-icon:     var(--danger-500);

  /* ── Tooltip ── */
  --tooltip-bg:        var(--gray-900);
  --tooltip-text:      var(--color-white);
  --tooltip-radius:    var(--radius-md);
  --tooltip-padding:   var(--space-1-5) var(--space-3);
  --tooltip-font:      var(--text-xs);
  --tooltip-shadow:    var(--shadow-lg);
  --tooltip-max-width: 20rem;

  /* ── Modal ── */
  --modal-bg:       var(--bg-surface-overlay);
  --modal-radius:   var(--radius-2xl);
  --modal-shadow:   var(--shadow-2xl);
  --modal-padding:  var(--space-6);
  --modal-width-sm: var(--container-sm);
  --modal-width-md: var(--container-md);
  --modal-width-lg: var(--container-lg);
  --modal-width-xl: var(--container-xl);
  --modal-backdrop: var(--bg-backdrop);

  /* ── Dropdown ── */
  --dropdown-bg:          var(--bg-surface-overlay);
  --dropdown-border:      var(--border-default);
  --dropdown-radius:      var(--radius-xl);
  --dropdown-shadow:      var(--shadow-lg);
  --dropdown-padding:     var(--space-1);
  --dropdown-item-px:     var(--space-3);
  --dropdown-item-py:     var(--space-2);
  --dropdown-item-radius: var(--radius-md);
  --dropdown-item-hover:  var(--bg-muted);
  --dropdown-item-active: var(--bg-primary-subtle);
  --dropdown-separator:   var(--border-subtle);

  /* ── Table ── */
  --table-header-bg:       var(--bg-subtle);
  --table-header-text:     var(--text-secondary);
  --table-header-weight:   var(--weight-semibold);
  --table-header-font:     var(--text-xs);
  --table-header-tracking: var(--tracking-wider);
  --table-cell-px:         var(--space-4);
  --table-cell-py:         var(--space-3);
  --table-border:          var(--border-subtle);
  --table-row-hover:       var(--bg-subtle);
  --table-row-stripe:      var(--bg-subtle);
  --table-radius:          var(--radius-xl);

  /* ── Navbar ── */
  --navbar-height:           var(--space-16);
  --navbar-bg:               var(--bg-surface);
  --navbar-border:           var(--border-subtle);
  --navbar-shadow:           var(--shadow-sm);
  --navbar-px:               var(--space-6);
  --navbar-item-px:          var(--space-4);
  --navbar-item-py:          var(--space-2);
  --navbar-item-radius:      var(--radius-md);
  --navbar-item-hover:       var(--bg-muted);
  --navbar-item-active:      var(--bg-primary-subtle);
  --navbar-item-active-text: var(--bg-primary);

  /* ── Sidebar ── */
  --sidebar-width:           16rem;
  --sidebar-width-collapsed: var(--space-16);
  --sidebar-bg:              var(--bg-surface);
  --sidebar-border:          var(--border-subtle);
  --sidebar-item-px:         var(--space-3);
  --sidebar-item-py:         var(--space-2);
  --sidebar-item-radius:     var(--radius-md);
  --sidebar-item-hover:      var(--bg-muted);
  --sidebar-item-active-bg:  var(--bg-primary-subtle);
  --sidebar-item-active-text:var(--bg-primary);

  /* ── Tabs ── */
  --tab-height:           var(--space-10);
  --tab-px:               var(--space-4);
  --tab-font:             var(--text-sm);
  --tab-weight:           var(--weight-medium);
  --tab-text:             var(--text-secondary);
  --tab-text-active:      var(--bg-primary);
  --tab-indicator-height: 2px;
  --tab-indicator-color:  var(--bg-primary);
  --tab-hover-bg:         var(--bg-muted);
  --tab-radius:           var(--radius-md);

  /* ── Breadcrumb ── */
  --breadcrumb-font:        var(--text-sm);
  --breadcrumb-text:        var(--text-secondary);
  --breadcrumb-text-active: var(--text-primary);
  --breadcrumb-separator:   var(--text-tertiary);
  --breadcrumb-gap:         var(--space-2);

  /* ── Pagination ── */
  --pagination-size:        var(--space-10);
  --pagination-radius:      var(--radius-md);
  --pagination-font:        var(--text-sm);
  --pagination-bg:          transparent;
  --pagination-bg-hover:    var(--bg-muted);
  --pagination-bg-active:   var(--bg-primary);
  --pagination-text:        var(--text-primary);
  --pagination-text-active: var(--text-on-primary);

  /* ── Progress ── */
  --progress-height:       var(--space-2);
  --progress-radius:       var(--radius-full);
  --progress-bg:           var(--gray-200);
  --progress-fill:         var(--bg-primary);
  --progress-fill-success: var(--bg-success);
  --progress-fill-warning: var(--bg-warning);
  --progress-fill-danger:  var(--bg-danger);

  /* ── Skeleton ── */
  --skeleton-bg:       var(--gray-200);
  --skeleton-shimmer:  var(--gray-100);
  --skeleton-radius:   var(--radius-md);
  --skeleton-duration: 1.5s;

  /* ── Divider ── */
  --divider-color:   var(--border-default);
  --divider-width:   var(--border-1);
  --divider-spacing: var(--space-6);

  /* ── Image ── */
  --img-radius:         var(--radius-lg);
  --img-radius-sm:      var(--radius-md);
  --img-radius-lg:      var(--radius-xl);
  --img-radius-full:    var(--radius-full);
  --img-border-width:   var(--border-0);
  --img-border-color:   var(--border-default);
  --img-shadow:         var(--shadow-none);
  --img-shadow-hover:   var(--shadow-md);
  --img-placeholder-bg: var(--gray-100);

  /* ── Section spacing ── */
  --section-py-sm: var(--space-12);
  --section-py-md: var(--space-20);
  --section-py-lg: var(--space-32);
  --section-py-xl: var(--space-40);
  --section-gap:   var(--space-12);

  /* ── Grid ── */
  --grid-gap:     var(--space-6);
  --grid-gap-sm:  var(--space-4);
  --grid-gap-lg:  var(--space-8);
  --grid-gap-xl:  var(--space-12);
  --grid-columns: 12;

  /* ── Toast ── */
  --toast-bg:        var(--bg-surface-overlay);
  --toast-border:    var(--border-default);
  --toast-radius:    var(--radius-xl);
  --toast-shadow:    var(--shadow-xl);
  --toast-padding:   var(--space-4);
  --toast-max-width: 24rem;
  --toast-min-width: 18rem;

  /* ── Code block ── */
  --code-inline-bg:      var(--gray-100);
  --code-inline-text:    var(--danger-600);
  --code-inline-radius:  var(--radius-sm);
  --code-inline-px:      var(--space-1-5);
  --code-inline-py:      var(--space-0-5);
  --code-block-bg:       var(--gray-900);
  --code-block-text:     var(--gray-100);
  --code-block-radius:   var(--radius-xl);
  --code-block-padding:  var(--space-5);
  --code-block-font:     var(--font-mono);
  --code-block-size:     var(--text-sm);
  --code-block-line-height: var(--leading-relaxed);
  --code-block-header-bg:   var(--gray-800);

  /* ── Footer ── */
  --footer-bg:         var(--gray-900);
  --footer-text:       var(--gray-400);
  --footer-heading:    var(--color-white);
  --footer-link:       var(--gray-300);
  --footer-link-hover: var(--color-white);
  --footer-border:     var(--gray-800);
  --footer-py:         var(--space-16);
}


/* ============================================================================
   3 (cont). DARK THEME COMPONENT OVERRIDES
   ============================================================================ */

[data-theme="dark"] {
  --badge-primary-bg:     var(--primary-900);
  --badge-primary-text:   var(--primary-200);
  --badge-secondary-bg:   var(--secondary-900);
  --badge-secondary-text: var(--secondary-200);
  --badge-success-bg:     var(--success-900);
  --badge-success-text:   var(--success-200);
  --badge-warning-bg:     var(--warning-900);
  --badge-warning-text:   var(--warning-200);
  --badge-danger-bg:      var(--danger-900);
  --badge-danger-text:    var(--danger-200);
  --badge-info-bg:        var(--info-900);
  --badge-info-text:      var(--info-200);
  --badge-neutral-bg:     var(--gray-800);
  --badge-neutral-text:   var(--gray-200);

  --alert-info-bg:        var(--info-950);
  --alert-info-border:    var(--info-800);
  --alert-info-text:      var(--info-200);
  --alert-success-bg:     var(--success-950);
  --alert-success-border: var(--success-800);
  --alert-success-text:   var(--success-200);
  --alert-warning-bg:     var(--warning-950);
  --alert-warning-border: var(--warning-800);
  --alert-warning-text:   var(--warning-200);
  --alert-danger-bg:      var(--danger-950);
  --alert-danger-border:  var(--danger-800);
  --alert-danger-text:    var(--danger-200);

  --btn-disabled-bg:      var(--gray-800);
  --btn-disabled-text:    var(--gray-600);
  --btn-disabled-border:  var(--gray-700);
  --btn-ghost-bg-hover:   var(--gray-800);
  --btn-ghost-bg-active:  var(--gray-700);
  --btn-soft-bg:          var(--primary-950);
  --btn-soft-bg-hover:    var(--primary-900);
  --btn-soft-bg-active:   var(--primary-800);
  --btn-soft-text:        var(--primary-300);
  --btn-outline-bg-hover: var(--primary-950);
  --btn-outline-bg-active:var(--primary-900);
  --btn-danger-outline-bg-hover: var(--danger-950);
  --btn-danger-outline-text:     var(--danger-400);
  --btn-danger-outline-border:   var(--danger-500);

  --tooltip-bg:   var(--gray-100);
  --tooltip-text: var(--gray-900);

  --code-inline-bg:   var(--gray-800);
  --code-inline-text: var(--danger-400);

  --progress-bg: var(--gray-700);

  --skeleton-bg:      var(--gray-800);
  --skeleton-shimmer: var(--gray-700);

  --avatar-border-color:  var(--gray-800);
  --avatar-fallback-bg:   var(--gray-700);
  --avatar-fallback-text: var(--gray-300);

  --img-placeholder-bg: var(--gray-800);

  --footer-bg:     var(--gray-950);
  --footer-border: var(--gray-800);

  --toggle-bg-off: var(--gray-600);
}


/* ============================================================================
   3 (cont). ACCENT THEME COMPONENT OVERRIDES
   ============================================================================ */

[data-theme="accent"] {
  --badge-primary-bg:   rgb(255 255 255 / 0.15);
  --badge-primary-text: var(--color-white);
  --badge-neutral-bg:   rgb(255 255 255 / 0.1);
  --badge-neutral-text: var(--primary-100);

  --btn-ghost-text:       var(--color-white);
  --btn-ghost-bg-hover:   rgb(255 255 255 / 0.1);
  --btn-ghost-bg-active:  rgb(255 255 255 / 0.2);
  --btn-soft-bg:          rgb(255 255 255 / 0.12);
  --btn-soft-bg-hover:    rgb(255 255 255 / 0.18);
  --btn-soft-bg-active:   rgb(255 255 255 / 0.24);
  --btn-soft-text:        var(--color-white);
  --btn-outline-text:     var(--color-white);
  --btn-outline-border:   var(--color-white);
  --btn-outline-bg-hover: rgb(255 255 255 / 0.1);
  --btn-outline-text-hover:   var(--color-white);
  --btn-outline-border-hover: var(--color-white);
  --btn-disabled-bg:     rgb(255 255 255 / 0.1);
  --btn-disabled-text:   rgb(255 255 255 / 0.35);
  --btn-disabled-border: rgb(255 255 255 / 0.15);

  --tooltip-bg:   var(--color-white);
  --tooltip-text: var(--primary-900);

  --code-inline-bg:   rgb(255 255 255 / 0.15);
  --code-inline-text: var(--color-white);
  --code-block-bg:    var(--primary-900);

  --table-header-bg:   rgb(255 255 255 / 0.08);
  --table-header-text: var(--primary-100);
  --table-border:      rgb(255 255 255 / 0.12);
  --table-row-hover:   rgb(255 255 255 / 0.06);

  --progress-bg:   rgb(255 255 255 / 0.15);
  --progress-fill: var(--color-white);

  --footer-bg:         var(--primary-900);
  --footer-text:       var(--primary-300);
  --footer-heading:    var(--color-white);
  --footer-link:       var(--primary-200);
  --footer-link-hover: var(--color-white);
  --footer-border:     var(--primary-800);

  --navbar-bg:               var(--primary-700);
  --navbar-border:           var(--primary-600);
  --navbar-item-hover:       rgb(255 255 255 / 0.1);
  --navbar-item-active:      rgb(255 255 255 / 0.15);
  --navbar-item-active-text: var(--color-white);
}


/* ============================================================================
   4. REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-75:    0ms;
    --duration-100:   0ms;
    --duration-150:   0ms;
    --duration-200:   0ms;
    --duration-300:   0ms;
    --duration-500:   0ms;
    --duration-700:   0ms;
    --duration-1000:  0ms;
    --skeleton-duration: 0s;
  }
}