/**
 * KALPA Design Tokens
 * Precise, architectural design system supporting both Warm Dark and Warm Editorial Light themes.
 * Scaled with ~10-15% reduced proportions for superior viewport density and content scannability.
 */

:root,
[data-theme="dark"] {
  /* Dark Theme (Pure Obsidian & Radiant Liquid Chrome) */
  --bg-primary: #060709;
  --bg-secondary: #0D0F13;
  --bg-surface: #13161C;
  --bg-surface-hover: #1A1E26;
  --bg-card: #101318;
  
  /* Borders - High-Precision Platinum */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(255, 255, 255, 0.32);
  --border-focus: rgba(255, 255, 255, 0.7);
  
  /* Typography Colors - Crisp Pure White */
  --text-primary: #FFFFFF;   /* Pure crisp white */
  --text-secondary: #A3AAB8; /* Sleek cool silver-grey */
  --text-muted: #646C7B;     /* Subdued slate-grey */
  --text-inverse: #060709;   /* Obsidian black */

  /* Navigation Specifics */
  --nav-bg: rgba(9, 11, 15, 0.82);
  --nav-bg-scrolled: rgba(9, 11, 15, 0.96);
  --nav-border: rgba(255, 255, 255, 0.12);
  --nav-border-scrolled: rgba(255, 255, 255, 0.2);

  /* Subtle Cool Silver Ambient Glows */
  --warm-glow: rgba(255, 255, 255, 0.06);
  --accent-line: rgba(255, 255, 255, 0.15);
  --accent-line-subtle: rgba(255, 255, 255, 0.05);
  --accent-cross: #687080;

  /* Mockup Surfaces */
  --mockup-browser-bar: #0A0C10;
  --mockup-canvas: #0D0F14;
  --mockup-ui-bg: #12151B;
  --mockup-item-bg: #181B22;
  --mockup-border: #242933;
  --mockup-accent: rgba(255, 255, 255, 0.35);

  /* Dialog & Overlays */
  --dialog-bg: #11141A;
  --dialog-backdrop: rgba(2, 3, 5, 0.82);

  /* Metallic Accents & Liquid Chrome Sheen */
  --metallic-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(180, 195, 215, 0.06) 50%, rgba(255, 255, 255, 0.18) 100%);
  --metallic-border: rgba(255, 255, 255, 0.2);
  --metallic-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.7);
  --metallic-pill-bg: linear-gradient(180deg, #252A34 0%, #11141A 100%);
  --metallic-pill-border: rgba(255, 255, 255, 0.22);

  /* Construction Visual */
  --grid-line-color: rgba(255, 255, 255, 0.035);
  --scaffold-bg: linear-gradient(135deg, rgba(22, 26, 34, 0.6) 0%, rgba(8, 10, 13, 0.4) 100%);
  --scaffold-border: rgba(255, 255, 255, 0.1);
  --scaffold-box-bg: rgba(16, 19, 25, 0.8);
}

[data-theme="light"] {
  /* Bright Pure White, Frosty Platinum & Liquid Chrome Theme */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F6F8FA;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F0F3F7;
  --bg-card: #FFFFFF;
  
  /* Metallic Borders & Chamfers - Sleek Silver Chrome */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.11);
  --border-hover: rgba(0, 0, 0, 0.26);
  --border-focus: #0A0D12;
  
  /* Typography Colors - Crisp High-Contrast Slate & Obsidian */
  --text-primary: #0A0D12;   /* Deep carbon black */
  --text-secondary: #47505E; /* Slate grey */
  --text-muted: #7E8794;     /* Cool platinum grey */
  --text-inverse: #FFFFFF;   /* Pure white */

  /* Navigation Specifics - Frosted Silver Capsule */
  --nav-bg: rgba(255, 255, 255, 0.86);
  --nav-bg-scrolled: rgba(255, 255, 255, 0.97);
  --nav-border: rgba(0, 0, 0, 0.08);
  --nav-border-scrolled: rgba(0, 0, 0, 0.14);

  /* Bright Ambient Glows & Specular Highlights */
  --warm-glow: rgba(220, 230, 245, 0.45);
  --accent-line: rgba(0, 0, 0, 0.1);
  --accent-line-subtle: rgba(0, 0, 0, 0.04);
  --accent-cross: #9AA3AF;

  /* Polished Liquid Metal Textures & Surface Bevels */
  --metallic-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(226, 233, 242, 0.55) 45%, rgba(255, 255, 255, 1) 100%);
  --metallic-border: rgba(0, 0, 0, 0.12);
  --metallic-bevel: inset 0 1px 1px #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 4px 22px -2px rgba(0, 20, 50, 0.06);
  --metallic-pill-bg: linear-gradient(180deg, #FFFFFF 0%, #EEF2F6 100%);
  --metallic-pill-border: rgba(0, 0, 0, 0.14);

  /* Mockup Surfaces - Clean White & Silver Tech */
  --mockup-browser-bar: #F0F3F7;
  --mockup-canvas: #F5F7FA;
  --mockup-ui-bg: #FAFBFC;
  --mockup-item-bg: #FFFFFF;
  --mockup-border: #E1E6ED;
  --mockup-accent: rgba(10, 13, 18, 0.35);

  /* Dialog & Overlays */
  --dialog-bg: #FFFFFF;
  --dialog-backdrop: rgba(10, 14, 20, 0.45);

  /* Construction Visual */
  --grid-line-color: rgba(0, 0, 0, 0.035);
  --scaffold-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 250, 0.75) 100%);
  --scaffold-border: rgba(0, 0, 0, 0.1);
  --scaffold-box-bg: #FFFFFF;
}

:root {
  /* Typography Families (Space Grotesk: Headings/Display | Manrope: Body/UI Text) */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing Grid (Refined ~10-15% for better density) */
  --space-2xs: 4px;
  --space-xs: 7px;
  --space-sm: 11px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 40px;
  --space-3xl: 54px;
  --space-4xl: 78px;
  --space-5xl: 108px;

  /* Layout Widths */
  --container-max: 1240px;
  --container-narrow: 980px;
  --container-pad: clamp(1.25rem, 4.5vw, 3rem);

  /* Precise Corner Radii */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 9999px;

  /* Smooth Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 260ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-theme: 300ms ease;

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-base: 1;
  --z-construction: 2;
  --z-content: 10;
  --z-nav: 100;
  --z-modal: 1000;
}