/* Google Fonts: Inter typography, JetBrains Mono, & Google Material Symbols */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0');

:root {
  /* Fonts */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Layout & 8pt Grid Scale */
  --max-w:        1152px; /* 144 * 8 */
  --nav-height:   64px;   /* 8 * 8 */

  /* 8pt Spacing Scale */
  --space-8:      8px;
  --space-16:     16px;
  --space-24:     24px;
  --space-32:     32px;
  --space-40:     40px;
  --space-48:     48px;
  --space-64:     64px;
  --space-80:     80px;
  --space-96:     96px;

  /* Fixed gap per strict user rule */
  --gap-fixed:    16px;

  /* Strict 8pt Typography Scale */
  --text-xs:      12px;
  --text-base:    16px;
  --text-lg:      24px;
  --text-xl:      32px;
  --text-2xl:     48px;

  /* Button Dimensions (8pt compliant) */
  --btn-height:   48px;
  --btn-radius:   8px;
}

/* ─── Dark Theme (default) ─── */
:root,
[data-mode="dark"] {
  --color-ink:            #090a0d;
  --color-ink-2:          #111318;
  --color-ink-3:          #181b22;

  --color-fg:             #f2f4f8;
  --color-fg-dim:         #8a92a6;
  --color-fg-faint:       #50576a;

  /* SINGLE BRAND ACCENT: STRICT BLUE ONLY (NO GREEN, NO ORANGE) */
  --color-accent:         #3b82f6;
  --color-accent-subtle:  rgba(59, 130, 246, 0.10);
  --color-accent-border:  rgba(59, 130, 246, 0.25);

  --color-line:           rgba(242, 244, 248, 0.08);
  --color-line-soft:      rgba(242, 244, 248, 0.04);

  /* Buttons */
  --btn-cta-bg:           #3b82f6;
  --btn-cta-fg:           #ffffff;
  --btn-outline-border:   rgba(242, 244, 248, 0.24);
  --btn-outline-fg:       #f2f4f8;

  /* Cards */
  --card-bg:              #111318;
  --card-border:          rgba(242, 244, 248, 0.08);
}

/* ─── Light Theme ─── */
[data-mode="light"] {
  --color-ink:            #f8fafc;
  --color-ink-2:          #ffffff;
  --color-ink-3:          #f1f5f9;

  --color-fg:             #0f172a;
  --color-fg-dim:         #475569;
  --color-fg-faint:       #94a3b8;

  /* SINGLE BRAND ACCENT: STRICT BLUE ONLY (NO GREEN, NO ORANGE) */
  --color-accent:         #2563eb;
  --color-accent-subtle:  rgba(37, 99, 235, 0.08);
  --color-accent-border:  rgba(37, 99, 235, 0.22);

  --color-line:           rgba(15, 23, 42, 0.08);
  --color-line-soft:      rgba(15, 23, 42, 0.04);

  /* Buttons */
  --btn-cta-bg:           #2563eb;
  --btn-cta-fg:           #ffffff;
  --btn-outline-border:   rgba(15, 23, 42, 0.24);
  --btn-outline-fg:       #0f172a;

  /* Cards */
  --card-bg:              #ffffff;
  --card-border:          rgba(15, 23, 42, 0.08);
}