/* ==========================================================================
   Design Tokens / CSS Custom Properties

   PEGMENT Design System — Complete Color System

   Structure:
   1. Base colors (primitives)
   2. Neutral scale
   3. Peggy Blue scale (brand)
   4. Critical scale (error)
   5. Warning scale
   6. Success scale
   7. Orange scale (accent)
   8. Semantic tokens (light mode)
   9. Semantic tokens (dark mode)
   ========================================================================== */

:root {
  /* ========================================================================
     1. BASE COLORS
     ======================================================================== */
  --color-white: #FFFFFF;
  --color-dark: #02050D;
  --color-black: #000000;

  /* ========================================================================
     2. NEUTRAL SCALE
     ======================================================================== */
  --color-neutral-0: #FFFFFF;
  --color-neutral-10: #FAFAFA;
  --color-neutral-20: #F5F5F5;
  --color-neutral-30: #EBEBEC;
  --color-neutral-40: #DEDEDE;
  --color-neutral-50: #BFBFBF;
  --color-neutral-60: #B0B0B0;
  --color-neutral-70: #A3A3A3;
  --color-neutral-80: #949494;
  --color-neutral-90: #858585;
  --color-neutral-100: #757575;
  --color-neutral-200: #666666;
  --color-neutral-300: #575757;
  --color-neutral-400: #4A4A4A;
  --color-neutral-500: #3B3B3B;
  --color-neutral-600: #2E2E2E;
  --color-neutral-700: #1C1C1C;
  --color-neutral-800: #0D0D0D;
  --color-neutral-900: #000000;

  /* ========================================================================
     3. PEGGY BLUE SCALE (Brand)
     ======================================================================== */
  --color-peggy-blue-50: #E8EAF9;
  --color-peggy-blue-100: #B8BDEC;
  --color-peggy-blue-200: #959DE3;
  --color-peggy-blue-300: #6571D6;
  --color-peggy-blue-400: #4755CE;
  --color-peggy-blue-500: #192BC2;
  --color-peggy-blue-600: #1727B1;
  --color-peggy-blue-700: #121F8A;
  --color-peggy-blue-800: #0E186B;
  --color-peggy-blue-900: #0B1251;

  /* ========================================================================
     4. CRITICAL SCALE (Error)
     ======================================================================== */
  --color-critical-25: #FFF5F6;
  --color-critical-50: #FDE6E9;
  --color-critical-100: #F9B0BB;
  --color-critical-200: #F78A9B;
  --color-critical-300: #F3546D;
  --color-critical-400: #F13351;
  --color-critical-500: #ED0025;
  --color-critical-600: #D80022;
  --color-critical-700: #A8001A;
  --color-critical-800: #820014;
  --color-critical-900: #640010;

  /* ========================================================================
     5. WARNING SCALE
     ======================================================================== */
  --color-warning-50: #FFFBE7;
  --color-warning-100: #FFF2B3;
  --color-warning-200: #FFEC8E;
  --color-warning-300: #FFE45B;
  --color-warning-400: #FFDE3B;
  --color-warning-500: #FFD60A;
  --color-warning-600: #E8C309;
  --color-warning-700: #B59807;
  --color-warning-800: #8C7606;
  --color-warning-900: #6B5A04;

  /* ========================================================================
     6. SUCCESS SCALE
     ======================================================================== */
  --color-success-50: #E6F4EC;
  --color-success-100: #B0DCC3;
  --color-success-200: #8ACBA5;
  --color-success-400: #33A463;
  --color-success-500: #008D3C;
  --color-success-600: #008037;
  --color-success-700: #00642B;
  --color-success-800: #004E21;
  --color-success-900: #003B19;

  /* ========================================================================
     7. ORANGE SCALE (Accent)
     ======================================================================== */
  --color-orange-50: #FFF4ED;
  --color-orange-100: #FFE2CC;
  --color-orange-200: #FFC499;
  --color-orange-300: #FFA15C;
  --color-orange-400: #FF8A33;
  --color-orange-500: #F97315;
  --color-orange-600: #EA580C;
  --color-orange-700: #C2410C;
  --color-orange-800: #9A3412;
  --color-orange-900: #7C2D12;

  /* ========================================================================
     8. SEMANTIC TOKENS — LIGHT MODE
     ======================================================================== */

  /* --- Background --- */
  --color-bg-canvas: var(--color-neutral-20);
  --color-bg-default: var(--color-neutral-0);
  --color-bg-subtle: var(--color-neutral-10);
  --color-bg-muted: var(--color-neutral-30);
  --color-bg-emphasis: var(--color-neutral-900);
  --color-bg-inverse: var(--color-neutral-900);

  /* --- Surface --- */
  --color-surface-default: var(--color-neutral-0);
  --color-surface-raised: var(--color-neutral-0);
  --color-surface-overlay: var(--color-neutral-0);
  --color-surface-sunken: var(--color-neutral-10);
  --color-surface-sunken2: var(--color-neutral-20);

  /* --- Text --- */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-400);
  --color-text-tertiary: var(--color-neutral-200);
  --color-text-placeholder: var(--color-neutral-90);
  --color-text-placeholder-subtle: var(--color-neutral-30);
  --color-text-disabled: var(--color-neutral-60);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-peggy-blue-500);
  --color-text-link-hover: var(--color-peggy-blue-600);

  /* --- Icon --- */
  --color-icon-primary: var(--color-neutral-900);
  --color-icon-secondary: var(--color-neutral-400);
  --color-icon-tertiary: var(--color-neutral-200);
  --color-icon-placeholder: var(--color-neutral-90);
  --color-icon-placeholder-subtle: var(--color-neutral-30);
  --color-icon-disabled: var(--color-neutral-60);
  --color-icon-inverse: var(--color-neutral-0);
  --color-icon-link: var(--color-peggy-blue-500);
  --color-icon-link-hover: var(--color-peggy-blue-600);

  /* --- Brand --- */
  --color-brand-primary: var(--color-neutral-900);
  --color-brand-primary-hover: var(--color-neutral-700);
  --color-brand-primary-active: var(--color-neutral-600);
  --color-brand-on-primary: var(--color-neutral-0);
  --color-brand-primary-subtle: var(--color-neutral-10);
  --color-brand-primary-muted: var(--color-neutral-30);

  --color-brand-secondary: var(--color-peggy-blue-500);
  --color-brand-secondary-hover: var(--color-peggy-blue-600);
  --color-brand-secondary-active: var(--color-peggy-blue-700);
  --color-brand-on-secondary: var(--color-neutral-0);
  --color-brand-secondary-subtle: var(--color-peggy-blue-50);
  --color-brand-secondary-muted: var(--color-peggy-blue-100);

  --color-brand-tertiary: var(--color-neutral-400);
  --color-brand-tertiary-hover: var(--color-neutral-900);
  --color-brand-tertiary-active: var(--color-neutral-700);
  --color-brand-on-tertiary: var(--color-neutral-0);
  --color-brand-tertiary-subtle: var(--color-peggy-blue-50);
  --color-brand-tertiary-muted: var(--color-peggy-blue-100);

  /* --- Interactive --- */
  --color-interactive-primary: var(--color-neutral-900);
  --color-interactive-primary-hover: var(--color-neutral-700);
  --color-interactive-primary-active: var(--color-neutral-600);
  --color-interactive-primary-disabled: var(--color-neutral-50);
  --color-interactive-secondary: var(--color-neutral-0);
  --color-interactive-secondary-hover: var(--color-neutral-10);
  --color-interactive-ghost-hover: var(--color-neutral-20);

  /* --- Border --- */
  --color-border-on-canvas: var(--color-neutral-30);
  --color-border-subtle: var(--color-neutral-30);
  --color-border-medium: var(--color-neutral-40);
  --color-border-default: var(--color-neutral-50);
  --color-border-strong: var(--color-neutral-700);
  --color-border-focus: var(--color-peggy-blue-500);

  /* --- Status / Success --- */
  --color-success-bg: var(--color-success-100);
  --color-success-bg-subtle: var(--color-success-50);
  --color-success-border: var(--color-success-200);
  --color-success-text: var(--color-success-700);
  --color-success-icon: var(--color-success-500);
  --color-success-action: var(--color-success-500);
  --color-success-action-hover: var(--color-success-600);

  /* --- Status / Warning --- */
  --color-warning-bg: var(--color-warning-100);
  --color-warning-bg-subtle: var(--color-warning-50);
  --color-warning-border: var(--color-warning-300);
  --color-warning-text: var(--color-warning-800);
  --color-warning-icon: var(--color-warning-600);
  --color-warning-action: var(--color-warning-500);
  --color-warning-action-hover: var(--color-warning-600);

  /* --- Status / Critical --- */
  --color-critical-bg: var(--color-critical-50);
  --color-critical-bg-subtle: var(--color-critical-25);
  --color-critical-border: var(--color-critical-200);
  --color-critical-text: var(--color-critical-700);
  --color-critical-icon: var(--color-critical-500);
  --color-critical-action: var(--color-critical-500);
  --color-critical-action-hover: var(--color-critical-600);
  --color-critical-disabled: var(--color-critical-100);

  /* ========================================================================
     TYPOGRAPHY — base
     ======================================================================== */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;

  /* ========================================================================
     TYPOGRAPHY — Display scale
     ======================================================================== */
  --text-display-2xl-size: 4.5rem; /* 72px */
  --text-display-2xl-line-height: 5.625rem; /* 90px */
  --text-display-2xl-letter-spacing: -0.02em;
  --text-display-xl-size: 3.75rem; /* 60px */
  --text-display-xl-line-height: 4.5rem; /* 72px */
  --text-display-xl-letter-spacing: -0.02em;
  --text-display-lg-size: 3rem; /* 48px */
  --text-display-lg-line-height: 3.75rem; /* 60px */
  --text-display-lg-letter-spacing: -0.02em;
  --text-display-md-size: 2.25rem; /* 36px */
  --text-display-md-line-height: 2.75rem; /* 44px */
  --text-display-md-letter-spacing: -0.02em;

  /* ========================================================================
     TYPOGRAPHY — Headline scale
     ======================================================================== */
  --text-headline-lg-size: 2rem; /* 32px */
  --text-headline-lg-line-height: 2.5rem; /* 40px */
  --text-headline-md-size: 1.75rem; /* 28px */
  --text-headline-md-line-height: 2.25rem; /* 36px */
  --text-headline-sm-size: 1.5rem; /* 24px */
  --text-headline-sm-line-height: 2rem; /* 32px */

  /* ========================================================================
     TYPOGRAPHY — Title scale
     ======================================================================== */
  --text-title-lg-size: 1.25rem; /* 20px */
  --text-title-lg-line-height: 1.75rem; /* 28px */
  --text-title-md-size: 1rem; /* 16px */
  --text-title-md-line-height: 1.5rem; /* 24px */
  --text-title-sm-size: 0.875rem; /* 14px */
  --text-title-sm-line-height: 1.25rem; /* 20px */

  /* ========================================================================
     TYPOGRAPHY — Body scale
     ======================================================================== */
  --text-body-xl-size: 1.125rem; /* 18px */
  --text-body-xl-line-height: 1.5rem; /* 24px */
  --text-body-lg-size: 1rem; /* 16px */
  --text-body-lg-line-height: 1.5rem; /* 24px */
  --text-body-md-size: 0.875rem; /* 14px */
  --text-body-md-line-height: 1.25rem; /* 20px */
  --text-body-sm-size: 0.8125rem; /* 13px */
  --text-body-sm-line-height: 1rem; /* 16px */
  --text-body-xs-size: 0.75rem; /* 12px */
  --text-body-xs-line-height: 1rem; /* 16px */

  /* ========================================================================
     TYPOGRAPHY — Label scale
     ======================================================================== */
  --text-label-lg-size: 0.875rem; /* 14px */
  --text-label-lg-line-height: 1.25rem; /* 20px */
  --text-label-md-size: 0.8125rem; /* 13px */
  --text-label-md-line-height: 1rem; /* 16px */
  --text-label-sm-size: 0.75rem; /* 12px */
  --text-label-sm-line-height: 1rem; /* 16px */
  --text-label-xs-size: 0.6875rem; /* 11px */
  --text-label-xs-line-height: 0.875rem; /* 14px */

  /* ========================================================================
     SPACING SCALE
     ======================================================================== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* ========================================================================
     LAYOUT
     ======================================================================== */
  --max-width: 1100px;
  --radius: 8px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --transition: 0.2s ease;
  --transition-fast: 0.15s ease;

  /* ========================================================================
     SHADOWS
     ======================================================================== */
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0px 0px 0px 4px;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* --- Background --- */
    --color-bg-canvas: var(--color-neutral-900);
    --color-bg-default: var(--color-neutral-800);
    --color-bg-subtle: var(--color-neutral-700);
    --color-bg-muted: var(--color-neutral-600);
    --color-bg-emphasis: var(--color-neutral-0);
    --color-bg-inverse: var(--color-neutral-0);

    /* --- Surface --- */
    --color-surface-default: var(--color-neutral-700);
    --color-surface-raised: var(--color-neutral-600);
    --color-surface-overlay: var(--color-neutral-600);
    --color-surface-sunken: var(--color-neutral-800);
    --color-surface-sunken2: var(--color-neutral-900);

    /* --- Text --- */
    --color-text-primary: var(--color-neutral-0);
    --color-text-secondary: var(--color-neutral-60);
    --color-text-tertiary: var(--color-neutral-90);
    --color-text-placeholder: var(--color-neutral-200);
    --color-text-placeholder-subtle: var(--color-neutral-600);
    --color-text-disabled: var(--color-neutral-400);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-link: var(--color-peggy-blue-300);
    --color-text-link-hover: var(--color-peggy-blue-200);

    /* --- Icon --- */
    --color-icon-primary: var(--color-neutral-0);
    --color-icon-secondary: var(--color-neutral-60);
    --color-icon-tertiary: var(--color-neutral-90);
    --color-icon-placeholder: var(--color-neutral-200);
    --color-icon-placeholder-subtle: var(--color-neutral-600);
    --color-icon-disabled: var(--color-neutral-400);
    --color-icon-inverse: var(--color-neutral-900);
    --color-icon-link: var(--color-peggy-blue-300);
    --color-icon-link-hover: var(--color-peggy-blue-200);

    /* --- Brand --- */
    --color-brand-primary: var(--color-neutral-0);
    --color-brand-primary-hover: var(--color-neutral-10);
    --color-brand-primary-active: var(--color-neutral-30);
    --color-brand-on-primary: var(--color-neutral-900);
    --color-brand-primary-subtle: var(--color-neutral-800);
    --color-brand-primary-muted: var(--color-neutral-700);

    --color-brand-secondary: var(--color-peggy-blue-400);
    --color-brand-secondary-hover: var(--color-peggy-blue-300);
    --color-brand-secondary-active: var(--color-peggy-blue-200);
    --color-brand-on-secondary: var(--color-neutral-0);
    --color-brand-secondary-subtle: var(--color-peggy-blue-900);
    --color-brand-secondary-muted: var(--color-peggy-blue-800);

    --color-brand-tertiary: var(--color-neutral-60);
    --color-brand-tertiary-hover: var(--color-neutral-0);
    --color-brand-tertiary-active: var(--color-neutral-10);
    --color-brand-on-tertiary: var(--color-neutral-0);
    --color-brand-tertiary-subtle: var(--color-peggy-blue-900);
    --color-brand-tertiary-muted: var(--color-peggy-blue-800);

    /* --- Interactive --- */
    --color-interactive-primary: var(--color-neutral-0);
    --color-interactive-primary-hover: var(--color-neutral-10);
    --color-interactive-primary-active: var(--color-neutral-30);
    --color-interactive-primary-disabled: var(--color-neutral-500);
    --color-interactive-secondary: var(--color-neutral-700);
    --color-interactive-secondary-hover: var(--color-neutral-600);
    --color-interactive-ghost-hover: var(--color-neutral-600);

    /* --- Border --- */
    --color-border-on-canvas: var(--color-neutral-800);
    --color-border-subtle: var(--color-neutral-700);
    --color-border-medium: var(--color-neutral-600);
    --color-border-default: var(--color-neutral-500);
    --color-border-strong: var(--color-neutral-90);
    --color-border-focus: var(--color-peggy-blue-400);

    /* --- Status / Success --- */
    --color-success-bg: var(--color-success-800);
    --color-success-bg-subtle: var(--color-success-900);
    --color-success-border: var(--color-success-700);
    --color-success-text: var(--color-success-200);
    --color-success-icon: var(--color-success-400);
    --color-success-action: var(--color-success-400);
    --color-success-action-hover: var(--color-success-600);

    /* --- Status / Warning --- */
    --color-warning-bg: var(--color-warning-800);
    --color-warning-bg-subtle: var(--color-warning-900);
    --color-warning-border: var(--color-warning-700);
    --color-warning-text: var(--color-warning-200);
    --color-warning-icon: var(--color-warning-400);
    --color-warning-action: var(--color-warning-400);
    --color-warning-action-hover: var(--color-warning-300);

    /* --- Status / Critical --- */
    --color-critical-bg: var(--color-critical-800);
    --color-critical-bg-subtle: var(--color-critical-900);
    --color-critical-border: var(--color-critical-700);
    --color-critical-text: var(--color-critical-200);
    --color-critical-icon: var(--color-critical-400);
    --color-critical-action: var(--color-critical-400);
    --color-critical-action-hover: var(--color-critical-300);
    --color-critical-disabled: var(--color-critical-700);
  }
}

/* Manual dark mode override (add .dark class to html or body) */
.dark {
  /* --- Background --- */
  --color-bg-canvas: var(--color-neutral-900);
  --color-bg-default: var(--color-neutral-800);
  --color-bg-subtle: var(--color-neutral-700);
  --color-bg-muted: var(--color-neutral-600);
  --color-bg-emphasis: var(--color-neutral-0);
  --color-bg-inverse: var(--color-neutral-0);

  /* --- Surface --- */
  --color-surface-default: var(--color-neutral-700);
  --color-surface-raised: var(--color-neutral-600);
  --color-surface-overlay: var(--color-neutral-600);
  --color-surface-sunken: var(--color-neutral-800);
  --color-surface-sunken2: var(--color-neutral-900);

  /* --- Text --- */
  --color-text-primary: var(--color-neutral-0);
  --color-text-secondary: var(--color-neutral-60);
  --color-text-tertiary: var(--color-neutral-90);
  --color-text-placeholder: var(--color-neutral-200);
  --color-text-placeholder-subtle: var(--color-neutral-600);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-900);
  --color-text-link: var(--color-peggy-blue-300);
  --color-text-link-hover: var(--color-peggy-blue-200);

  /* --- Icon --- */
  --color-icon-primary: var(--color-neutral-0);
  --color-icon-secondary: var(--color-neutral-60);
  --color-icon-tertiary: var(--color-neutral-90);
  --color-icon-placeholder: var(--color-neutral-200);
  --color-icon-placeholder-subtle: var(--color-neutral-600);
  --color-icon-disabled: var(--color-neutral-400);
  --color-icon-inverse: var(--color-neutral-900);
  --color-icon-link: var(--color-peggy-blue-300);
  --color-icon-link-hover: var(--color-peggy-blue-200);

  /* --- Brand --- */
  --color-brand-primary: var(--color-neutral-0);
  --color-brand-primary-hover: var(--color-neutral-10);
  --color-brand-primary-active: var(--color-neutral-30);
  --color-brand-on-primary: var(--color-neutral-900);
  --color-brand-primary-subtle: var(--color-neutral-800);
  --color-brand-primary-muted: var(--color-neutral-700);

  --color-brand-secondary: var(--color-peggy-blue-400);
  --color-brand-secondary-hover: var(--color-peggy-blue-300);
  --color-brand-secondary-active: var(--color-peggy-blue-200);
  --color-brand-on-secondary: var(--color-neutral-0);
  --color-brand-secondary-subtle: var(--color-peggy-blue-900);
  --color-brand-secondary-muted: var(--color-peggy-blue-800);

  --color-brand-tertiary: var(--color-neutral-60);
  --color-brand-tertiary-hover: var(--color-neutral-0);
  --color-brand-tertiary-active: var(--color-neutral-10);
  --color-brand-on-tertiary: var(--color-neutral-0);
  --color-brand-tertiary-subtle: var(--color-peggy-blue-900);
  --color-brand-tertiary-muted: var(--color-peggy-blue-800);

  /* --- Interactive --- */
  --color-interactive-primary: var(--color-neutral-0);
  --color-interactive-primary-hover: var(--color-neutral-10);
  --color-interactive-primary-active: var(--color-neutral-30);
  --color-interactive-primary-disabled: var(--color-neutral-500);
  --color-interactive-secondary: var(--color-neutral-700);
  --color-interactive-secondary-hover: var(--color-neutral-600);
  --color-interactive-ghost-hover: var(--color-neutral-600);

  /* --- Border --- */
  --color-border-on-canvas: var(--color-neutral-800);
  --color-border-subtle: var(--color-neutral-700);
  --color-border-medium: var(--color-neutral-600);
  --color-border-default: var(--color-neutral-500);
  --color-border-strong: var(--color-neutral-90);
  --color-border-focus: var(--color-peggy-blue-400);

  /* --- Status / Success --- */
  --color-success-bg: var(--color-success-800);
  --color-success-bg-subtle: var(--color-success-900);
  --color-success-border: var(--color-success-700);
  --color-success-text: var(--color-success-200);
  --color-success-icon: var(--color-success-400);
  --color-success-action: var(--color-success-400);
  --color-success-action-hover: var(--color-success-600);

  /* --- Status / Warning --- */
  --color-warning-bg: var(--color-warning-800);
  --color-warning-bg-subtle: var(--color-warning-900);
  --color-warning-border: var(--color-warning-700);
  --color-warning-text: var(--color-warning-200);
  --color-warning-icon: var(--color-warning-400);
  --color-warning-action: var(--color-warning-400);
  --color-warning-action-hover: var(--color-warning-300);

  /* --- Status / Critical --- */
  --color-critical-bg: var(--color-critical-800);
  --color-critical-bg-subtle: var(--color-critical-900);
  --color-critical-border: var(--color-critical-700);
  --color-critical-text: var(--color-critical-200);
  --color-critical-icon: var(--color-critical-400);
  --color-critical-action: var(--color-critical-400);
  --color-critical-action-hover: var(--color-critical-300);
  --color-critical-disabled: var(--color-critical-700);
}