/**
 * styles/tokens.css
 * Northshore Gen LLC — Design Tokens & Custom Properties
 * Dark Obsidian Studio Aesthetic with Luminous Emerald & Gold Signals
 */

:root {
  /* ==========================================================================
     1. Color System (Dark Studio Obsidian + Luminescent Accents)
     ========================================================================== */
  --bg-primary: #0a0b0e;                   /* Void obsidian canvas */
  --color-bg-primary: #0a0b0e;             /* Alias */
  --color-bg-secondary: #121318;           /* Carbon surface 0 */
  --color-bg-surface-elevated: #1a1c24;    /* Elevated card surface */
  --bg-card: rgba(18, 19, 24, 0.72);       /* Base glass card */
  --color-bg-card: rgba(18, 19, 24, 0.72); /* Glass card base */
  --color-bg-light: #f4f5f8;               /* Studio light surface */

  /* Text & Foreground */
  --text-primary: #ffffff;                 /* 100% white high contrast */
  --color-text-primary: #ffffff;           /* 100% white high contrast */
  --color-text-secondary: #8b949e;         /* Muted technical body */
  --color-text-tertiary: #586069;          /* Dim captions & indices */
  --color-text-dark: #0f1015;              /* Deep ink for light states */

  /* Luminous Accent Signals */
  --accent-emerald: #C2A476;               /* Primary brand luminescence */
  --color-accent-emerald: #C2A476;         /* Primary brand luminescence */
  --accent-cyan: #8A6B32;                  /* Secondary teal luminescence */
  --color-accent-cyan: #8A6B32;            /* Secondary teal luminescence */
  --accent-gold: #f5a623;                  /* Amber/gold particle accent */
  --color-accent-gold: #f5a623;            /* Amber/gold particle accent */
  --color-accent-glow: rgba(194, 164, 118, 0.25);
  --color-accent-cyan-glow: rgba(138, 107, 50, 0.30);
  --color-accent-gold-glow: rgba(245, 166, 35, 0.30);

  /* Status Colors */
  --color-status-active: #34d399;
  --color-status-warning: #fbbf24;
  --color-status-danger: #fb7185;

  /* ==========================================================================
     2. Glassmorphism & Translucency Tiers
     ========================================================================== */
  --glass-bg-low: rgba(255, 255, 255, 0.03);
  --glass-bg-medium: rgba(255, 255, 255, 0.06);
  --glass-bg-high: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.05);

  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-border-medium: rgba(255, 255, 255, 0.16);
  --glass-border-glow: rgba(194, 164, 118, 0.35);
  --glass-border-light: rgba(0, 0, 0, 0.12);
  --glass-border: rgba(255, 255, 255, 0.08);

  --glass-blur-sm: blur(8px);
  --glass-blur-md: blur(16px);
  --glass-blur-lg: blur(24px);
  --glass-blur: blur(16px);

  /* ==========================================================================
     3. Fluid Typography Scales (clamp & modular hierarchy)
     ========================================================================== */
  --font-display: 'Playfair Display', 'Moon Dance', serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono: 'Montserrat', monospace;

  --text-xs: clamp(0.70rem, 0.65rem + 0.20vw, 0.80rem);
  --text-sm: clamp(0.80rem, 0.75rem + 0.25vw, 0.90rem);
  --text-base: clamp(0.95rem, 0.88rem + 0.30vw, 1.05rem);
  --text-lg: clamp(1.10rem, 1.00rem + 0.40vw, 1.25rem);
  --text-xl: clamp(1.30rem, 1.15rem + 0.60vw, 1.55rem);
  --text-2xl: clamp(1.65rem, 1.40rem + 1.00vw, 2.10rem);
  --text-3xl: clamp(2.20rem, 1.80rem + 1.75vw, 3.20rem);
  --text-hero: clamp(2.80rem, 2.00rem + 3.50vw, 5.50rem);

  /* ==========================================================================
     4. Z-Index Hierarchy Layering
     ========================================================================== */
  --z-canvas: 1;
  --z-seam-backdrop: 2;
  --z-content: 10;
  --z-sticky-pin: 20;
  --z-header: 100;
  --z-modal-overlay: 500;

  /* ==========================================================================
     5. Layout & Spatial Tokens
     ========================================================================== */
  --header-height: 72px;
  --header-pad-x: clamp(1.5rem, 4vw, 3.5rem);
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --container-max-width: 1440px;

  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-xl: 28px;

  /* Easing Curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-snappy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}