/* ==========================================================================
   DESIGN TOKENS - FIGMENT WARM IVORY + ELECTRIC INDIGO COLOR SYSTEM
   Layer 1: Primitive Tokens (Raw Design Constants)
   Layer 2: Semantic Tokens (Contextual Purpose Aliases)
   Layer 3: Component Tokens (Component-Specific Styling)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     LAYER 1: PRIMITIVE TOKENS
     ------------------------------------------------------------------------ */
  /* Pure Luxurious Ivory Palette - Rich Modern Architectural Tones */
  --primitive-ivory-50: #FCFAF6;        /* Soft Light Ivory */
  --primitive-ivory-100: #F8F5EE;       /* Luxurious Authentic Warm Ivory Main Background */
  --primitive-ivory-200: #EFEAE0;       /* Secondary Warm Ivory Accent */
  --primitive-ivory-300: #E2DDD2;       /* Warm Ivory Border & Divider Tone */
  --primitive-ivory-400: #D4CDC0;       /* Muted Ivory Accent / Active Border */

  /* Aliases mapped to Ivory tokens */
  --primitive-cream-50: var(--primitive-ivory-50);
  --primitive-cream-100: var(--primitive-ivory-100);
  --primitive-cream-200: var(--primitive-ivory-200);
  --primitive-cream-300: var(--primitive-ivory-300);
  --primitive-cream-400: var(--primitive-ivory-400);
  
  --primitive-pure-white: #FFFFFF;     /* Card surface background */

  /* Deep Warm Slate & Espresso Text */
  --primitive-warm-obsidian: #1C1917;  /* Primary Text */
  --primitive-stone-600: #57534E;      /* Secondary Text */
  --primitive-stone-400: #A8A29E;      /* Muted Text */

  /* Electric & Rich Deep Indigo Color Palette */
  --primitive-indigo-950: #0F1026;
  --primitive-indigo-900: #1E1B4B;    /* Rich Deep Indigo Section BG */
  --primitive-indigo-850: #292468;    /* Dark Indigo Card Surface */
  --primitive-indigo-800: #3730A3;
  --primitive-indigo-700: #4338CA;
  --primitive-indigo-600: #4F46E5;    /* Primary Electric Indigo Accent */
  --primitive-indigo-500: #6366F1;
  --primitive-indigo-200: #C7D2FE;    /* Soft Lavender Indigo Detail Accent */
  --primitive-indigo-100: #E0E7FF;    /* Light Indigo Border Tint */
  --primitive-indigo-50: #EEF2FF;

  --primitive-emerald-600: #059669;

  /* Typography Scale */
  --primitive-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primitive-font-geometric: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primitive-font-mono: 'JetBrains Mono', monospace;

  --primitive-text-xs: 0.75rem;    /* 12px */
  --primitive-text-sm: 0.875rem;   /* 14px */
  --primitive-text-base: 1rem;     /* 16px */
  --primitive-text-lg: 1.125rem;   /* 18px */
  --primitive-text-xl: 1.35rem;    /* 21.6px */
  --primitive-text-2xl: 1.75rem;   /* 28px */
  --primitive-text-3xl: 2.25rem;   /* 36px */
  --primitive-text-4xl: 3.25rem;   /* 52px */
  --primitive-text-5xl: 4.5rem;    /* 72px */

  /* Spacing Scale */
  --primitive-space-1: 0.25rem;  /* 4px */
  --primitive-space-2: 0.5rem;   /* 8px */
  --primitive-space-3: 0.75rem;  /* 12px */
  --primitive-space-4: 1rem;     /* 16px */
  --primitive-space-6: 1.5rem;   /* 24px */
  --primitive-space-8: 2rem;     /* 32px */
  --primitive-space-12: 3rem;    /* 48px */
  --primitive-space-16: 4rem;    /* 64px */
  --primitive-space-24: 6rem;    /* 96px */

  /* Border Radii */
  --primitive-radius-sm: 0.25rem;  /* 4px */
  --primitive-radius-md: 0.5rem;   /* 8px */
  --primitive-radius-lg: 0.875rem; /* 14px */
  --primitive-radius-xl: 1.25rem;  /* 20px */
  --primitive-radius-full: 9999px;

  /* Subtle Clean Flat Shadows */
  --primitive-shadow-subtle: 0 1px 2px rgba(28, 25, 23, 0.03);
  --primitive-shadow-md: 0 2px 8px rgba(28, 25, 23, 0.05);
  --primitive-shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.08);

  /* Transitions & Spring Curves */
  --primitive-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --primitive-ease-bounce: cubic-bezier(0.34, 1.35, 0.64, 1);
  --primitive-transition-morph: 480ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------------
     LAYER 2: SEMANTIC TOKENS
     ------------------------------------------------------------------------ */
  --color-bg: var(--primitive-ivory-100);          /* #F8F5EE Luxurious Warm Ivory */
  --color-surface: var(--primitive-pure-white);     /* #FFFFFF */
  --color-surface-hover: var(--primitive-ivory-200);

  --color-text-primary: var(--primitive-warm-obsidian); /* #1C1917 */
  --color-text-secondary: var(--primitive-stone-600);   /* #57534E */
  --color-text-muted: var(--primitive-stone-400);

  /* Primary Accent -> Electric Indigo (#4F46E5) */
  --color-accent: var(--primitive-indigo-600);
  --color-accent-hover: var(--primitive-indigo-700);
  --color-accent-light: var(--primitive-indigo-500);

  /* Deep Indigo Section Background Tokens (#1E1B4B) */
  --color-indigo-section-bg: var(--primitive-indigo-900); /* #1E1B4B Deep Indigo BG */
  --color-indigo-card-bg: var(--primitive-indigo-850);   /* #292468 Card Surface */
  --color-indigo-border: rgba(255, 255, 255, 0.16);
  --color-indigo-dark-bg: var(--primitive-indigo-950);

  --color-border: var(--primitive-ivory-300);          /* #E2DDD2 Warm Ivory Border */
  --color-border-hover: var(--primitive-ivory-400);

  --font-family-body: var(--primitive-font-sans);
  --font-family-desc: var(--primitive-font-geometric);
  --font-family-mono: var(--primitive-font-mono);

  --backdrop-blur-glass: blur(12px);
  --glass-bg: rgba(248, 245, 238, 0.88);
  --glass-border: var(--primitive-ivory-300);

  /* ------------------------------------------------------------------------
     LAYER 3: COMPONENT TOKENS
     ------------------------------------------------------------------------ */
  --nav-height: 3.5rem;
  --nav-bg: transparent;
  --nav-border: transparent;

  --card-bg: var(--primitive-pure-white);
  --card-border: var(--color-border);
  --card-radius: var(--primitive-radius-lg);

  --btn-primary-bg: var(--primitive-indigo-600);
  --btn-primary-text: var(--primitive-pure-white);
  --btn-primary-hover-bg: var(--primitive-indigo-700);
}