/* =====================================================================
   VA CLASSES — 1-ON-1 ONLINE TUTORING (Grades 1–10)
   colors_and_type.css — core design tokens (color, type, space, radius, shadow)
   ---------------------------------------------------------------------
   Fonts are loaded from Google Fonts CDN below. To self-host, drop the
   woff2 files into /fonts and replace the @import with @font-face rules.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /* BRAND — VA Yellow + Ink                                            */
  /* ------------------------------------------------------------------ */
  --brand-yellow:        #FFC700;  /* primary — "VA Yellow" */
  --brand-yellow-bright: #FFE14D;  /* highlights, hovers on dark */
  --brand-yellow-soft:   #FFEFA8;  /* tints, subtle fills, selection */
  --brand-yellow-deep:   #E0A800;  /* pressed yellow, yellow-on-yellow borders */
  --brand-yellow-wash:   #FFF8DC;  /* page-tint / very light section bg */

  /* ------------------------------------------------------------------ */
  /* INK — warm near-blacks (text + dark surfaces)                       */
  /* ------------------------------------------------------------------ */
  --ink-900: #14130E;  /* primary text, black surfaces */
  --ink-800: #21201A;
  --ink-700: #34322A;
  --ink-600: #4A4738;

  /* ------------------------------------------------------------------ */
  /* NEUTRALS — warm paper + stone greys                                 */
  /* ------------------------------------------------------------------ */
  --paper:    #FBF8F0;  /* default page background (warm off-white) */
  --paper-2:  #F4EFE2;  /* alt section / subtle card background */
  --cloud:    #E8E2D2;  /* borders, dividers, hairlines */
  --cloud-2:  #D8D1BE;  /* stronger borders */
  --stone-500:#8C8675;  /* muted / secondary text */
  --stone-600:#6E6857;  /* tertiary text on paper */
  --white:    #FFFFFF;

  /* ------------------------------------------------------------------ */
  /* SEMANTIC — status                                                   */
  /* ------------------------------------------------------------------ */
  --success:      #1F8A4C;  --success-tint: #E3F3E8;
  --warning:      #C77800;  --warning-tint: #FBEFD4;
  --danger:       #CE3B22;  --danger-tint:  #FBE5E0;
  --info:         #2A62D4;  --info-tint:    #E4ECFB;

  /* ------------------------------------------------------------------ */
  /* SEMANTIC — foreground / background roles                            */
  /* ------------------------------------------------------------------ */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--stone-600); /* secondary text */
  --fg-3: var(--stone-500); /* muted / placeholder */
  --fg-on-dark:   #F7F3E8;  /* text on ink surfaces */
  --fg-on-yellow: var(--ink-900); /* text on yellow (always ink) */

  --bg-1: var(--paper);     /* page */
  --bg-2: var(--white);     /* raised card */
  --bg-3: var(--paper-2);   /* sunken / alt section */
  --bg-ink: var(--ink-900); /* dark section */

  --border:        var(--cloud);
  --border-strong: var(--cloud-2);
  --border-ink:    var(--ink-900);
  --focus-ring:    #2A62D4;

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY — families                                               */
  /* ------------------------------------------------------------------ */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Weights */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* ------------------------------------------------------------------ */
  /* TYPE SCALE — role-based (font / size / line / weight / spacing)     */
  /* Display uses Archivo, tight tracking, heavy weight                  */
  /* ------------------------------------------------------------------ */
  --display:   var(--w-black) 4.5rem/0.96 var(--font-display);   /* 72 hero */
  --h1:        var(--w-extra, 800) 3.25rem/1.02 var(--font-display); /* 52 */
  --h2:        var(--w-bold) 2.25rem/1.06 var(--font-display);   /* 36 */
  --h3:        var(--w-bold) 1.5rem/1.15 var(--font-display);    /* 24 */
  --h4:        var(--w-semi) 1.1875rem/1.25 var(--font-sans);    /* 19 */
  --body-lg:   var(--w-regular) 1.1875rem/1.6 var(--font-sans);  /* 19 */
  --body:      var(--w-regular) 1.0625rem/1.6 var(--font-sans);  /* 17 */
  --body-sm:   var(--w-regular) 0.9375rem/1.55 var(--font-sans); /* 15 */
  --label:     var(--w-semi) 0.875rem/1.3 var(--font-sans);      /* 14 */
  --caption:   var(--w-medium) 0.8125rem/1.4 var(--font-sans);   /* 13 */
  --overline:  var(--w-bold) 0.75rem/1.2 var(--font-sans);       /* 12, tracked + upper */
  --code:      var(--w-regular) 0.9375rem/1.5 var(--font-mono);  /* 15 */

  --tracking-tight:   -0.02em;
  --tracking-display: -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-over:    0.14em;  /* overline / eyebrow */

  /* ------------------------------------------------------------------ */
  /* SPACING — 4px base                                                  */
  /* ------------------------------------------------------------------ */
  --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;

  /* ------------------------------------------------------------------ */
  /* RADII — moderate, geometric                                         */
  /* ------------------------------------------------------------------ */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  26px;
  --r-pill: 999px;

  /* ------------------------------------------------------------------ */
  /* SHADOWS — warm-tinted, plus signature chunky "hard" offsets         */
  /* ------------------------------------------------------------------ */
  --shadow-xs:   0 1px 2px rgba(20,19,14,0.06);
  --shadow-sm:   0 2px 6px rgba(20,19,14,0.07);
  --shadow-md:   0 6px 18px rgba(20,19,14,0.10);
  --shadow-lg:   0 16px 40px rgba(20,19,14,0.14);

  /* Signature: solid offset block shadows (bold yellow/black motif) */
  --shadow-hard:     4px 4px 0 0 var(--ink-900);
  --shadow-hard-lg:  6px 6px 0 0 var(--ink-900);
  --shadow-hard-yellow: 4px 4px 0 0 var(--brand-yellow);

  /* ------------------------------------------------------------------ */
  /* MISC                                                                */
  /* ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
  --maxw: 1200px;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES — apply these directly
   ===================================================================== */
.t-display { font: var(--display); letter-spacing: var(--tracking-display); }
.t-h1 { font: var(--w-black) 3.25rem/1.02 var(--font-display); letter-spacing: var(--tracking-display); }
.t-h2 { font: var(--h2); letter-spacing: var(--tracking-tight); }
.t-h3 { font: var(--h3); letter-spacing: var(--tracking-tight); }
.t-h4 { font: var(--h4); letter-spacing: var(--tracking-tight); }
.t-body-lg { font: var(--body-lg); }
.t-body { font: var(--body); }
.t-body-sm { font: var(--body-sm); }
.t-label { font: var(--label); }
.t-caption { font: var(--caption); color: var(--fg-2); }
.t-overline {
  font: var(--overline);
  letter-spacing: var(--tracking-over);
  text-transform: uppercase;
}
.t-code { font: var(--code); }

/* Helpers */
.fg-1 { color: var(--fg-1); } .fg-2 { color: var(--fg-2); } .fg-3 { color: var(--fg-3); }
.text-yellow { color: var(--brand-yellow-deep); }
.bg-yellow { background: var(--brand-yellow); }
.bg-ink { background: var(--ink-900); color: var(--fg-on-dark); }
.bg-paper { background: var(--paper); }

/* Yellow highlight marker — recurring brand motif */
.mark-yellow {
  background: linear-gradient(transparent 58%, var(--brand-yellow) 58%);
  padding: 0 0.05em;
}