/* ==========================================================================
   SmartCoach K12 — Design Tokens (v3: refined, premium, calm)
   Crisp whitespace, hairline detail, soft prismatic accents.
   ========================================================================== */

:root {
  /* ---- Ink / neutral ramp --------------------------------------------- */
  --ink-900: #0e1220;   /* headings */
  --ink-800: #171c2b;
  --ink-700: #262c3d;
  --gray-600: #3f4655;  /* body text */
  --gray-500: #667085;  /* soft text */
  --gray-400: #8f96a6;
  --gray-300: #c3c8d4;
  --gray-200: #e2e5ec;
  --line:     #ecedf2;  /* hairline border */
  --line-2:   #e2e4ec;
  --paper:    #ffffff;
  --paper-2:  #f6f7fb;  /* soft section */
  --paper-3:  #fbfbfe;
  --white:    #ffffff;

  /* ---- Accent (refined indigo-blue) ----------------------------------- */
  --accent-50:  #eef1ff;
  --accent-100: #e2e6ff;
  --accent-200: #c7cfff;
  --accent-300: #a3b0ff;
  --accent-400: #7d8cf8;
  --accent-500: #5566ef;  /* primary */
  --accent-600: #3f4ee0;
  --accent-700: #313fbf;

  /* ---- Soft prismatic stops (hero glow, accents) ---------------------- */
  --lav:   #cdc9ff;
  --peri:  #bcd0ff;
  --sky:   #c4e4ff;
  --mint:  #c4f1de;
  --peach: #ffdcc6;
  --rose:  #ffd2e2;

  /* ---- Dark section --------------------------------------------------- */
  --dark-1: #0f1424;
  --dark-2: #131a30;

  /* ---- Semantic ------------------------------------------------------- */
  --bg:        var(--paper);
  --bg-alt:    var(--paper-2);
  --surface:   var(--white);
  --text:      var(--gray-600);
  --text-soft: var(--gray-500);
  --heading:   var(--ink-900);
  --primary:   var(--accent-600);
  --border:    var(--line);
  --ring:      color-mix(in srgb, var(--accent-500) 40%, transparent);

  /* ---- Gradients ------------------------------------------------------ */
  --g-prism: linear-gradient(115deg, var(--lav) 0%, var(--peri) 26%, var(--mint) 58%, var(--peach) 100%);
  --g-prism-2: linear-gradient(130deg, var(--sky) 0%, var(--lav) 40%, var(--rose) 100%);
  --g-accent: linear-gradient(120deg, var(--accent-600), var(--accent-400));
  --g-accent-soft: linear-gradient(160deg, var(--accent-50), #f4f1ff);
  --g-dark: linear-gradient(170deg, var(--dark-1) 0%, var(--dark-2) 100%);
  --g-text: linear-gradient(100deg, var(--accent-600), #7a5cf0 60%, var(--accent-500));

  /* ---- Soft blobs (hero) --------------------------------------------- */
  --blob-1: radial-gradient(closest-side, rgba(150,140,255,.5), transparent);
  --blob-2: radial-gradient(closest-side, rgba(150,205,255,.45), transparent);
  --blob-3: radial-gradient(closest-side, rgba(150,235,205,.42), transparent);
  --blob-4: radial-gradient(closest-side, rgba(255,200,175,.4), transparent);

  /* ---- Type ----------------------------------------------------------- */
  --f-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:  .8rem;
  --fs-sm:  .9rem;
  --fs-base:1rem;
  --fs-md:  1.075rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;
  --fs-2xl: clamp(1.7rem, 3.2vw, 2.35rem);
  --fs-3xl: clamp(2rem, 4.6vw, 3.1rem);
  --fs-4xl: clamp(2.6rem, 6.2vw, 4.5rem);

  /* ---- Space ---------------------------------------------------------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;  --sp-8:4rem;   --sp-9:6rem;  --sp-10:8rem;

  /* ---- Radius --------------------------------------------------------- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-2xl:34px; --r-full:999px;

  /* ---- Shadow (soft, low) -------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(14,18,32,.05);
  --sh-sm: 0 2px 10px rgba(14,18,32,.06);
  --sh-md: 0 12px 32px -14px rgba(20,26,48,.16), 0 2px 8px rgba(20,26,48,.05);
  --sh-lg: 0 34px 70px -28px rgba(20,26,48,.22), 0 8px 22px -14px rgba(20,26,48,.12);
  --sh-frame: 0 50px 90px -40px rgba(30,38,80,.4), 0 12px 30px -18px rgba(30,38,80,.16);

  /* ---- Layout / motion ---------------------------------------------- */
  --container: 1180px;
  --narrow: 760px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: 240ms;
}