/* ==========================================================================
   XEANLAB DESIGN TOKENS
   Strict adherence to DESIGN.md specification
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #FFCD6D;
  --color-accent: #FFD687;
  --color-canvas: #F6F3EF;
  --color-surface-alt: #2F2F2F;
  --color-surface-dark: #1E1E1E;
  --color-on-primary: #121718;
  --color-ink: #121718;
  --color-body: #212121;
  --color-muted: #FFFFFF;
  --color-neutral-1: #000000;
  --color-neutral-2: #EAE4DD;
  --color-border: #DBD9D5;
  --color-border-dark: #3E3E3E;
  --color-code-bg: #18181A;
  --color-accent-subtle: rgba(255, 205, 109, 0.15);
  --color-accent-glow: rgba(255, 205, 109, 0.35);

  /* Typography Families */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-interactive: Arial, Helvetica, sans-serif;

  /* Typography Scales & Kerning (Exact tokens from DESIGN.md) */
  --type-display-xxl-size: 100.8px;
  --type-display-xxl-lh: 0.95;
  --type-display-xxl-tracking: -3.02px;

  --type-display-xl-size: 86.4px;
  --type-display-xl-lh: 0.95;
  --type-display-xl-tracking: -2.59px;

  --type-display-lg-size: 75.6px;
  --type-display-lg-lh: 1.0;
  --type-display-lg-tracking: -0.22px;

  --type-display-md-size: 57.6px;
  --type-display-md-lh: 0.95;
  --type-display-md-tracking: -1.73px;

  --type-display-sm-size: 43.2px;
  --type-display-sm-lh: 1.15;
  --type-display-sm-tracking: -1.30px;

  --type-heading-xl-size: 36px;
  --type-heading-xl-lh: 1.0;
  --type-heading-xl-tracking: -1.08px;

  --type-heading-lg-size: 32.4px;
  --type-heading-lg-lh: 1.20;
  --type-heading-lg-tracking: -0.22px;

  --type-heading-md-size: 29.16px;
  --type-heading-md-lh: 1.15;
  --type-heading-md-tracking: -0.87px;

  --type-heading-sm-size: 28.8px;
  --type-heading-sm-lh: 1.15;
  --type-heading-sm-tracking: -0.86px;

  --type-heading-xs-size: 24.48px;
  --type-heading-xs-lh: 1.24;
  --type-heading-xs-tracking: -0.73px;

  --type-body-xl-size: 18px;
  --type-body-xl-lh: 1.33;
  --type-body-xl-tracking: -0.22px;

  --type-body-lg-size: 16px;
  --type-body-lg-lh: 1.35;
  --type-body-lg-tracking: -0.60px;

  --type-body-md-size: 15.84px;
  --type-body-md-lh: 1.35;
  --type-body-md-tracking: -0.48px;

  --type-body-sm-size: 15px;
  --type-body-sm-lh: 1.6;
  --type-body-sm-tracking: -0.30px;

  --type-body-xs-size: 14px;
  --type-body-xs-lh: 1.71;
  --type-body-xs-tracking: -0.22px;

  --type-nav-size: 15px;
  --type-nav-lh: 1.40;
  --type-nav-tracking: -0.30px;

  --type-button-size: 14px;
  --type-caption-sm-size: 12px;
  --type-caption-sm-tracking: -0.24px;
  --type-caption-xs-size: 11.52px;
  --type-caption-xs-tracking: -0.35px;

  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Spacing Scale (4px base unit) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section: 44px;
  --space-band: 88px;

  /* Border Radii */
  --rounded-none: 0px;
  --rounded-xs: 2px;
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-full: 9999px;

  /* Border Widths */
  --border-thin: 1px;
  --border-medium: 2px;

  /* Elevation */
  --shadow-dropdown: rgba(0, 0, 0, 0.05) 0px 0px 10px 0px;

  /* Layout Containers */
  --container-max: 1354px;
  --container-padding: 24px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}