/* ============================================================
   TOTKIN — design tokens (the law for every page)
   Source: V2-03 UI/UX Design Specification · the logo is the palette
   ============================================================ */

/* ---- Fonts (self-hosted, OFL) ---- */
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/nunito-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/nunito-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/nunito-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-latin-700-normal.woff2') format('woff2')}

:root{
  /* ---- The seven joy colors (from the logo) ---- */
  --pink:   #FF66C4;
  --yellow: #FFE36E;
  --green:  #7ED957;
  --blue:   #00B3F4;
  --purple: #8C52FF;
  --coral:  #FF5757;
  --orange: #FF672D;

  /* ---- Neutrals ---- */
  --canvas:      #FFFDF8;   /* warm cream — page background */
  --surface:     #FFFFFF;   /* cards */
  --ink:         #26242B;   /* text — always ink on surface, AA law */
  --ink-soft:    #5C5966;
  --ink-faint:   #6E6B7A;
  --line:        #EFEBE2;   /* hairlines on cream */
  --purple-deep: #7C42F5;   /* the ONLY color allowed to carry white text */

  /* ---- Section tints (joy colors as fills, never behind body-length text blocks) ---- */
  --pink-tint:   #FFEDF8;
  --yellow-tint: #FFF8DC;
  --green-tint:  #EDFAE3;
  --blue-tint:   #E3F6FE;
  --purple-tint: #F1EAFF;
  --coral-tint:  #FFECEC;
  --orange-tint: #FFEFE7;

  /* ---- Type ---- */
  --font-display: 'Nunito', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-12: 0.75rem;  --fs-14: 0.875rem;  --fs-16: 1rem;
  --fs-20: 1.25rem;  --fs-24: 1.5rem;    --fs-32: 2rem;
  --fs-hero: clamp(2.35rem, 1.4rem + 3.4vw, 3.9rem);
  --fs-h2:   clamp(1.7rem, 1.25rem + 1.7vw, 2.45rem);
  --fs-h3:   clamp(1.2rem, 1.05rem + .6vw, 1.45rem);

  /* ---- Shape (V2-03: cards r20 · sheets 28 · pills · inputs 14) ---- */
  --r-card: 20px;
  --r-sheet: 28px;
  --r-input: 14px;
  --r-pill: 999px;

  /* ---- Elevation: soft shadows + 1px surface-tint borders ---- */
  --shadow-soft: 0 2px 12px rgba(38,36,43,.08);
  --shadow-lift: 0 10px 30px rgba(38,36,43,.10);
  --shadow-pop:  0 18px 50px rgba(38,36,43,.14);

  /* ---- Spacing: 4pt grid ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --gutter: 16px;
  --section-gap: clamp(64px, 5vw + 40px, 110px);
  --content-max: 1180px;

  /* ---- Motion: 200–300ms standard curve ---- */
  --ease: cubic-bezier(.33,.9,.35,1);
  --t-fast: 200ms;
  --t-std: 280ms;
}

/* ============================================================
   THEME  ·  the foundation (structural, always on)
   ------------------------------------------------------------
   Two themes only: light (default) and dark. Everything the eye
   reads — canvas, surface, ink, hairlines, tints, shadows — is a
   token, so a theme swap never touches a component rule.
      html[data-theme="light"]  → forced light
      html[data-theme="dark"]   → forced dark
      (no attribute)            → follows the device setting
   The seven joy colours never change: they are the brand.
   ============================================================ */

:root{
  color-scheme: light;

  /* glass surfaces (sticky nav, sticky table header) */
  --glass:        rgba(255,253,248,.72);
  --glass-strong: rgba(255,253,248,.94);

  /* ambient mesh — the page's colour wash */
  --mesh-1: rgba(140,82,255,.20);
  --mesh-2: rgba(255,102,196,.20);
  --mesh-3: rgba(0,179,244,.16);
  --mesh-4: rgba(126,217,87,.18);
  --mesh-5: rgba(255,227,110,.26);
  --mesh-6: rgba(255,103,45,.12);
  --mesh-core: rgba(255,253,248,.75);
  --grain: .038;

  /* signal colours */
  --lemon:      #C6F135;   /* Signature badge — lemon green */
  --lemon-deep: #8FB800;
  --lemon-tint: #F2FDD3;
  --danger:     #E5484D;   /* the "not in this plan" cross */
  --danger-tint:#FDECEC;

  /* elevation for dark surfaces sitting on light canvas stays as-is */
  --ring: rgba(38,36,43,.08);
  --neutral-tint: #F4F2EE;

  /* Text-safe joy palette: the same seven colours, deep enough to READ.
     Fills keep the bright originals; anything that is *type* uses these. */
  --t-pink:  #C22D86;  --t-yellow:#7A5C00; --t-green: #35801C; --t-blue:  #0A6E97;
  --t-purple:#7C42F5;  --t-coral: #D53535; --t-orange:#C74A12;
  /* Ink that never flips — for type printed on a joy-coloured fill. */
  --ink-fixed: #26242B;
  --surface-glass: rgba(255,255,255,.70);
}

html[data-theme="dark"]{
  color-scheme: dark;

  --canvas:      #131218;
  --surface:     #1C1B23;
  --surface-2:   #24222D;
  --ink:         #F4F1EC;
  --ink-soft:    #BEB9C8;
  --ink-faint:   #928DA1;
  --line:        #332F3D;
  --purple-deep: #A77CFF;

  --pink-tint:   #3B2130;
  --yellow-tint: #3A3320;
  --green-tint:  #1F321C;
  --blue-tint:   #123040;
  --purple-tint: #2A2146;
  --coral-tint:  #3B2126;
  --orange-tint: #3A2519;

  --shadow-soft: 0 2px 12px rgba(0,0,0,.45);
  --shadow-lift: 0 10px 30px rgba(0,0,0,.5);
  --shadow-pop:  0 18px 50px rgba(0,0,0,.6);
  --ring: rgba(255,255,255,.08);

  --glass:        rgba(19,18,24,.74);
  --glass-strong: rgba(19,18,24,.93);

  --mesh-1: rgba(140,82,255,.20);
  --mesh-2: rgba(255,102,196,.14);
  --mesh-3: rgba(0,179,244,.14);
  --mesh-4: rgba(126,217,87,.11);
  --mesh-5: rgba(255,227,110,.10);
  --mesh-6: rgba(255,103,45,.10);
  --mesh-core: rgba(19,18,24,.55);
  --grain: .05;

  --lemon-tint: #2E3A0E;
  --danger-tint:#3B1E1F;
  --neutral-tint:#2A2833;
  --t-pink:#FF8FD0; --t-yellow:#F2D06B; --t-green:#8FE06A; --t-blue:#63C9F5;
  --t-purple:#BC9BFF; --t-coral:#FF8E8E; --t-orange:#FF9C63;
  --surface-glass: rgba(255,255,255,.07);
}

/* device preference, only while the visitor has not chosen for themselves */
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    color-scheme: dark;
    --canvas:#131218; --surface:#1C1B23; --surface-2:#24222D;
    --ink:#F4F1EC; --ink-soft:#BEB9C8; --ink-faint:#928DA1; --line:#332F3D;
    --purple-deep:#A77CFF;
    --pink-tint:#3B2130; --yellow-tint:#3A3320; --green-tint:#1F321C;
    --blue-tint:#123040; --purple-tint:#2A2146; --coral-tint:#3B2126; --orange-tint:#3A2519;
    --shadow-soft:0 2px 12px rgba(0,0,0,.45); --shadow-lift:0 10px 30px rgba(0,0,0,.5);
    --shadow-pop:0 18px 50px rgba(0,0,0,.6); --ring:rgba(255,255,255,.08);
    --glass:rgba(19,18,24,.74); --glass-strong:rgba(19,18,24,.93);
    --mesh-1:rgba(140,82,255,.20); --mesh-2:rgba(255,102,196,.14); --mesh-3:rgba(0,179,244,.14);
    --mesh-4:rgba(126,217,87,.11); --mesh-5:rgba(255,227,110,.10); --mesh-6:rgba(255,103,45,.10);
    --mesh-core:rgba(19,18,24,.55); --grain:.05;
    --lemon-tint:#2E3A0E; --danger-tint:#3B1E1F; --neutral-tint:#2A2833;
    --t-pink:#FF8FD0; --t-yellow:#F2D06B; --t-green:#8FE06A; --t-blue:#63C9F5;
    --t-purple:#BC9BFF; --t-coral:#FF8E8E; --t-orange:#FF9C63;
    --surface-glass:rgba(255,255,255,.07);
  }
}

/* ============================================================
   SKIN  ·  the outfit (cosmetic, optional, never structural)
   ------------------------------------------------------------
   A skin only re-points accent tokens. It cannot change contrast
   rules, spacing, radii or type — so no skin can ever break AA or
   the layout. Turn one on with a single attribute on <html>:
        <html data-skin="monsoon">
   Add a school's own skin the same way for a Signature customer.
   Works on top of EITHER theme. Default = no attribute.
   ============================================================ */
:root{
  --accent:      var(--purple-deep);   /* primary action */
  --accent-tint: var(--purple-tint);
  --festive: none;                      /* optional decorative layer */
}
html[data-skin="monsoon"]{ --accent:#0E8FD1; --accent-tint:var(--blue-tint); }
html[data-skin="mango"]  { --accent:#D97706; --accent-tint:var(--orange-tint); }
html[data-skin="mint"]   { --accent:#2E9E5B; --accent-tint:var(--green-tint); }