/**
 * Design System Tokens - Single Source of Truth
 *
 * IMPORTANT: This file is synced from egregore_frontend/src/styles/tokens.css
 * Do NOT edit directly. Edit the frontend source and copy here.
 *
 * TODO: Automate this sync in build process
 *
 * This file defines all design tokens for the Egregore application.
 * All color values should come from CSS variables defined here.
 *
 * Structure:
 * 1. Primitive layer - Raw color scales (amber, stone, red, green)
 * 2. Semantic layer - Role-based aliases (background, primary, etc.)
 * 3. Typography scale - Font sizes, weights, line heights
 * 4. Spacing scale - Border radius values
 *
 * Theme: Vintage Paper (warm browns, papyrus aesthetic)
 * Color format: oklch for wide gamut support (93%+ browser support)
 */

:root {
  /* ==========================================================================
     PRIMITIVE LAYER - Raw Color Scales
     ========================================================================== */

  /* Amber scale (primary brand color) */
  --amber-50: oklch(0.9914 0.0098 87.4695);
  --amber-100: oklch(0.9618 0.0208 88.7194);
  --amber-200: oklch(0.9280 0.0263 82.3839);
  --amber-300: oklch(0.8921 0.0415 85.2842);
  --amber-400: oklch(0.8479 0.0584 89.6517);
  --amber-500: oklch(0.7369 0.0805 66.0333);
  --amber-600: oklch(0.6898 0.0865 64.3894);
  --amber-700: oklch(0.6351 0.1052 63.8590);
  --amber-800: oklch(0.5751 0.0845 67.8075);
  --amber-900: oklch(0.4983 0.0757 70.8312);
  --amber-950: oklch(0.4366 0.0420 64.9722);

  /* Stone scale (neutrals with warm undertone) */
  --stone-50: oklch(0.9914 0.0098 87.4695);
  --stone-100: oklch(0.9618 0.0208 88.7194);
  --stone-200: oklch(0.9280 0.0263 82.3839);
  --stone-300: oklch(0.8688 0.0450 83.8927);
  --stone-400: oklch(0.8032 0.0335 80.9608);
  --stone-500: oklch(0.5479 0.0538 71.4207);
  --stone-600: oklch(0.4366 0.0420 64.9722);
  --stone-700: oklch(0.3795 0.0309 64.7091);
  --stone-800: oklch(0.3263 0.0221 61.2098);
  --stone-900: oklch(0.2956 0.0170 63.2887);
  --stone-950: oklch(0.2765 0.0184 59.7941);

  /* Red scale (destructive/error states) */
  --red-50: oklch(0.9500 0.0300 25.0000);
  --red-100: oklch(0.9000 0.0500 27.0000);
  --red-200: oklch(0.8500 0.0800 29.0000);
  --red-300: oklch(0.7800 0.1200 31.0000);
  --red-400: oklch(0.7000 0.1600 32.0000);
  --red-500: oklch(0.5679 0.1914 32.9934);
  --red-600: oklch(0.5000 0.1800 30.0000);
  --red-700: oklch(0.4500 0.1600 28.0000);
  --red-800: oklch(0.4000 0.1400 26.0000);
  --red-900: oklch(0.3500 0.1200 24.0000);
  --red-950: oklch(0.3000 0.1000 22.0000);

  /* Green scale (success states) */
  --green-50: oklch(0.9500 0.0400 145.0000);
  --green-100: oklch(0.9000 0.0600 148.0000);
  --green-200: oklch(0.8500 0.0900 150.0000);
  --green-300: oklch(0.7800 0.1200 152.0000);
  --green-400: oklch(0.7000 0.1400 154.0000);
  --green-500: oklch(0.6000 0.1500 155.0000);
  --green-600: oklch(0.5200 0.1400 153.0000);
  --green-700: oklch(0.4600 0.1200 150.0000);
  --green-800: oklch(0.4000 0.1000 148.0000);
  --green-900: oklch(0.3500 0.0800 145.0000);
  --green-950: oklch(0.3000 0.0600 142.0000);

  /* ==========================================================================
     SEMANTIC LAYER - Role-based Aliases (Light Mode)
     ========================================================================== */

  /* Page level */
  --background: var(--amber-100);
  --foreground: var(--stone-700);

  /* Card surfaces */
  --card: var(--amber-50);
  --card-foreground: var(--stone-700);

  /* Popover surfaces */
  --popover: var(--amber-50);
  --popover-foreground: var(--stone-700);

  /* Primary actions */
  --primary: var(--amber-700);
  --primary-foreground: oklch(1.0000 0 0);

  /* Secondary actions */
  --secondary: var(--amber-300);
  --secondary-foreground: var(--amber-950);

  /* Subdued content */
  --muted: var(--amber-200);
  --muted-foreground: var(--stone-500);

  /* Highlights */
  --accent: var(--amber-400);
  --accent-foreground: var(--stone-700);

  /* Danger/destructive actions */
  --destructive: var(--red-500);
  --destructive-foreground: oklch(1.0000 0 0);

  /* Success states */
  --success: var(--green-600);
  --success-foreground: oklch(1.0000 0 0);

  /* Interactive elements */
  --border: var(--stone-300);
  --input: var(--stone-300);
  --ring: var(--amber-700);

  /* Chart colors */
  --chart-1: var(--amber-700);
  --chart-2: var(--amber-800);
  --chart-3: var(--amber-900);
  --chart-4: var(--amber-600);
  --chart-5: var(--amber-500);

  /* Sidebar */
  --sidebar: var(--amber-200);
  --sidebar-foreground: var(--stone-700);
  --sidebar-primary: var(--amber-700);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: var(--amber-400);
  --sidebar-accent-foreground: var(--stone-700);
  --sidebar-border: var(--stone-300);
  --sidebar-ring: var(--amber-700);

  /* ==========================================================================
     TYPOGRAPHY SCALE
     ========================================================================== */

  /* Font families */
  --font-sans: 'Libre Baskerville', serif;
  --font-serif: 'Lora', serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Font sizes */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */

  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==========================================================================
     SPACING & LAYOUT
     ========================================================================== */

  /* Border radius */
  --radius: 0.25rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;

  /* Base spacing unit */
  --spacing: 0.25rem;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --shadow-color: hsl(26.6667 17.6471% 20%);
  --shadow-2xs: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.06);
  --shadow-xs: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.06);
  --shadow-sm: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.12), 2px 1px 2px -1px hsl(26.6667 17.6471% 20% / 0.12);
  --shadow: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.12), 2px 1px 2px -1px hsl(26.6667 17.6471% 20% / 0.12);
  --shadow-md: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.12), 2px 2px 4px -1px hsl(26.6667 17.6471% 20% / 0.12);
  --shadow-lg: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.12), 2px 4px 6px -1px hsl(26.6667 17.6471% 20% / 0.12);
  --shadow-xl: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.12), 2px 8px 10px -1px hsl(26.6667 17.6471% 20% / 0.12);
  --shadow-2xl: 2px 3px 5px 0px hsl(26.6667 17.6471% 20% / 0.30);
}

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

.dark {
  /* Page level */
  --background: var(--stone-950);
  --foreground: var(--amber-200);

  /* Card surfaces */
  --card: var(--stone-800);
  --card-foreground: var(--amber-200);

  /* Popover surfaces */
  --popover: var(--stone-800);
  --popover-foreground: var(--amber-200);

  /* Primary actions */
  --primary: var(--amber-500);
  --primary-foreground: var(--stone-950);

  /* Secondary actions */
  --secondary: oklch(0.3796 0.0246 54.5408);
  --secondary-foreground: var(--amber-200);

  /* Subdued content */
  --muted: var(--stone-900);
  --muted-foreground: var(--stone-400);

  /* Highlights */
  --accent: oklch(0.4208 0.0385 55.7197);
  --accent-foreground: var(--amber-200);

  /* Danger/destructive actions */
  --destructive: var(--red-500);
  --destructive-foreground: oklch(1.0000 0 0);

  /* Success states */
  --success: var(--green-500);
  --success-foreground: oklch(1.0000 0 0);

  /* Interactive elements */
  --border: oklch(0.3796 0.0246 54.5408);
  --input: oklch(0.3796 0.0246 54.5408);
  --ring: var(--amber-500);

  /* Chart colors */
  --chart-1: var(--amber-500);
  --chart-2: var(--amber-600);
  --chart-3: var(--amber-700);
  --chart-4: var(--amber-800);
  --chart-5: var(--amber-900);

  /* Sidebar */
  --sidebar: var(--stone-950);
  --sidebar-foreground: var(--amber-200);
  --sidebar-primary: var(--amber-500);
  --sidebar-primary-foreground: var(--stone-950);
  --sidebar-accent: oklch(0.4208 0.0385 55.7197);
  --sidebar-accent-foreground: var(--amber-200);
  --sidebar-border: oklch(0.3796 0.0246 54.5408);
  --sidebar-ring: var(--amber-500);
}