/* ==========================================================================
   FILENAME: design-system-theme.css
   DESCRIPTION: Design tokens for colors, spacing, sizing, and radius.
   INCLUDES: Light and Dark mode semantic overrides.
   ========================================================================== */

:root {
  /* ==========================================================================
     1. REFERENCE COLORS (PRIMITIVES)
     ========================================================================== */
  
  /* Primary & Neutral */
  --ref-primary-0: #000000;
  --ref-primary-5: #101010;
  --ref-primary-10: #1b1b1b;
  --ref-primary-20: #303030;
  --ref-primary-90: #e2e2e2;
  --ref-primary-95: #f1f1f1;
  --ref-primary-100: #ffffff;

  --ref-neutral-0: #000000;
  --ref-neutral-5: #101010;
  --ref-neutral-10: #1b1b1b;
  --ref-neutral-15: #262626;
  --ref-neutral-20: #303030;
  --ref-neutral-30: #474747;
  --ref-neutral-40: #5e5e5e;
  --ref-neutral-45: #6a6a6a;
  --ref-neutral-55: #848484;
  --ref-neutral-60: #919191;
  --ref-neutral-70: #ababab;
  --ref-neutral-75: #b9b9b9;
  --ref-neutral-80: #c6c6c6;
  --ref-neutral-85: #d4d4d4;
  --ref-neutral-90: #e2e2e2;
  --ref-neutral-95: #f1f1f1;
  --ref-neutral-100: #ffffff;

  /* Secondary (Brand) */
  --ref-secondary-45: #bf3e00;
  --ref-secondary-55: #ea4d00;
  --ref-secondary-60: #ff5500;
  --ref-secondary-65: #ff7440;
  --ref-secondary-75: #ffa180;

  /* Feedback Scales */
  --ref-error-15: #530107;
  --ref-error-40: #c00011;
  --ref-error-45: #d3181c;
  --ref-error-60: #ff5449;
  --ref-error-65: #ff7164;
  --ref-error-95: #ffede9;

  --ref-success-15: #002c1c;
  --ref-success-40: #006c49;
  --ref-success-45: #007a53;
  --ref-success-50: #00885d;
  --ref-success-65: #32b27f;
  --ref-success-97: #e4f7ec;

  --ref-warning-15: #322300;
  --ref-warning-45: #886500;
  --ref-warning-65: #c79600;
  --ref-warning-80: #fa0000;
  --ref-warning-95: #fff4d4;
  --ref-warning-101: #9e5c00;
  --ref-warning-102: #c4770b;

  --ref-information-15: #00254f;
  --ref-information-20: #003063;
  --ref-information-45: #326ab8;
  --ref-information-55: #4f84d4;
  --ref-information-65: #6b9ef0;
  --ref-information-95: #ecf0ff;

  --ref-onboarding-40: #4f56ac;
  --ref-onboarding-55: #757cd5;

  /* Data Visualization Primitives */
  --ref-data-vis-variant-60: #009fb4;
  --ref-data-vis-variant-75: #50c8de;
  --ref-data-vis-variant-2-60: #4396dc;
  --ref-data-vis-variant-2-70: #62b1f9;
  --ref-data-vis-variant-3-60: #a97dd9;
  --ref-data-vis-variant-3-70: #c597f6;
  --ref-data-vis-variant-4-60: #d071a8;
  --ref-data-vis-variant-4-70: #ef8bc4;

  /* ==========================================================================
     2. SPACING & SIZING (4PX GRID)
     ========================================================================== */
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;

  --sizing-0: 0px;
  --sizing-1: 4px;
  --sizing-2: 8px;
  --sizing-4: 16px;
  --sizing-6: 24px;
  --sizing-8: 32px;
  --sizing-10: 40px;
  --sizing-12: 48px;
  --sizing-16: 64px;

  /* ==========================================================================
     3. RADIUS
     ========================================================================== */
  --radius-sm: 2px;
  --radius-default: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 999px;

  /* ==========================================================================
     4. SYSTEM COLORS (SEMANTIC ALIASES - LIGHT MODE)
     ========================================================================== */
  
  /* Core */
  --sys-primary: var(--ref-primary-5);
  --sys-on-primary: var(--ref-neutral-100);
  --sys-secondary: var(--ref-secondary-60);
  --sys-on-secondary: var(--ref-neutral-0);
  --sys-background: var(--ref-primary-95);
  --sys-on-background: var(--ref-neutral-0);
  --sys-surface: var(--ref-neutral-100);
  --sys-on-surface: var(--ref-neutral-0);
  --sys-surface-container: var(--ref-neutral-90);
  --sys-surface-container-low: var(--ref-neutral-95);
  
  /* Feedback */
  --sys-error: var(--ref-error-45);
  --sys-on-error: var(--ref-neutral-100);
  --sys-error-container: var(--ref-error-95);
  --sys-on-error-container-text: var(--ref-error-40);
  
  --sys-success: var(--ref-success-45);
  --sys-on-success: var(--ref-neutral-100);
  --sys-success-container: var(--ref-success-97);
  --sys-on-success-container-text: var(--ref-success-40);
  
  --sys-warning: var(--ref-warning-45);
  --sys-on-warning: var(--ref-neutral-100);
  --sys-warning-container: var(--ref-warning-95);
  --sys-on-warning-container-text: var(--ref-warning-101);
  
  --sys-information: var(--ref-information-45);
  --sys-on-information: var(--ref-neutral-100);
  --sys-information-container: var(--ref-information-95);
  --sys-on-information-container-text: var(--ref-information-20);
  
  /* Borders & Variants */
  --sys-outline: var(--ref-neutral-55);
  --sys-outline-variant: var(--ref-neutral-70);
  --sys-on-surface-variant: var(--ref-neutral-45);
  --sys-on-background-variant: var(--ref-neutral-45);

  /* States & Misc */
  --sys-scrim: rgba(16, 16, 16, 0.5);
  --sys-onboarding: var(--ref-onboarding-40);
  --sys-on-onboarding: var(--ref-neutral-100);

  /* Data Vis */
  --sys-data-vis-brand: var(--ref-secondary-60);
  --sys-data-vis-neutral: var(--ref-neutral-45);
  --sys-data-vis-1: var(--ref-data-vis-variant-60);
  --sys-data-vis-2: var(--ref-data-vis-variant-2-60);
  --sys-data-vis-3: var(--ref-data-vis-variant-3-60);
  --sys-data-vis-4: var(--ref-data-vis-variant-4-60);
}

/* ==========================================================================
   5. SYSTEM COLORS (DARK MODE OVERRIDES)
   ========================================================================== */

:root[data-theme="dark"] {
    /* Core */
    --sys-primary: var(--ref-primary-100);
    --sys-on-primary: var(--ref-neutral-0);
    --sys-secondary: var(--ref-secondary-65);
    --sys-on-secondary: var(--ref-neutral-0);
    --sys-background: var(--ref-primary-0);
    --sys-on-background: var(--ref-neutral-100);
    --sys-surface: var(--ref-neutral-10);
    --sys-on-surface: var(--ref-neutral-100);
    --sys-surface-container: var(--ref-neutral-15);
    --sys-surface-container-low: var(--ref-neutral-5);

    /* Feedback */
    --sys-error: var(--ref-error-65);
    --sys-on-error: var(--ref-neutral-0);
    --sys-error-container: var(--ref-error-15);
    --sys-on-error-container-text: var(--ref-error-95);

    --sys-success: var(--ref-success-65);
    --sys-on-success: var(--ref-neutral-0);
    --sys-success-container: var(--ref-success-15);
    --sys-on-success-container-text: var(--ref-success-97);

    --sys-warning: var(--ref-warning-65);
    --sys-on-warning: var(--ref-neutral-0);
    --sys-warning-container: var(--ref-warning-15);
    --sys-on-warning-container-text: var(--ref-warning-95);

    --sys-information: var(--ref-information-65);
    --sys-on-information: var(--ref-neutral-0);
    --sys-information-container: var(--ref-information-15);
    --sys-on-information-container-text: var(--ref-information-95);

    /* Borders & Variants */
    --sys-outline: var(--ref-neutral-45);
    --sys-outline-variant: var(--ref-neutral-30);
    --sys-on-surface-variant: var(--ref-neutral-60);
    --sys-on-background-variant: var(--ref-neutral-60);

    /* Misc */
    --sys-onboarding: var(--ref-onboarding-55);
    --sys-on-onboarding: var(--ref-neutral-0);

    /* Data Vis */
    --sys-data-vis-neutral: var(--ref-neutral-75);
    --sys-data-vis-1: var(--ref-data-vis-variant-75);
    --sys-data-vis-2: var(--ref-data-vis-variant-2-70);
    --sys-data-vis-3: var(--ref-data-vis-variant-3-70);
    --sys-data-vis-4: var(--ref-data-vis-variant-4-70);
}