/*
 * ─────────────────────────────────────────────
 *  PROTOTYPE DESIGN SYSTEM
 *  Foundation for all design engineering prototypes
 *  by Ezekiel Adewumi
 * ─────────────────────────────────────────────
 */

/* ─── FONTS ─── */
/* Primary: Inter (body + headings) — neutral, legible, wide weight range */
/* Mono: JetBrains Mono (data, countdowns, codes) — pairs with Inter */
/* Max two fonts per prototype. Never three. */

/* ─── TYPE SCALE (1.25 ratio, Major Third) ─── */
/*
  Display:  44px  / 800  / line-height: 1.0  / letter-spacing: -0.04em
  Title:    22px  / 700  / line-height: 1.1  / letter-spacing: -0.02em
  Body:     14px  / 400  / line-height: 1.5  / letter-spacing: -0.01em
  Label:    12px  / 600  / line-height: 1.0  / letter-spacing:  0.02em
  Caption:  10px  / 600  / line-height: 1.0  / letter-spacing:  0.08em  / uppercase
*/

:root {
  /* ─── FONTS ─── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ─── TYPE SCALE ─── */
  --text-display: 44px;
  --text-title: 22px;
  --text-body: 14px;
  --text-label: 12px;
  --text-caption: 10px;

  /* ─── FONT WEIGHTS (only three) ─── */
  --weight-regular: 400;   /* body, descriptions */
  --weight-medium: 600;    /* labels, metadata, medium emphasis */
  --weight-bold: 800;      /* headings, hero numbers, primary data */

  /* ─── LINE HEIGHTS ─── */
  --leading-tight: 1.0;    /* display, headings, labels */
  --leading-snug: 1.1;     /* titles, subheadings */
  --leading-normal: 1.5;   /* body text */
  --leading-relaxed: 1.6;  /* long-form reading */

  /* ─── LETTER SPACING ─── */
  --tracking-tight: -0.04em;   /* display / large type */
  --tracking-normal: -0.01em;  /* body */
  --tracking-mono: -0.02em;    /* monospace data */
  --tracking-label: 0.02em;    /* labels */
  --tracking-caps: 0.08em;     /* uppercase captions */

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

  /* ─── RADIUS ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 100px;

  /* ─── LIGHT THEME ─── */
  --bg-body: #f2f2f2;
  --bg-card: #ffffff;
  --bg-card-subtle: #fafafa;
  --border-subtle: #f0f0f0;
  --border-default: #e0e0e0;
  --text-primary: #0f0f0f;
  --text-secondary: #666666;
  --text-tertiary: #a0a0a0;
  --text-muted: #c0c0c0;

  /* ─── DARK THEME ─── */
  --dark-bg-body: #111111;
  --dark-bg-card: #1c1c1e;
  --dark-bg-card-subtle: #171717;
  --dark-border-subtle: rgba(255,255,255,0.06);
  --dark-border-default: rgba(255,255,255,0.10);
  --dark-text-primary: #e8e8e8;
  --dark-text-secondary: #999999;
  --dark-text-tertiary: #5a5a5a;
  --dark-text-muted: #3a3a3a;

  /* ─── GOLDEN THEME ─── */
  --gold-bg-body: #1a1611;
  --gold-bg-card: #1c1914;
  --gold-bg-card-subtle: #17140f;
  --gold-border-subtle: rgba(196,164,106,0.10);
  --gold-border-default: rgba(196,164,106,0.15);
  --gold-accent: #c4a46a;
  --gold-accent-light: #e8dcc8;
  --gold-text-primary: #e8dcc8;
  --gold-text-secondary: #6b5f4e;
  --gold-text-tertiary: #5a4f3e;
  --gold-text-muted: #3d3428;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-dark-lg: 0 16px 48px rgba(0,0,0,0.40);

  /* ─── TRANSITIONS ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
}

/*
 * ─────────────────────────────────────────────
 *  RULES
 * ─────────────────────────────────────────────
 *
 *  1. TWO FONTS MAX — Inter + JetBrains Mono. No third font.
 *  2. THREE WEIGHTS — 400, 600, 800. Never use 500 and 700 together.
 *  3. COLOR HIERARCHY — Primary (headings, key data), Secondary (body),
 *     Tertiary (labels, hints). Three tiers, no more.
 *  4. 8px GRID — All spacing is a multiple of 4px, prefer multiples of 8px.
 *  5. ONE ACCENT — One color moment per prototype. Restraint over variety.
 *  6. UPPERCASE = SMALL — Uppercase text is always caption size (10-11px)
 *     with wide tracking (0.06-0.08em). Never uppercase body text.
 *  7. TIGHTEN LARGE, OPEN SMALL — Negative tracking on display type,
 *     positive tracking on captions. The bigger the type, the tighter.
 *  8. CARD RADIUS — 16-20px for outer card, 8-12px for inner elements.
 *     Inner radius is always smaller than outer.
 *  9. SHADOWS — Use sparingly. Prefer elevation via background color shift.
 * 10. TRANSITIONS — Everything animates. 200ms default, ease-out for enters,
 *     ease-in-out for state changes.
 */