/**
 * =============================================================================
 * AMON HEN DESIGN TOKENS
 * =============================================================================
 * 
 * Editorial/Analysis Blog Design System
 * A comprehensive collection of CSS custom properties for consistent styling
 * 
 * Table of Contents:
 * 1. Color Tokens
 *    1.1 Primitive Colors (raw color values)
 *    1.2 Semantic Colors (functional color roles)
 *    1.3 Component-specific Colors
 * 2. Typography Tokens
 *    2.1 Font Families
 *    2.2 Font Sizes
 *    2.3 Font Weights
 *    2.4 Line Heights
 *    2.5 Letter Spacing
 * 3. Spacing Tokens
 * 4. Sizing Tokens
 * 5. Border & Radius Tokens
 * 6. Shadow Tokens
 * 7. Transition Tokens
 * 8. Z-Index Tokens
 * 9. Breakpoint Reference (for documentation)
 * 
 * =============================================================================
 */

:root {
  /* =========================================================================
     1. COLOR TOKENS
     ========================================================================= */

  /* -------------------------------------------------------------------------
     1.1 PRIMITIVE COLORS - Raw color palette (Light Mode)
     These are the base colors from which semantic tokens are derived
     Using OKLCH for perceptually uniform color space
     ------------------------------------------------------------------------- */
  
  /* Cream/Paper Palette */
  --color-cream-50: oklch(0.99 0.005 85);   /* Lightest cream */
  --color-cream-100: oklch(0.98 0.008 85);  /* Very light cream */
  --color-cream-200: oklch(0.96 0.01 85);   /* Light cream (main background) */
  --color-cream-300: oklch(0.94 0.01 85);   /* Medium cream */
  --color-cream-400: oklch(0.92 0.008 80);  /* Warm gray-cream */
  --color-cream-500: oklch(0.90 0.01 80);   /* Muted cream */
  --color-cream-600: oklch(0.88 0.008 80);  /* Separator cream */
  --color-cream-700: oklch(0.85 0.01 80);   /* Border cream */
  
  /* Ink/Dark Palette */
  --color-ink-50: oklch(0.60 0.005 85);     /* Lightest ink */
  --color-ink-100: oklch(0.45 0.01 60);     /* Light ink (muted text) */
  --color-ink-200: oklch(0.35 0.01 60);     /* Medium ink */
  --color-ink-300: oklch(0.25 0.01 60);     /* Dark ink */
  --color-ink-400: oklch(0.18 0.01 60);     /* Very dark ink */
  --color-ink-500: oklch(0.15 0.01 60);     /* Darkest ink (main text) */
  
  /* Terracotta/Rust Accent */
  --color-terracotta-light: oklch(0.65 0.14 35);   /* Bright terracotta (dark mode) */
  --color-terracotta-base: oklch(0.55 0.12 35);    /* Standard terracotta */
  --color-terracotta-dark: oklch(0.45 0.10 35);    /* Deep terracotta */
  
  /* Slate Blue Accent */
  --color-slate-light: oklch(0.60 0.10 250);       /* Bright slate (dark mode) */
  --color-slate-base: oklch(0.45 0.08 250);        /* Standard slate blue */
  --color-slate-dark: oklch(0.35 0.06 250);        /* Deep slate */
  
  /* Chart/Data Visualization Colors */
  --color-chart-teal: oklch(0.50 0.10 160);
  --color-chart-gold: oklch(0.60 0.08 80);
  --color-chart-plum: oklch(0.40 0.06 300);
  
  /* Utility Colors */
  --color-white: oklch(0.98 0 0);
  --color-black: oklch(0.10 0.005 280);
  --color-destructive: oklch(0.55 0.2 25);
  --color-destructive-light: oklch(0.60 0.2 25);

  /* -------------------------------------------------------------------------
     1.2 SEMANTIC COLORS - Functional color assignments (Light Mode)
     These define how colors are used throughout the interface
     ------------------------------------------------------------------------- */
  
  /* -- Backgrounds -- */
  --color-background: var(--color-cream-200);           /* Page background */
  --color-background-elevated: var(--color-cream-100);  /* Cards, elevated surfaces */
  --color-background-subtle: var(--color-cream-400);    /* Subtle backgrounds */
  --color-background-muted: var(--color-cream-500);     /* Muted/disabled backgrounds */
  
  /* -- Foregrounds/Text -- */
  --color-foreground: var(--color-ink-500);             /* Primary text */
  --color-foreground-secondary: var(--color-ink-200);   /* Secondary text */
  --color-foreground-muted: var(--color-ink-100);       /* Muted/helper text */
  --color-foreground-inverted: var(--color-cream-200);  /* Text on dark backgrounds */
  
  /* -- Interactive/Accent -- */
  --color-primary: var(--color-ink-400);                /* Primary actions */
  --color-primary-foreground: var(--color-cream-200);   /* Text on primary */
  --color-accent: var(--color-terracotta-base);         /* Accent elements */
  --color-accent-foreground: var(--color-cream-50);     /* Text on accent */
  --color-accent-secondary: var(--color-slate-base);    /* Secondary accent */
  --color-accent-secondary-foreground: var(--color-cream-50);
  
  /* -- Borders & Dividers -- */
  --color-border: var(--color-cream-700);               /* Standard borders */
  --color-border-subtle: var(--color-cream-500);        /* Subtle borders */
  --color-separator: var(--color-cream-600);            /* Content separators */
  
  /* -- Focus & Ring -- */
  --color-ring: var(--color-terracotta-base);           /* Focus ring color */
  --color-ring-offset: var(--color-cream-200);          /* Ring offset background */

  /* -------------------------------------------------------------------------
     1.3 COMPONENT-SPECIFIC COLORS (Light Mode)
     Colors assigned to specific UI components
     ------------------------------------------------------------------------- */
  
  /* -- Article Components -- */
  --color-article-number: var(--color-terracotta-base);
  --color-article-title: var(--color-ink-500);
  --color-article-title-hover: var(--color-terracotta-base);
  
  /* -- Tag/Badge Components -- */
  --color-tag-background: var(--color-cream-400);
  --color-tag-text: var(--color-ink-200);
  --color-tag-border: var(--color-cream-700);
  
  /* -- Navigation -- */
  --color-nav-background: var(--color-cream-200);
  --color-nav-text: var(--color-ink-100);
  --color-nav-text-active: var(--color-ink-500);
  --color-nav-text-hover: var(--color-ink-500);
  
  /* -- Sidebar/Cables -- */
  --color-sidebar-header: var(--color-slate-base);
  --color-sidebar-category: var(--color-slate-base);
  --color-sidebar-title: var(--color-ink-500);
  --color-sidebar-date: var(--color-ink-100);
  
  /* -- Footer -- */
  --color-footer-background: var(--color-cream-200);
  --color-footer-text: var(--color-ink-100);
  --color-footer-heading: var(--color-ink-400);

  /* =========================================================================
     2. TYPOGRAPHY TOKENS
     ========================================================================= */

  /* -------------------------------------------------------------------------
     2.1 FONT FAMILIES
     ------------------------------------------------------------------------- */
  --font-family-serif: 'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif;
  --font-family-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'JetBrains Mono Fallback', 'Fira Code', Consolas, 'Courier New', monospace;
  
  /* Semantic font assignments */
  --font-heading: var(--font-family-serif);
  --font-body: var(--font-family-sans);
  --font-ui: var(--font-family-sans);
  --font-code: var(--font-family-mono);

  /* -------------------------------------------------------------------------
     2.2 FONT SIZES
     Based on a modular scale (1.25 ratio) for harmonious sizing
     ------------------------------------------------------------------------- */
  --font-size-2xs: 0.625rem;    /* 10px - Tiny labels */
  --font-size-xs: 0.75rem;      /* 12px - Small labels, metadata */
  --font-size-sm: 0.875rem;     /* 14px - Secondary text, navigation */
  --font-size-base: 1rem;       /* 16px - Body text */
  --font-size-lg: 1.125rem;     /* 18px - Large body, lead paragraphs */
  --font-size-xl: 1.25rem;      /* 20px - H6, small headings */
  --font-size-2xl: 1.5rem;      /* 24px - H5 */
  --font-size-3xl: 1.875rem;    /* 30px - H4 */
  --font-size-4xl: 2.25rem;     /* 36px - H3 */
  --font-size-5xl: 3rem;        /* 48px - H2 */
  --font-size-6xl: 3.75rem;     /* 60px - H1 */
  --font-size-7xl: 4.5rem;      /* 72px - Display */

  /* -------------------------------------------------------------------------
     2.3 FONT WEIGHTS
     ------------------------------------------------------------------------- */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* -------------------------------------------------------------------------
     2.4 LINE HEIGHTS
     ------------------------------------------------------------------------- */
  --line-height-none: 1;
  --line-height-tight: 1.15;       /* Headings */
  --line-height-snug: 1.3;         /* Subheadings */
  --line-height-normal: 1.5;       /* UI text */
  --line-height-relaxed: 1.625;    /* Body text */
  --line-height-loose: 2;          /* Long-form reading */
  
  /* Article-specific line heights */
  --line-height-article-body: 1.8; /* Optimized for long-form reading */

  /* -------------------------------------------------------------------------
     2.5 LETTER SPACING (Tracking)
     ------------------------------------------------------------------------- */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;  /* Headlines */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;    /* All-caps labels */
  --letter-spacing-editorial: 0.15em;  /* Refined category labels */
  --letter-spacing-display: 0.2em;     /* Article numbers, archival feel */
  --letter-spacing-header: 0.25em;     /* Section headers like CABLES */

  /* =========================================================================
     3. SPACING TOKENS
     ========================================================================= */
  
  /* Base spacing unit: 4px */
  --spacing-px: 1px;
  --spacing-0: 0;
  --spacing-0-5: 0.125rem;   /* 2px */
  --spacing-1: 0.25rem;      /* 4px */
  --spacing-1-5: 0.375rem;   /* 6px */
  --spacing-2: 0.5rem;       /* 8px */
  --spacing-2-5: 0.625rem;   /* 10px */
  --spacing-3: 0.75rem;      /* 12px */
  --spacing-3-5: 0.875rem;   /* 14px */
  --spacing-4: 1rem;         /* 16px */
  --spacing-5: 1.25rem;      /* 20px */
  --spacing-6: 1.5rem;       /* 24px */
  --spacing-7: 1.75rem;      /* 28px */
  --spacing-8: 2rem;         /* 32px */
  --spacing-9: 2.25rem;      /* 36px */
  --spacing-10: 2.5rem;      /* 40px */
  --spacing-11: 2.75rem;     /* 44px */
  --spacing-12: 3rem;        /* 48px */
  --spacing-14: 3.5rem;      /* 56px */
  --spacing-16: 4rem;        /* 64px */
  --spacing-20: 5rem;        /* 80px */
  --spacing-24: 6rem;        /* 96px */
  --spacing-28: 7rem;        /* 112px */
  --spacing-32: 8rem;        /* 128px */
  
  /* Semantic spacing */
  --spacing-component-xs: var(--spacing-1);
  --spacing-component-sm: var(--spacing-2);
  --spacing-component-md: var(--spacing-4);
  --spacing-component-lg: var(--spacing-6);
  --spacing-component-xl: var(--spacing-8);
  
  --spacing-section-sm: var(--spacing-8);
  --spacing-section-md: var(--spacing-12);
  --spacing-section-lg: var(--spacing-16);
  --spacing-section-xl: var(--spacing-24);

  /* =========================================================================
     4. SIZING TOKENS
     ========================================================================= */
  
  /* Width constraints */
  --size-content-sm: 640px;      /* Small content width */
  --size-content-md: 768px;      /* Medium content width */
  --size-content-lg: 1024px;     /* Large content width */
  --size-content-xl: 1280px;     /* Extra large (max-w-7xl) */
  --size-content-2xl: 1536px;    /* 2XL content width */
  
  /* Prose/Reading width */
  --size-prose: 65ch;            /* Optimal reading width */
  --size-prose-sm: 45ch;
  --size-prose-lg: 80ch;
  
  /* Component sizes */
  --size-icon-xs: 0.75rem;       /* 12px */
  --size-icon-sm: 1rem;          /* 16px */
  --size-icon-md: 1.25rem;       /* 20px */
  --size-icon-lg: 1.5rem;        /* 24px */
  --size-icon-xl: 2rem;          /* 32px */
  
  /* Layout proportions */
  --size-sidebar-width: 30%;
  --size-main-content-width: 70%;
  --size-nav-height: 4rem;       /* 64px */
  
  /* Avatar/Badge sizes */
  --size-avatar-sm: 2rem;        /* 32px */
  --size-avatar-md: 2.5rem;      /* 40px */
  --size-avatar-lg: 3rem;        /* 48px */

  /* =========================================================================
     5. BORDER & RADIUS TOKENS
     ========================================================================= */
  
  /* Border widths */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  
  /* Border radii */
  --radius-none: 0;
  --radius-sm: 0.125rem;         /* 2px - Subtle rounding */
  --radius-base: 0.25rem;        /* 4px - Default (matches --radius) */
  --radius-md: 0.375rem;         /* 6px */
  --radius-lg: 0.5rem;           /* 8px */
  --radius-xl: 0.75rem;          /* 12px */
  --radius-2xl: 1rem;            /* 16px */
  --radius-3xl: 1.5rem;          /* 24px */
  --radius-full: 9999px;         /* Pill/circle */
  
  /* Semantic radii */
  --radius-button: var(--radius-base);
  --radius-card: var(--radius-lg);
  --radius-tag: var(--radius-base);
  --radius-input: var(--radius-base);

  /* =========================================================================
     6. SHADOW TOKENS
     ========================================================================= */
  
  --shadow-none: none;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  
  /* Editorial-specific shadows (subtle, warm-tinted) */
  --shadow-editorial: 0 4px 12px -2px oklch(0.15 0.01 60 / 0.08);
  --shadow-card-hover: 0 8px 24px -4px oklch(0.15 0.01 60 / 0.12);

  /* =========================================================================
     7. TRANSITION TOKENS
     ========================================================================= */
  
  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  
  /* Timing functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Composite transitions */
  --transition-colors: color var(--duration-normal) var(--ease-in-out), 
                       background-color var(--duration-normal) var(--ease-in-out), 
                       border-color var(--duration-normal) var(--ease-in-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);
  --transition-theme: background-color var(--duration-slow) var(--ease-in-out), 
                      color var(--duration-slow) var(--ease-in-out);

  /* =========================================================================
     8. Z-INDEX TOKENS
     ========================================================================= */
  
  --z-behind: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-notification: 80;
  --z-max: 9999;
  
  /* Component-specific z-indexes */
  --z-nav: var(--z-sticky);
  --z-sidebar: var(--z-fixed);
  --z-mobile-menu: var(--z-modal);
}

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

[data-theme="dark"] {
  /* Primitive Colors - Dark Mode */
  --color-dark-50: oklch(0.22 0.005 280);
  --color-dark-100: oklch(0.20 0.005 280);
  --color-dark-200: oklch(0.18 0.005 280);
  --color-dark-300: oklch(0.15 0.005 280);
  --color-dark-400: oklch(0.13 0.005 280);
  --color-dark-500: oklch(0.12 0.008 280);   /* Main background (softened charcoal) */

  --color-light-50: oklch(0.94 0.008 75);    /* Main text (warm off-white) */
  --color-light-100: oklch(0.85 0.005 85);
  --color-light-200: oklch(0.75 0.005 85);
  --color-light-300: oklch(0.60 0.005 85);
  
  /* Semantic Color Overrides */
  --color-background: var(--color-dark-500);
  --color-background-elevated: var(--color-dark-400);
  --color-background-subtle: var(--color-dark-200);
  --color-background-muted: var(--color-dark-100);
  
  --color-foreground: var(--color-light-50);
  --color-foreground-secondary: var(--color-light-100);
  --color-foreground-muted: var(--color-light-300);
  --color-foreground-inverted: var(--color-dark-500);
  
  --color-primary: var(--color-light-50);
  --color-primary-foreground: var(--color-dark-500);
  --color-accent: var(--color-terracotta-light);
  --color-accent-secondary: var(--color-slate-light);
  
  --color-border: var(--color-dark-50);
  --color-border-subtle: var(--color-dark-200);
  --color-separator: var(--color-dark-50);
  
  --color-ring: var(--color-terracotta-light);
  --color-ring-offset: var(--color-dark-500);
  
  /* Component-specific Dark Mode */
  --color-article-number: var(--color-terracotta-light);
  --color-article-title: var(--color-light-50);
  --color-article-title-hover: var(--color-terracotta-light);
  
  --color-tag-background: var(--color-dark-100);
  --color-tag-text: var(--color-light-200);
  --color-tag-border: var(--color-dark-50);
  
  --color-nav-background: var(--color-dark-500);
  --color-nav-text: var(--color-light-300);
  --color-nav-text-active: var(--color-light-50);
  
  --color-sidebar-header: var(--color-slate-light);
  --color-sidebar-category: var(--color-slate-light);
  --color-sidebar-title: var(--color-light-50);
  --color-sidebar-date: var(--color-light-300);
  
  --color-footer-background: var(--color-dark-500);
  --color-footer-text: var(--color-light-300);
  --color-footer-heading: var(--color-light-50);
  
  /* Dark mode shadows (less visible) */
  --shadow-editorial: 0 4px 12px -2px oklch(0 0 0 / 0.3);
  --shadow-card-hover: 0 8px 24px -4px oklch(0 0 0 / 0.4);
}

/* =============================================================================
   9. BREAKPOINT REFERENCE (Documentation Only)
   These cannot be CSS variables but are documented here for reference
   ============================================================================= */

/*
  Breakpoints (Tailwind defaults):
  --breakpoint-sm: 640px    // Small devices (landscape phones)
  --breakpoint-md: 768px    // Medium devices (tablets)
  --breakpoint-lg: 1024px   // Large devices (desktops)
  --breakpoint-xl: 1280px   // Extra large devices (large desktops)
  --breakpoint-2xl: 1536px  // 2X large devices (larger desktops)
  
  Usage in CSS:
  @media (min-width: 640px) { }   // sm and up
  @media (min-width: 768px) { }   // md and up
  @media (min-width: 1024px) { }  // lg and up
  @media (min-width: 1280px) { }  // xl and up
  @media (min-width: 1536px) { }  // 2xl and up
*/

/* =============================================================================
   UTILITY CLASSES USING TOKENS
   ============================================================================= */

/* Example usage classes - these show how to apply tokens */
.text-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
}

.text-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.text-article-body {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-article-body);
  max-width: var(--size-prose);
}

.transition-editorial {
  transition: var(--transition-colors);
}