/**
 * Global Design Tokens — Universal Multi-Client Framework
 * 
 * Strict Rules:
 * 1. Corner radius is managed via single master variable: --radius: 14px;
 * 2. Monochrome Black & White with WCAG AAA Contrast (19.5:1 light / 18.2:1 dark).
 * 3. Electric Blue is strictly restricted to buttons, link hover states, and active reading indicators.
 * 4. All typography uses CSS clamp() fluid scaling across all viewports.
 * 5. Dot matrix background is 100% pure CSS (0 bytes network load).
 */

:root {
  /* ==========================================================================
     1. MASTER CORNER RADIUS (Change here to cascade across all components)
     ========================================================================== */
  --radius: 14px;
  --radius-card: var(--radius);
  --radius-button: var(--radius);
  --radius-input: 8px; /* Clean, modern input radius - matches standard Shadcn UI */
  --radius-modal: var(--radius);
  --radius-media: calc(var(--radius) - 2px); /* 12px */
  --radius-badge: calc(var(--radius) - 4px); /* 10px */

  /* ==========================================================================
     2. LIGHT MODE — Monochrome Shadcn Palette (WCAG AAA Contrast)
     ========================================================================== */
  --background: #ffffff;
  --background-subtle: #fafafa;
  --background-muted: #f4f4f5;

  /* Text & Contrast: #09090b against #ffffff is 19.5:1 (Surpasses 7:1 AAA requirement) */
  --foreground: #09090b;
  /* Muted Text: #52525b against #ffffff is 7.2:1 (AAA pass) */
  --foreground-muted: #52525b;

  --card: #ffffff;
  --card-foreground: #09090b;

  --popover: #ffffff;
  --popover-foreground: #09090b;

  /* Subtle Shadcn 1px border */
  --border: #e4e4e7;
  --border-hover: rgba(9, 9, 11, 0.15);
  --input: #e4e4e7;
  --ring: #09090b;

  /* Modern Thin Scrollbar Tokens (Light Mode) */
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.4);
  --scrollbar-track: transparent;

  /* ==========================================================================
     3. BRAND ACCENT — Electric Blue (Strictly Restricted Usage)
     ========================================================================== */
  --brand-blue: #2563eb;       /* Blue-600 */
  --brand-blue-hover: #1d4ed8; /* Blue-700 */
  --brand-blue-foreground: #ffffff;
  --brand-blue-subtle: rgba(37, 99, 235, 0.08);

  /* ==========================================================================
     4. SHADOW ELEVATIONS (Subtle, neutral shadows - No colorful glows)
     ========================================================================== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);

  /* ==========================================================================
     5. FLUID TYPOGRAPHY SCALES — CSS clamp() (320px Mobile -> 4K Ultra-wide)
     ========================================================================== */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);     /* 12px -> 13px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);      /* 13px -> 14px */
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);        /* 16px -> 18px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);        /* 18px -> 20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);          /* 20px -> 24px (H3) */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.9vw, 1.875rem);        /* 24px -> 30px (H2) */
  --text-3xl: clamp(1.875rem, 1.65rem + 1.4vw, 2.375rem);      /* 30px -> 38px (Lead H2) */
  --text-4xl: clamp(2.25rem, 1.95rem + 2vw, 3.25rem);          /* 36px -> 52px (Article H1 / Hero H1) */

  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Geist Mono', Consolas, Monaco, monospace;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75; /* Optimal for long-form reading */

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;

  /* ==========================================================================
     6. FLUID RESPONSIVE SPACING — CSS clamp()
     ========================================================================== */
  --space-2xs: clamp(0.125rem, 0.1rem + 0.1vw, 0.25rem);
  --space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-sm: clamp(0.5rem, 0.45rem + 0.3vw, 0.75rem);
  --space-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --space-lg: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
  --space-xl: clamp(2rem, 1.75rem + 1.2vw, 3rem);
  --space-2xl: clamp(3rem, 2.5rem + 2vw, 4.5rem);

  /* Layout Widths */
  --content-max-width: 1240px;
  --prose-max-width: 70ch;
  --header-height: 64px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   7. DARK MODE — Pure Monochrome (OLED Zinc-950 + WCAG AAA Contrast)
   ========================================================================== */
[data-theme="dark"] {
  --background: #09090b;       /* Deep Zinc-950 */
  --background-subtle: #121215;
  --background-muted: #18181b;

  /* Text & Contrast: #fafafa against #09090b is 18.2:1 (AAA pass) */
  --foreground: #fafafa;
  /* Muted Text: #a1a1aa against #09090b is 7.1:1 (AAA pass) */
  --foreground-muted: #a1a1aa;

  --card: #121215;             /* Elevated dark surface */
  --card-foreground: #fafafa;

  --popover: #121215;
  --popover-foreground: #fafafa;

  --border: #27272a;          /* Shadcn Zinc-800 border */
  --border-hover: rgba(250, 250, 250, 0.15);
  --input: #27272a;
  --ring: #d4d4d8;

  /* Modern Thin Scrollbar Tokens (Dark Mode) */
  --scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.38);
  --scrollbar-track: transparent;

  /* Brand Blue in Dark Mode */
  --brand-blue: #3b82f6;       /* Blue-500 for enhanced readability against dark background */
  --brand-blue-hover: #2563eb;
  --brand-blue-foreground: #ffffff;
  --brand-blue-subtle: rgba(59, 130, 246, 0.12);

  /* Dark mode shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.5);
}

/* ==========================================================================
   8. PURE CSS DOT MATRIX BACKGROUND PATTERN (Zero Image Requests)
   ========================================================================== */
.bg-dot-grid {
  background-color: var(--background);
  background-image: radial-gradient(
    rgba(0, 0, 0, 0.07) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

[data-theme="dark"] .bg-dot-grid {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
}