/* ============================================================
   ZVONK DESIGN SYSTEM — Colors & Typography Tokens
   Single source of truth. Import this in any Zvonk HTML file.
   ============================================================ */

/* Outfit — self-hosted variable font (exact brand file) */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter + JetBrains Mono — CDN fallbacks */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* ── FONTS ─────────────────────────────────────────────── */
  --font-brand:   'Outfit', 'Inter', -apple-system, sans-serif;
  --font-ui:      'Outfit', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

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

  /* ── TYPE SCALE (Perfect Fourth × 1.25) ────────────────── */
  --text-xs:   12px;   /* captions, version strings */
  --text-sm:   14px;   /* body, labels, secondary */
  --text-base: 16px;   /* standard body */
  --text-lg:   20px;   /* subheading */
  --text-xl:   24px;   /* h2 */
  --text-2xl:  32px;   /* h1 */
  --text-3xl:  40px;   /* hero display */

  /* ── LINE HEIGHTS ───────────────────────────────────────── */
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ── LETTER SPACING ─────────────────────────────────────── */
  --ls-tight:  -0.04em;  /* large brand headings */
  --ls-snug:   -0.02em;  /* h1, h2 */
  --ls-normal:  0;
  --ls-wide:    0.05em;  /* body labels */
  --ls-wider:   0.08em;  /* uppercase control labels */
  --ls-widest:  0.1em;   /* ALL CAPS status badges */


  /* ── NAVY PALETTE (9-step, dark-first surfaces) ─────────── */
  --navy-deepest: #060e20;   /* surface_container_lowest — deepest pit */
  --navy-900:     #0b1326;   /* surface — primary page bg */
  --navy-800:     #131b2e;   /* surface_container_low */
  --navy-700:     #171f33;   /* surface_container */
  --navy-600:     #222a3d;   /* surface_container_high */
  --navy-500:     #2d3449;   /* surface_container_highest */
  --navy-400:     #31394d;
  --navy-300:     #3c4947;
  --navy-200:     #859490;
  --navy-100:     #bbcac6;
  --navy-50:      #dae2fd;   /* lightest; text on dark */

  /* ── TEAL (Intelligence accent) ─────────────────────────── */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;   /* PRIMARY teal — active states, AI indicator */
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-neon: #71f8e4;  /* max brightness for glow overlays */

  /* ── GOLD (User-action trigger) ──────────────────────────── */
  --gold-100: #fef9c3;
  --gold-200: #fef08a;
  --gold-300: #fcd34d;
  --gold-400: #fbbf24;   /* PRIMARY gold — CTA buttons, FAB, save */
  --gold-500: #f59e0b;
  --gold-600: #d97706;
  --gold-700: #b45309;

  /* ── GRAYS (neutral scale) ───────────────────────────────── */
  --gray-0:   #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ── SEMANTIC COLORS ─────────────────────────────────────── */
  --color-success:        #10b981;
  --color-success-light:  #86efac;
  --color-success-bg:     rgba(16, 185, 129, 0.1);
  --color-danger:         #ef4444;
  --color-danger-light:   #fca5a5;
  --color-danger-bg:      rgba(239, 68, 68, 0.1);
  --color-warning:        #fbbf24;
  --color-warning-bg:     rgba(245, 158, 11, 0.1);
  --color-info:           #3b82f6;
  --color-info-bg:        rgba(59, 130, 246, 0.1);

  /* ── AI-SPECIFIC SEMANTIC COLORS ────────────────────────── */
  --color-ai-thinking:    #d97706;  /* gold pulse during generation */
  --color-ai-complete:    #10b981;  /* green on completion */
  --color-user-action:    #fbbf24;  /* gold for user-initiated triggers */

  /* ── DARK-MODE SURFACE TOKENS ────────────────────────────── */
  --surface-page:      var(--navy-900);    /* #0b1326 — base page */
  --surface-sidebar:   var(--navy-deepest);
  --surface-card:      rgba(255,255,255,0.06);
  --surface-card-hover:rgba(255,255,255,0.10);
  --surface-active:    rgba(255,255,255,0.08);
  --surface-elevated:  var(--navy-800);

  /* ── TEXT TOKENS ─────────────────────────────────────────── */
  --text-primary:   #f7f8f8;         /* off-white, not pure white */
  --text-secondary: #8a8f98;
  --text-tertiary:  #62666d;
  --text-muted:     #3d4047;
  --text-on-gold:   var(--navy-900); /* dark text on gold buttons */
  --text-teal:      var(--teal-400);

  /* ── BORDER TOKENS ───────────────────────────────────────── */
  --border-subtle:    rgba(255,255,255,0.04);
  --border-default:   rgba(255,255,255,0.08);
  --border-strong:    rgba(255,255,255,0.12);
  --border-teal:      rgba(20,184,166,0.2);
  --border-gold:      rgba(251,191,36,0.3);

  /* ── GLASSMORPHISM ───────────────────────────────────────── */
  --glass-bg:          rgba(255,255,255,0.06);
  --glass-bg-heavy:    rgba(15,23,42,0.75);
  --glass-bg-hover:    rgba(255,255,255,0.10);
  --glass-border:      rgba(255,255,255,0.08);
  --glass-border-teal: rgba(20,184,166,0.2);
  --glass-blur:        blur(12px);
  --glass-blur-heavy:  blur(20px);

  /* ── GLOW EFFECTS ────────────────────────────────────────── */
  --glow-teal:         0 0 20px rgba(20,184,166,0.2);
  --glow-teal-vibrant: 0 0 40px rgba(20,184,166,0.4);
  --glow-gold:         0 0 20px rgba(251,191,36,0.3);
  --glow-teal-strong:  0 0 30px rgba(13,148,136,0.5);
  --inner-glow:        inset 0 0 20px rgba(255,255,255,0.02);

  /* ── SHADOWS (navy-tinted elevation) ─────────────────────── */
  --shadow-sm:     0 1px 2px 0 rgba(15,23,42,0.08);
  --shadow-md:     0 4px 6px -1px rgba(15,23,42,0.12), 0 2px 4px -1px rgba(15,23,42,0.08);
  --shadow-lg:     0 10px 15px -3px rgba(15,23,42,0.12), 0 4px 6px -2px rgba(15,23,42,0.08);
  --shadow-xl:     0 20px 25px -5px rgba(15,23,42,0.14), 0 10px 10px -5px rgba(15,23,42,0.06);
  --shadow-2xl:    0 25px 50px -12px rgba(15,23,42,0.3);
  --shadow-glass:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-float:  0 20px 40px rgba(20,184,166,0.08);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(13,148,136,0.08);
  --shadow-premium:    0 30px 60px rgba(0,0,0,0.5);

  /* ── SPACING (8px base unit) ──────────────────────────────── */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;

  /* ── BORDER RADII ────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-popup: 24px;  /* popup-specific large card radius */
  --radius-full: 9999px;

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --ease-fast:    150ms ease-in-out;
  --ease-base:    200ms ease-in-out;
  --ease-slow:    300ms ease-in-out;
  --ease-spring:  cubic-bezier(0.16,1,0.3,1);
  --ease-bounce:  cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-INDEX LAYERS ──────────────────────────────────────── */
  --z-dropdown: 1000;
  --z-modal-bg: 1040;
  --z-modal:    1050;
  --z-popover:  1060;
  --z-tooltip:  1070;
  --z-fab:      2000;   /* extension FAB stays above all page content */
  --z-sidebar:  2100;   /* in-page sidebar */

  /* ── FOCUS RING (WCAG AA+) ───────────────────────────────── */
  --focus-ring:        3px solid var(--gold-400);
  --focus-ring-offset: 2px;

  /* ── BREAKPOINTS ─────────────────────────────────────────── */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ── SEMANTIC ELEMENT DEFAULTS (dark-mode-first) ──────────── */
body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); }
h2 { font-size: var(--text-xl);  font-weight: var(--fw-bold);      line-height: var(--lh-tight); }
h3 { font-size: var(--text-lg);  font-weight: var(--fw-semibold);  line-height: var(--lh-tight); }
h4 { font-size: var(--text-base); font-weight: var(--fw-semibold); }
p  { font-size: var(--text-base); line-height: var(--lh-normal); color: var(--text-secondary); }
small { font-size: var(--text-xs); color: var(--text-tertiary); }
code, pre { font-family: var(--font-mono); font-size: var(--text-sm); }

a {
  color: var(--teal-400);
  text-decoration: none;
  transition: color var(--ease-fast);
}
a:hover { color: var(--teal-300); }

*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── GRADIENT TEXT (brand heading treatment) ──────────────── */
.text-gradient-teal {
  background: linear-gradient(to bottom right, #fff, var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-gold {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── GLASS UTILITY ────────────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}
.glass-heavy {
  background: var(--glass-bg-heavy);
  backdrop-filter: var(--glass-blur-heavy);
  -webkit-backdrop-filter: var(--glass-blur-heavy);
  border: 1px solid var(--glass-border);
}