/* ═══════════════════════════════════════════════════════════════════
   SkillYog — tokens.css
   Single source of truth for the visual identity.

   This consolidates the :root block that was copy-pasted into every
   page. Those copies had drifted only cosmetically (#fff vs #ffffff,
   .10 vs 0.10, one page missing --shadow-md), so this is a safe
   merge rather than a redesign.

   DELIBERATELY UNCHANGED: the navy/amber palette and the
   Fraunces/DM Sans pairing. You are moving every URL on the site
   this month; changing the look at the same time would make any
   ranking movement impossible to diagnose. Swap identity later by
   editing section 2 and 3 only — nothing else references raw hex.

   Load before every page's own <style>:
     <link rel="stylesheet" href="/tokens.css">
   ═══════════════════════════════════════════════════════════════════ */

/* ---- 1. Fonts ----
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=DM+Sans:wght@400;500;600;700&family=Mukta:wght@400;500;700&display=swap" rel="stylesheet">

   Mukta carries Devanagari — DM Sans has no Devanagari coverage, so
   Hindi pages fall through to it automatically via the stack below.
*/

:root {
  /* ---- 2. Colour ---- */
  --navy:        #0b1d35;   /* header, footer, primary surfaces */
  --navy-mid:    #122848;   /* dropdowns, raised dark surfaces */
  --navy-light:  #1a3a60;   /* hover states on dark */
  --amber:       #f5a623;   /* THE accent — CTAs, highlights. Sparingly. */
  --amber-dark:  #d4881a;   /* amber hover/pressed */
  --teal:        #1aa6a6;   /* secondary accent — Class 12 wayfinding */

  --white:       #ffffff;
  --off-white:   #f7f9fc;   /* page background bands */
  --gray-100:    #eef1f6;
  --gray-200:    #dde3ec;
  --gray-300:    #c5cdd8;
  --gray-500:    #7a8799;
  --gray-700:    #3d4e60;
  --text:        #1a2638;

  /* ---- Semantic: correct / wrong ----
     One canonical pair. Legacy pages used three different greens
     (#1a8a50, #38a169, #16a34a) and four reds across three eras of the
     site. Every one of those greens failed WCAG AA for body text
     (4.38, 3.25 and 3.30 to 1 against the required 4.5), and green is
     what marks a correct answer in the MCQ pages — small text.

     --success is darkened to clear AA at 5.08:1. It sits ΔE 4.2 from
     the most common legacy green: noticeable side by side, invisible
     in use. --green / --red are aliases so no page CSS needs editing. */
  --success:     #087f46;   /* 5.08:1 on white — AA for body text */
  --warning:     #c0392b;   /* 5.44:1 on white — AA for body text */

  --green:       var(--success);
  --red:         var(--warning);
  --green-light: #f0fdf4;
  --red-light:   #fef2f2;

  /* Subject accents — names kept as-is so existing page CSS keeps working */
  /* Subject accents — names kept as-is so existing page CSS keeps working */
  --bio:     #1a8a50;   /* Biology */
  --chem:    #b84000;   /* Chemistry */
  --phy:     #1a55c8;   /* Physics */
  --maths:   #7c3aed;   /* Maths */
  --it:      #0b7a3e;   /* IT 402 */
  --purple:      #7c3aed;
  --purple-light:#f5f3ff;
  --teal-dark:   #127a7a;

  --hist:    #8b1a1a;   /* History */
  --geo:     #1a6b1a;   /* Geography */
  --polsci:  #1a4a8b;   /* Political Science */
  --eco:     #7b4a00;   /* Economics */

  /* Career-test category ramp (promoted from career-test.html) */
  --c0: #0891b2; --c1: #16a34a; --c2: #7c3aed; --c3: #db2777; --c4: #ea580c;
  --c5: #1a3a60; --c6: #b91c1c; --c7: #0d9488; --c8: #d97706; --c9: #9333ea;

  /* ---- 3. Typography ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "DM Sans", "Mukta", system-ui, sans-serif;

  --text-xs:   0.78rem;
  --text-sm:   0.88rem;
  --text-base: 1rem;
  --text-lg:   1.15rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.6rem;

  --leading-tight: 1.2;
  --leading-body:  1.65;

  /* ---- 4. Spacing (4px scale) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- 5. Shape & depth ---- */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-pill: 999px;
  --shadow:     0 4px 20px rgba(11, 29, 53, 0.10);
  --shadow-md:  0 8px 32px rgba(11, 29, 53, 0.15);

  /* ---- 6. Layout ---- */
  --content-max: 1200px;
  --prose-max:   44rem;   /* readable measure for answer keys and notes */
}

/* ═══════════════════════════════════════════════════════════════════
   Base layer — the minimum global styles.
   Kept deliberately thin so existing page CSS still wins.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--white);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--navy);
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-4); }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--amber-dark); }

img { max-width: 100%; height: auto; display: block; }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn-primary { background: var(--amber); color: var(--navy); }
.btn-primary:hover { background: var(--amber-dark); color: var(--navy); }
.btn-quiet { background: transparent; color: var(--navy); border-color: var(--gray-300); }
.btn-quiet:hover { background: var(--off-white); }

/* Layout helpers */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-4); }
.prose { max-width: var(--prose-max); }

/* Accessibility floor */
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}