/*
 * Mystery English — Design Tokens
 * All CSS custom properties for color, typography, spacing, and elevation.
 * Import this file first in any Mystery English surface.
 *
 * Fonts loaded via Google Fonts:
 *   - Playfair Display (display/serif)
 *   - DM Sans (UI/body)
 *   - JetBrains Mono (mono/vocab)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── BACKGROUND SCALE ──────────────────────────────────────── */
  --bg-void:      #09090F; /* deepest background */
  --bg-base:      #0E1018; /* primary app background */
  --bg-surface:   #161A27; /* cards, panels */
  --bg-elevated:  #1E2336; /* modals, dropdowns */
  --bg-subtle:    #252C42; /* hover overlays, dividers */
  --bg-overlay:   rgba(9, 9, 15, 0.75); /* scrim / lightbox */

  /* ─── GOLD (PRIMARY ACCENT) ─────────────────────────────────── */
  --gold-50:      #FBF3DC;
  --gold-100:     #F0D98A;
  --gold-200:     #D4AB3A; /* primary accent */
  --gold-300:     #B8921E;
  --gold-400:     #8F6E0E;
  --gold-500:     #63490A;

  /* ─── CREAM (TEXT) ──────────────────────────────────────────── */
  --cream-100:    #F4EFE3; /* primary heading text */
  --cream-200:    #CEC8B8; /* body text */
  --cream-300:    #9C9688; /* secondary / muted */
  --cream-400:    #5E5A51; /* disabled / placeholder */
  --cream-500:    #3A3830; /* very subtle on dark */

  /* ─── CRIMSON (SECONDARY / DANGER) ─────────────────────────── */
  --crimson-100:  #F5C2BB;
  --crimson:      #C0392B;
  --crimson-dark: #8E2016;

  /* ─── TEAL (VOCABULARY / HIGHLIGHT) ────────────────────────── */
  --teal-100:     #B5DEDE;
  --teal:         #3A8C8C;
  --teal-light:   #5AB5B5;
  --teal-dark:    #276060;

  /* ─── SEMANTIC ALIASES ──────────────────────────────────────── */
  --color-bg:         var(--bg-base);
  --color-surface:    var(--bg-surface);
  --color-elevated:   var(--bg-elevated);
  --color-border:     rgba(255, 255, 255, 0.07);
  --color-border-mid: rgba(255, 255, 255, 0.12);

  --color-primary:    var(--gold-200);
  --color-primary-hover: var(--gold-100);

  --color-text:       var(--cream-200);
  --color-heading:    var(--cream-100);
  --color-muted:      var(--cream-300);
  --color-disabled:   var(--cream-400);

  --color-error:      var(--crimson);
  --color-success:    #4A9E6A;
  --color-highlight:  var(--teal);
  --color-vocab:      var(--teal-light);

  /* ─── TYPOGRAPHY FAMILIES ───────────────────────────────────── */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --font-ui:       var(--font-body);

  /* ─── TYPE SCALE ────────────────────────────────────────────── */
  --text-xs:    0.75rem;    /* 12px — captions, meta */
  --text-sm:    0.875rem;   /* 14px — labels, secondary UI */
  --text-base:  1rem;       /* 16px — body copy */
  --text-lg:    1.125rem;   /* 18px — lead paragraphs */
  --text-xl:    1.25rem;    /* 20px — card headings */
  --text-2xl:   1.5rem;     /* 24px — section headings */
  --text-3xl:   1.875rem;   /* 30px — page headings */
  --text-4xl:   2.5rem;     /* 40px — hero sub-headings */
  --text-5xl:   3.5rem;     /* 56px — hero display */
  --text-6xl:   4.5rem;     /* 72px — jumbo display */

  /* ─── TYPE WEIGHTS ──────────────────────────────────────────── */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ─── LINE HEIGHTS ──────────────────────────────────────────── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  /* ─── LETTER SPACING ────────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* ─── SPACING SCALE (base 4px) ──────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ─── BORDER RADII ──────────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── SHADOWS & ELEVATION ───────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:   0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:   0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 24px rgba(212, 171, 58, 0.18);
  --shadow-glow-strong: 0 0 40px rgba(212, 171, 58, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ─── TRANSITIONS ───────────────────────────────────────────── */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:      cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);

  /* ─── Z-INDEX SCALE ─────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ─── SEMANTIC ELEMENT DEFAULTS ─────────────────────────────────── */

body {
  background-color: var(--bg-base);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: pretty;
}

h1 { font-size: var(--text-5xl); font-weight: var(--weight-bold); }
h2 { font-size: var(--text-4xl); font-weight: var(--weight-semibold); }
h3 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); }
h4 { font-size: var(--text-2xl); font-weight: var(--weight-medium); }
h5 { font-size: var(--text-xl);  font-weight: var(--weight-medium); }
h6 { font-size: var(--text-lg);  font-weight: var(--weight-medium); }

p {
  font-family: var(--font-body);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-hover);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: var(--tracking-normal);
}

.label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--cream-200);
}

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--cream-100);
  border-left: 2px solid var(--gold-200);
  padding-left: var(--space-6);
  margin: 0;
  line-height: var(--leading-snug);
}

/* ─── UTILITY CLASSES ───────────────────────────────────────────── */

.text-gold    { color: var(--gold-200); }
.text-cream   { color: var(--cream-100); }
.text-muted   { color: var(--color-muted); }
.text-teal    { color: var(--teal-light); }
.text-crimson { color: var(--crimson); }

.bg-base      { background-color: var(--bg-base); }
.bg-surface   { background-color: var(--bg-surface); }
.bg-elevated  { background-color: var(--bg-elevated); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

.border-subtle { border: 1px solid var(--color-border); }
.border-mid    { border: 1px solid var(--color-border-mid); }

.shadow-card { box-shadow: var(--shadow-md), var(--shadow-inset); }
.shadow-glow { box-shadow: var(--shadow-glow); }

.rounded-card   { border-radius: var(--radius-lg); }
.rounded-button { border-radius: var(--radius-md); }
.rounded-pill   { border-radius: var(--radius-full); }

/* ─── VOCAB HIGHLIGHT ───────────────────────────────────────────── */
.vocab {
  color: var(--color-vocab);
  font-family: var(--font-mono);
  font-size: 0.92em;
  border-bottom: 1px dashed var(--teal);
  cursor: help;
}