/* ===========================================================
   SUGAM ACADEMY — DESIGN TOKENS
   Palette derived from brand mark: clinical blue / sage green /
   muted gold / instrument grey, set against ink navy & bone white.
   =========================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --ink-900: #0a1726;
  --ink-800: #0f2138;
  --ink-700: #16304d;
  --bone-100: #faf9f5;
  --bone-200: #f1efe8;
  --bone-300: #e6e2d6;

  /* ---- Color: brand ---- */
  --blue-600: #2e6fa3;
  --blue-500: #3f8bc4;
  --blue-300: #a9cbe3;
  --sage-600: #5b8c3e;
  --sage-500: #74a854;
  --sage-300: #c3dba8;
  --gold-500: #c99a3d;
  --gold-300: #e3c785;
  --grey-500: #7a8699;
  --grey-300: #b7bfc9;

  /* ---- Color: semantic ---- */
  --surface: var(--bone-100);
  --surface-raised: #ffffff;
  --surface-dark: var(--ink-900);
  --text-primary: var(--ink-900);
  --text-secondary: #495669;
  --text-on-dark: var(--bone-100);
  --text-on-dark-muted: #9fb0c4;
  --border-hair: rgba(10, 23, 38, 0.1);
  --border-hair-dark: rgba(255, 255, 255, 0.12);

  /* ---- Type ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --fs-eyebrow: 0.8125rem;
  --fs-body: 1.0625rem;
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 1.6rem + 4.8vw, 5.5rem);
  --fs-stat: clamp(2rem, 1.4rem + 2vw, 3.25rem);

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.875rem;
  --sp-4: 1.25rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 9rem;

  /* ---- Layout ---- */
  --container: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  /* ---- Notice bar offset (JS sets the real height once measured) ---- */
  --notice-offset: 44px;
}

@media (max-width: 720px) {
  :root {
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 5rem;
  }
}

/* Tighten container padding on very narrow phones */
@media (max-width: 380px) {
  :root {
    --container-pad: 1rem;
  }
}