/* ================================================================
   VIRTUS FORMATION — DESIGN TOKENS v4.0
   CSS custom properties — color, sizing, typography, spacing
   ================================================================ */

/* Self-hosted variable fonts from /public/fonts/ */
@font-face {
  font-family: 'Inter';
  src: url('/public/fonts/Inter-VariableFont_opsz%2Cwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/public/fonts/Inter-Italic-VariableFont_opsz%2Cwght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/public/fonts/LibreBaskerville-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('/public/fonts/LibreBaskerville-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Backgrounds — Dark mode (charcoal) ────────── */
  --charcoal-light:     #181818;
  --charcoal:           #141414;
  --charcoal-dark:      #121213;

  /* ── Backgrounds — Light mode (bone) ────────────── */
  --bone-light:         #edeae0;
  --bone:               #EDE5D5;
  --bone-dark:          #DCD4C4;
  --cream:              var(--bone);  /* Alias for canvas animation compatibility */

  /* ── Card warm — deepest dark with subtle gold ──── */
  --bg-warm-formal:     #141211;

  /* ── Gold accents ──────────────────────────────── */
  --gold:               #C9A84C;   /* dark mode accent */
  --gold-dark:          #A67C2E;   /* light mode accent */
  --gold-hi:            #D9BA60;   /* hover highlight */

  /* ── Status / Badge colors ────────────────────── */
  --badge-new:          #6E5496;   /* purple */
  --badge-ok:           #5DA64C;   /* green */
  --badge-hot:          #BD4B4B;   /* red */

  /* ── Borders ──────────────────────────────────── */
  --border:             rgba(221, 213, 197, 0.10);
  --border-gold:        rgba(201, 168,  76, 0.30);

  /* ── Third-party ──────────────────────────────── */
  --discord:            #5865F2;
  --discord-dark:       #4752C4;

  /* ── Typography ───────────────────────────────── */
  --font-serif:         'Libre Baskerville', Georgia, serif;
  --font-sans:          'Inter', system-ui, sans-serif;
  --font-mono:          'Courier New', monospace;

  /* ── Type scale (rem — fixed UI elements) ─────── */
  --text-2xs:           0.5625rem;  /*  9px */
  --text-xs:            0.625rem;   /* 10px */
  --text-sm:            0.6875rem;  /* 11px */
  --text-base:          0.75rem;    /* 12px */
  --text-md:            0.8125rem;  /* 13px */
  --text-lg:            0.9375rem;  /* 15px */
  --text-xl:            1rem;       /* 16px — body base */
  --text-2xl:           1.0625rem;  /* 17px */

  /* ── Spacing (rem — component level) ─────────── */
  --sp-1:               0.5rem;   /*  8px */
  --sp-2:               1rem;     /* 16px */
  --sp-3:               1.5rem;   /* 24px */
  --sp-4:               2rem;     /* 32px */
  --sp-5:               3rem;     /* 48px */
  --sp-6:               5rem;     /* 80px */
  --sp-7:               7.5rem;   /* 120px */

  /* ── Section padding (clamp — scales with viewport) */
  --section-v:          clamp(4rem, 8vw, 7.5rem);
  --section-h:          clamp(1.5rem, 6vw, 4rem);

  /* ── Max widths (rem — fixed proportions) ────── */
  --max-w:              75rem;
  --max-w-narrow:       47.5rem;
  --max-w-prose:        35rem;
  --max-w-xs:           26.25rem;
  --max-w-card:         21.25rem;

  /* ── UI constants (px — fixed, no scaling) ──── */
  --radius:             1.5px;
  --radius-pill:        20px;
  --ease:               0.2s ease;
  --ease-slow:          0.65s ease;
}

/* ================================================================
   DARK MODE — DEFAULT
   Light text on dark backgrounds. Used when data-theme not set.
   ================================================================ */
:root[data-theme="dark"],
:root {
  --text-primary:       var(--bone);
  --text-secondary:     #DDD5C5;
  --text-tertiary:      rgba(221, 213, 197, 0.68);
  --text-muted:         rgba(221, 213, 197, 0.55);
  --text-accent:        var(--gold);
  --bg-primary:         var(--charcoal-light);
  --bg-secondary:       var(--charcoal);
  --bg-tertiary:        var(--charcoal-dark);
}

/* ================================================================
   LIGHT MODE
   Dark text on light backgrounds. Applied when data-theme="light"
   ================================================================ */
:root[data-theme="light"] {
  --text-primary:       #2C2420;
  --text-secondary:     #4A4540;
  --text-tertiary:      rgba(44, 36, 32, 0.68);
  --text-muted:         rgba(44, 36, 32, 0.55);
  --text-accent:        var(--gold-dark);
  --bg-primary:         #EDE5D5;
  --bg-secondary:       #F5F0E8;
  --bg-tertiary:        #DCD4C4;
}