/* ==========================================================================
   Design Tokens — UI Library
   Source: Figma "Library – UI Library" (node 101:379)
   ========================================================================== */

/* Fonts loaded via <link> in each page's <head> — no @import to avoid sequential fetch */

:root {

  /* --------------------------------------------------------------------------
     Color — White & Black
     -------------------------------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;

  /* --------------------------------------------------------------------------
     Color — Opacity (white overlays)
     Built for use on dark surfaces.
     -------------------------------------------------------------------------- */
  --color-opacity-white-opc-10: rgba(255, 255, 255, 0.10);
  --color-opacity-white-opc-25: rgba(255, 255, 255, 0.25);
  --color-opacity-white-opc-40: rgba(255, 255, 255, 0.40);
  --color-opacity-white-opc-60: rgba(255, 255, 255, 0.60);
  --color-opacity-white-opc-80: rgba(255, 255, 255, 0.80);

  --color-opacity-black-opc-05: rgba(0, 0, 0, 0.05);
  --color-opacity-black-opc-10: rgba(0, 0, 0, 0.10);
  --color-opacity-black-opc-25: rgba(0, 0, 0, 0.25);
  --color-opacity-black-opc-40: rgba(0, 0, 0, 0.40);
  --color-opacity-black-opc-60: rgba(0, 0, 0, 0.60);
  --color-opacity-black-opc-80: rgba(0, 0, 0, 0.80);

  /* --------------------------------------------------------------------------
     Color — Neutral
     Hue 245° with minimal chroma — very muted blue-indigo.
     -------------------------------------------------------------------------- */
  --color-neutral-00:  #ffffff;
  --color-neutral-50:  #f5f8fc;
  --color-neutral-100: #e7ecf0;
  --color-neutral-200: #d2d8de;
  --color-neutral-300: #b8bfc5;
  --color-neutral-400: #97a0a7;
  --color-neutral-500: #767e86;
  --color-neutral-600: #4d555c;
  --color-neutral-700: #383e44;
  --color-neutral-800: #1b2024;
  --color-neutral-900: #090d10;
  --color-neutral-1000: #000000;

  /* --------------------------------------------------------------------------
     Color — Blue (interactive / primary)
     Hue 255° — main interactive color.
     -------------------------------------------------------------------------- */
  --color-blue-50:  #e4f8ff;
  --color-blue-100: #cbeeff;
  --color-blue-200: #a9daff;
  --color-blue-300: #82c0ff;
  --color-blue-400: #549ffd;
  --color-blue-500: #0f72d9;
  --color-blue-600: #0058b7;
  --color-blue-700: #003887;
  --color-blue-800: #001c58;
  --color-blue-900: #000831;

  /* --------------------------------------------------------------------------
     Color — Blue opacified helpers
     For use on dark and light surfaces where a semi-transparent blue is needed.
     -------------------------------------------------------------------------- */
  --color-blue-border-dim:    rgba(18, 122, 230, 0.18);
  --color-blue-border-subtle: rgba(18, 122, 230, 0.25);
  --color-blue-glow:          rgba(18, 122, 230, 0.08);

  /* --------------------------------------------------------------------------
     Color — Purple
     Hue 298° — category / decorative.
     -------------------------------------------------------------------------- */
  --color-purple-50:  #f8f1ff;
  --color-purple-100: #efe2ff;
  --color-purple-200: #decaff;
  --color-purple-300: #c7acff;
  --color-purple-400: #aa87ed;
  --color-purple-500: #8a5ed4;
  --color-purple-600: #683fa8;
  --color-purple-700: #48237a;
  --color-purple-800: #2a0b4f;
  --color-purple-900: #13002b;

  /* --------------------------------------------------------------------------
     Color — Green (success)
     Hue 148°.
     -------------------------------------------------------------------------- */
  --color-green-50:  #e8fcea;
  --color-green-100: #d2f6d5;
  --color-green-200: #b2e6b9;
  --color-green-300: #8ed097;
  --color-green-400: #61b36f;
  --color-green-500: #289344;
  --color-green-600: #006f29;
  --color-green-700: #004c10;
  --color-green-800: #002c00;
  --color-green-900: #001400;

  /* --------------------------------------------------------------------------
     Color — Yellow (warning)
     Hue 88°.
     -------------------------------------------------------------------------- */
  --color-yellow-50:  #fff5de;
  --color-yellow-100: #fae9c1;
  --color-yellow-200: #edd59a;
  --color-yellow-300: #d8ba6e;
  --color-yellow-400: #be9934;
  --color-yellow-500: #9f7400;
  --color-yellow-600: #7a5400;
  --color-yellow-700: #563600;
  --color-yellow-800: #331b00;
  --color-yellow-900: #190900;

  /* --------------------------------------------------------------------------
     Color — Orange (alert)
     Hue 48°.
     -------------------------------------------------------------------------- */
  --color-orange-50:  #fff0e2;
  --color-orange-100: #ffe0c9;
  --color-orange-200: #ffc7a6;
  --color-orange-300: #f7a87f;
  --color-orange-400: #df8250;
  --color-orange-500: #c2580c;
  --color-orange-600: #983a00;
  --color-orange-700: #6d1f00;
  --color-orange-800: #440700;
  --color-orange-900: #230000;

  /* --------------------------------------------------------------------------
     Color — Red (error / destructive)
     Hue 22°.
     -------------------------------------------------------------------------- */
  --color-red-50:  #ffedeb;
  --color-red-100: #ffdad7;
  --color-red-200: #ffbfbb;
  --color-red-300: #ff9d9a;
  --color-red-400: #ea7574;
  --color-red-500: #cd474c;
  --color-red-600: #a12831;
  --color-red-700: #740a19;
  --color-red-800: #490006;
  --color-red-900: #260000;

  /* --------------------------------------------------------------------------
     Color — Surface Semantic aliases
     -------------------------------------------------------------------------- */

  /* Surface */
  --color-surface-page-bg:              var(--color-neutral-50);           /* Figma: color/surface/page-bg */
  --color-surface-card:                 var(--color-neutral-00);           /* Figma: color/surface/card */
  --color-surface-background-default:   var(--color-neutral-100);          /* Figma: color/surface/default */
  --color-surface-background-overlay:   var(--color-opacity-black-opc-80); /* Figma: color/surface/overlay */
  --color-surface-background-secondary: var(--color-neutral-700);          /* Figma: color/surface/secondary */
  --color-surface-background-tertiary:  var(--color-neutral-200);          /* Figma: color/surface/tertiary */
  --color-surface-background-inverse:   var(--color-neutral-900);          /* Figma: color/surface/background/inverse */
  --color-surface-background-elevated:  var(--color-neutral-200);           /* Figma: color/surface/elevated */
  --color-surface-accent-default:       var(--color-blue-500);             /* Figma: color/surface/accent/default */
  --color-surface-accent-dim:           var(--color-blue-400);             /* Figma: color/surface/accent/dim */
  --color-surface-hero:                 var(--color-neutral-800);          /* Figma: color/surface/hero */

  /* --------------------------------------------------------------------------
     Color — Buttons aliases
     -------------------------------------------------------------------------- */

  /* Button surface states */
  --color-surface-buttons-button-on:    var(--color-blue-300);             /* Figma: color/surface/buttons/button-on */
  --color-surface-buttons-button-hover: var(--color-blue-500);             /* Figma: color/surface/buttons/button-hover */
  --color-buttons-ghost-hover:          var(--color-opacity-black-opc-05); /* Figma: color/buttons/ghost/hover */
  --color-buttons-ghost-active:         var(--color-opacity-black-opc-10); /* Figma: color/buttons/ghost/active */
  --color-buttons-danger-default:       var(--color-red-500);              /* Figma: color/buttons/danger/default */
  --color-buttons-danger-hover:         var(--color-red-600);              /* Figma: color/buttons/danger/hover */
  --color-buttons-danger-active:        var(--color-red-700);              /* Figma: color/buttons/danger/active */

  /* --------------------------------------------------------------------------
     Color — Text Semantic aliases
     -------------------------------------------------------------------------- */

  /* Text body */
  --color-text-primary:        var(--color-neutral-900);  /* Figma: color/text/primary */
  --color-text-secondary:      var(--color-neutral-600);  /* Figma: color/text/secondary */
  --color-text-ghost:          var(--color-neutral-500);  /* Figma: color/text/ghost */
  --color-text-inverse:        var(--color-white);        /* Figma: color/text/inverse */
  --color-text-accent-default: var(--color-blue-500);     /* Figma: color/text/accent */
  --color-text-accent-dim:     var(--color-blue-400);     /* Figma: color/text/accent-dim */
  --color-text-accent-subtle:  var(--color-blue-300);     /* Figma: color/text/accent-subtle */
  --color-text-hero-dim:       var(--color-neutral-400);  /* Figma: color/text/hero/dim */
  --color-text-hero-ghost:     var(--color-neutral-400);  /* Figma: color/text/hero/ghost */

  /* Text link */
  --color-text-link-default:  var(--color-blue-600);   /* Figma: color/text/link/default */
  --color-text-link-hover:    var(--color-blue-700);   /* Figma: color/text/link/hover */
  --color-text-link-visited:  var(--color-purple-600); /* Figma: color/text/link/visited */

  /* Text buttons */
  --color-text-buttons-primary:   var(--color-neutral-50);  /* Figma: color/text/buttons/primary */
  --color-text-buttons-secondary: var(--color-blue-700);    /* Figma: color/text/buttons/secondary */
  --color-text-buttons-ghost:     var(--color-neutral-800); /* Figma: color/text/buttons/ghost */
  --color-text-buttons-disabled:  var(--color-neutral-300); /* Figma: color/text/buttons/disabled */
  --color-text-buttons-danger:    var(--color-neutral-50);  /* Figma: color/text/buttons/danger */

  /* Text feedback */
  --color-text-info-default:    var(--color-blue-600);   /* Figma: color/text/feedback/info/default */
  --color-text-info-dark:       var(--color-blue-700);   /* Figma: color/text/feedback/info/dark */
  --color-text-info-light:      var(--color-blue-200);   /* Figma: color/text/feedback/info/light */

  --color-text-success-default: var(--color-green-600);  /* Figma: color/text/feedback/success/default */
  --color-text-success-dark:    var(--color-green-700);  /* Figma: color/text/feedback/success/dark */
  --color-text-success-light:   var(--color-green-200);  /* Figma: color/text/feedback/success/light */

  --color-text-warning-default: var(--color-yellow-600); /* Figma: color/text/feedback/warning/default */
  --color-text-warning-dark:    var(--color-yellow-700); /* Figma: color/text/feedback/warning/dark */
  --color-text-warning-light:   var(--color-yellow-200); /* Figma: color/text/feedback/warning/light */

  --color-text-error-default:   var(--color-red-600);    /* Figma: color/text/feedback/error/default */
  --color-text-error-dark:      var(--color-red-700);    /* Figma: color/text/feedback/error/dark */
  --color-text-error-light:     var(--color-red-200);    /* Figma: color/text/feedback/error/light */

  --color-text-alert-default:   var(--color-orange-600); /* Figma: color/text/feedback/alert/default */
  --color-text-alert-dark:      var(--color-orange-700); /* Figma: color/text/feedback/alert/dark */
  --color-text-alert-light:     var(--color-orange-200); /* Figma: color/text/feedback/alert/light */

  /* --------------------------------------------------------------------------
     Color — Borders aliases
     -------------------------------------------------------------------------- */

  /* Border — base */
  --color-borders-white:          var(--color-white);                /* Figma: color/stroke/white */
  --color-borders-subtle:         var(--color-neutral-100);          /* Figma: color/stroke/subtle */
  --color-borders-hero:           rgba(255, 255, 255, 0.06);         /* Figma: color/stroke/hero */
  --color-borders-default:        var(--color-neutral-200);   /* Figma: color/stroke/default */
  --color-borders-strong:         var(--color-neutral-600);   /* Figma: color/stroke/strong */
  --color-borders-dark:           var(--color-black);         /* Figma: color/stroke/dark */
  --color-borders-focus:          var(--color-blue-400);      /* Figma: color/stroke/focus */
  --color-borders-accent-default: var(--color-blue-500);      /* Figma: color/stroke/accent/default */
  --color-borders-accent-dim:     var(--color-blue-400);      /* Figma: color/stroke/accent/dim */

  /* Border — buttons primary */
  --color-borders-buttons-primary-default: transparent;           /* Figma: color/stroke/buttons/primary/default */
  --color-borders-buttons-primary-hover:   transparent;           /* Figma: color/stroke/buttons/primary/hover */
  --color-borders-buttons-primary-active:  transparent;           /* Figma: color/stroke/buttons/primary/active */
  --color-borders-buttons-primary-focus:   var(--color-blue-50);  /* Figma: color/stroke/buttons/primary/focus */

  /* Border — buttons secondary */
  --color-borders-buttons-secondary-default: transparent; /* Figma: color/stroke/buttons/secondary/default */
  --color-borders-buttons-secondary-hover:   transparent; /* Figma: color/stroke/buttons/secondary/hover */
  --color-borders-buttons-secondary-active:  transparent; /* Figma: color/stroke/buttons/secondary/active */

  /* Border — buttons ghost */
  --color-borders-buttons-ghost-default: var(--color-opacity-black-opc-10); /* Figma: color/stroke/buttons/ghost/default */
  --color-borders-buttons-ghost-hover:   var(--color-opacity-black-opc-25); /* Figma: color/stroke/buttons/ghost/hover */
  --color-borders-buttons-ghost-active:  var(--color-opacity-black-opc-40); /* Figma: color/stroke/buttons/ghost/active */

  /* Border — buttons danger */
  --color-borders-buttons-danger-default: transparent; /* Figma: color/stroke/buttons/danger/default */
  --color-borders-buttons-danger-hover:   transparent; /* Figma: color/stroke/buttons/danger/hover */
  --color-borders-buttons-danger-active:  transparent; /* Figma: color/stroke/buttons/danger/active */

  /* Interactive */
  --color-interactive-primary-default:  var(--color-blue-400);    /* Figma: color/interactive/primary/default */
  --color-interactive-primary-hover:    var(--color-blue-300);    /* Figma: color/interactive/primary/hover */
  --color-interactive-primary-active:   var(--color-blue-200);    /* Figma: color/interactive/primary/active */
  --color-interactive-primary-disabled: var(--color-neutral-600); /* Figma: color/interactive/primary/disabled */
  --color-interactive-primary-text:     var(--color-blue-600);    /* Figma: color/interactive/primary/text */
  --color-interactive-subtle:           var(--color-blue-50);     /* Figma: color/interactive/subtle */

  /* Icons semantic */
  --color-icons-main-default:  var(--color-neutral-600); /* Figma: color/icons/main/default */
  --color-icons-main-inactive: var(--color-neutral-400); /* Figma: color/icons/main/inactive */
  --color-icons-main-active:   var(--color-blue-400);    /* Figma: color/icons/main/active */

  /* Icons feedback info */
  --color-icons-info-default:  var(--color-blue-500);   /* Figma: color/icons/feedback/info/default */
  --color-icons-info-light:    var(--color-blue-200);   /* Figma: color/icons/feedback/info/light */
  --color-icons-info-dark:     var(--color-blue-700);   /* Figma: color/icons/feedback/info/dark */

  /* Icons feedback success */
  --color-icons-success-default: var(--color-green-500);  /* Figma: color/icons/feedback/success/default */
  --color-icons-success-light:   var(--color-green-200);  /* Figma: color/icons/feedback/success/light */
  --color-icons-success-dark:    var(--color-green-700);  /* Figma: color/icons/feedback/success/dark */

  /* Icons feedback warning */
  --color-icons-warning-default: var(--color-yellow-500); /* Figma: color/icons/feedback/warning/default */
  --color-icons-warning-light:   var(--color-yellow-200); /* Figma: color/icons/feedback/warning/light */
  --color-icons-warning-dark:    var(--color-yellow-700); /* Figma: color/icons/feedback/warning/dark */

  /* Icons feedback error */
  --color-icons-error-default: var(--color-red-500);   /* Figma: color/icons/feedback/error/default */
  --color-icons-error-light:   var(--color-red-200);   /* Figma: color/icons/feedback/error/light */
  --color-icons-error-dark:    var(--color-red-700);   /* Figma: color/icons/feedback/error/dark */

  /* Icons feedback alert */
  --color-icons-alert-default: var(--color-orange-500); /* Figma: color/icons/feedback/alert/default */
  --color-icons-alert-light:   var(--color-orange-200); /* Figma: color/icons/feedback/alert/light */
  --color-icons-alert-dark:    var(--color-orange-700); /* Figma: color/icons/feedback/alert/dark */

  /* Feedback */
  --color-feedback-info-background:    var(--color-blue-50);            /* Figma: color/surface/feedback/info */
  --color-feedback-info-border:        var(--color-blue-200);           /* Figma: color/stroke/feedback/info */
  --color-feedback-info-text:          var(--color-text-info-dark);     /* Figma: color/text/feedback/info/dark */
  --color-feedback-info-icon:          var(--color-icons-info-default); /* Figma: color/icons/feedback/info/default */

  --color-feedback-success-background: var(--color-green-50);              /* Figma: color/surface/feedback/success */
  --color-feedback-success-border:     var(--color-green-200);             /* Figma: color/stroke/feedback/success */
  --color-feedback-success-text:       var(--color-text-success-dark);     /* Figma: color/text/feedback/success/dark */
  --color-feedback-success-icon:       var(--color-icons-success-default); /* Figma: color/icons/feedback/success/default */

  --color-feedback-warning-background: var(--color-yellow-50);             /* Figma: color/surface/feedback/warning */
  --color-feedback-warning-border:     var(--color-yellow-200);            /* Figma: color/stroke/feedback/warning */
  --color-feedback-warning-text:       var(--color-text-warning-dark);     /* Figma: color/text/feedback/warning/dark */
  --color-feedback-warning-icon:       var(--color-icons-warning-default); /* Figma: color/icons/feedback/warning/default */

  --color-feedback-error-background:   var(--color-red-50);              /* Figma: color/surface/feedback/error */
  --color-feedback-error-border:       var(--color-red-200);             /* Figma: color/stroke/feedback/error */
  --color-feedback-error-text:         var(--color-text-error-dark);     /* Figma: color/text/feedback/error/dark */
  --color-feedback-error-icon:         var(--color-icons-error-default); /* Figma: color/icons/feedback/error/default */

  --color-feedback-alert-background:   var(--color-orange-50);            /* Figma: color/surface/feedback/alert */
  --color-feedback-alert-border:       var(--color-orange-200);           /* Figma: color/stroke/feedback/alert */
  --color-feedback-alert-text:         var(--color-text-alert-dark);      /* Figma: color/text/feedback/alert/dark */
  --color-feedback-alert-icon:         var(--color-icons-alert-default);  /* Figma: color/icons/feedback/alert/default */

  /* --------------------------------------------------------------------------
     Typography — Font families
     -------------------------------------------------------------------------- */
  --font-family-headings:   'Bebas Neue', sans-serif;
  --font-family-body:       'Barlow', 'Noto Sans', sans-serif;
  --font-family-condensed:  'Barlow Condensed', sans-serif;
  --font-family-mono:       'JetBrains Mono', 'Geist Mono', monospace;

  /* --------------------------------------------------------------------------
     Typography — Font sizes
     Heading scale: 1.25 modular (20 → 24 → 32 → 40 → 48 → 64px)
     Body scale:    12 → 16 → 21px 
     Perfect Fourth (ratio 4/3 ≈ 1.333), base 16px
     -------------------------------------------------------------------------- */
  --font-size-h1: 90px;
  --font-size-h2: 67px;
  --font-size-h3: 51px;
  --font-size-h4: 38px;
  --font-size-h5: 28px;
  --font-size-h6: 21px;

  --font-size-body-lg: 21px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;

  --font-size-buttons-lg: 21px;
  --font-size-buttons-md: 16px;
  --font-size-buttons-sm: 12px;

  /* --------------------------------------------------------------------------
     Typography — Line heights
     Tighter as size increases: H1 ~1.11, H6 ~1.38, body fixed 1.5.
     -------------------------------------------------------------------------- */
  --line-height-h1: 100px;
  --line-height-h2: 78px;
  --line-height-h3: 61px;
  --line-height-h4: 48px;
  --line-height-h5: 37px;
  --line-height-h6: 29px;

  --line-height-buttons-lg: 24px;
  --line-height-buttons-md: 20px;
  --line-height-buttons-sm: 18px;

  /* --------------------------------------------------------------------------
     Typography — Line height scale (unitless ratios, for prose / page-level use)
     Use these for fluid, responsive contexts. The px tokens above are for
     fixed-size typographic components (heading classes, buttons, etc.).
     -------------------------------------------------------------------------- */
  --line-height-tight:       1;     /* display, counters, large headings */
  --line-height-snug:        1.2;   /* compact text, sidebar, mono labels */
  --line-height-relaxed-sm:  1.33;  /* small text xs/sm */
  --line-height-base:        1.5;   /* standard body text */
  --line-height-relaxed:     1.6;   /* comfortable body */
  --line-height-loose:   1.65;  /* spacious descriptions, cards */
  --line-height-prose:   1.75;  /* article body, section leads */
  --line-height-code:    1.85;  /* code blocks, dense mono */

  /* --------------------------------------------------------------------------
     Typography — Letter spacings (~-2% of font size for headings)
     -------------------------------------------------------------------------- */
  --letter-spacing-h1: -1.80px;
  --letter-spacing-h2: -1.34px;
  --letter-spacing-h3: -1.02px;
  --letter-spacing-h4: -0.76px;
  --letter-spacing-h5: -0.56px;
  --letter-spacing-h6: -0.42px;

  --letter-spacing-body:    0px;
  --letter-spacing-display: 0.02em;

  /* --------------------------------------------------------------------------
     Typography — Display / section titles (responsive, larger than h1 scale)
     -------------------------------------------------------------------------- */
  --font-size-display:   clamp(51px, 7vw, 120px);
  --line-height-display: 1;

  /* --------------------------------------------------------------------------
     Typography — Paragraph spacing
     Body = 1× line-height · Headings = ~0.5× line-height
     -------------------------------------------------------------------------- */
  --paragraph-spacing-h3: 32px;
  --paragraph-spacing-h4: 24px;
  --paragraph-spacing-h5: 20px;
  --paragraph-spacing-h6: 16px;

  --paragraph-spacing-body-lg: 32px;
  --paragraph-spacing-body-md: 24px;
  --paragraph-spacing-caption: 18px;

  /* --------------------------------------------------------------------------
     Typography — Font weights
     -------------------------------------------------------------------------- */
  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* --------------------------------------------------------------------------
     Sizing — mirrors Figma "sizes/sp/*" variables
     Use for: width, height, min/max dimensions. NOT for gap/padding/margin.
     -------------------------------------------------------------------------- */
  --sp-none:  0px;
  --sp-1:     1px;
  --sp-2:     2px;
  --sp-4:     4px;
  --sp-8:     8px;
  --sp-12:    12px;
  --sp-16:    16px;
  --sp-20:    20px;
  --sp-24:    24px;
  --sp-28:    28px;
  --sp-32:    32px;
  --sp-40:    40px;
  --sp-48:    48px;
  --sp-52:    52px;
  --sp-64:    64px;
  --sp-80:    80px;
  --sp-96:    96px;
  --sp-120:   120px;
  --sp-128:   128px;
  --sp-160:   160px;
  --sp-192:   192px;
  --sp-256:   256px;

  /* --------------------------------------------------------------------------
     Gap — mirrors Figma "sizes/gap/*" variables
     Use for: gap, padding, margin. NOT for width/height (use --sp-*).
     -------------------------------------------------------------------------- */
  --gap-none:    0px;
  --gap-px:      1px;
  --gap-xs:      4px;
  --gap-sm:      8px;
  --gap-md:      16px;
  --gap-lg:      24px;
  --gap-xl:      32px;
  --gap-2xl:     48px;
  --gap-3xl:     64px;
  --gap-4xl:     80px;
  --gap-5xl:     96px;
  --gap-section: 128px;
  --gap-layout:  192px;
  --gap-page:    256px;

  /* --------------------------------------------------------------------------
     Border widths — mirrors Figma "sizes/border/*" variables
     -------------------------------------------------------------------------- */
  --border-none: 0px;  /* Figma: sizes/border/none */
  --border-1:    1px;  /* Figma: sizes/border/br-1 */
  --border-2:    2px;  /* Figma: sizes/border/br-2 */
  --border-4:    4px;  /* Figma: sizes/border/br-4 */

  /* --------------------------------------------------------------------------
     Border radius
     -------------------------------------------------------------------------- */
  --radius-4:    4px;
  --radius-8:    8px;
  --radius-12:   12px;
  --radius-16:   16px;
  --radius-24:   24px;
  --radius-32:   32px;
  --radius-48:   48px;
  --radius-200:  200px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     Elevation / Shadow
     -------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(9, 13, 16, 0.08);
  --shadow-md:  0 2px 8px rgba(9, 13, 16, 0.10), 0 1px 2px rgba(9, 13, 16, 0.06);
  --shadow-lg:  0 8px 24px rgba(9, 13, 16, 0.12), 0 2px 6px rgba(9, 13, 16, 0.08);
  --shadow-xl:  0 16px 40px rgba(9, 13, 16, 0.14), 0 4px 12px rgba(9, 13, 16, 0.08);

  /* --------------------------------------------------------------------------
     Transition
     -------------------------------------------------------------------------- */
  --dur-fast:   240ms;
  --dur-base:   500ms;
  --dur-slow:   720ms;
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);  /* expo-out */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* quart-out */
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);
}