/* ============================================================
   ENSSA Design System — Colors & Type
   Early Number Sense Screener for Australia
   Source: ENSSA Style Guide + Science of Learning Style Guide (CIS)
   ============================================================ */

/* ---------- Webfont: Lato (Calibri substitute) ---------------
   Calibri is the spec'd brand font but it's proprietary.
   Lato is the closest free webfont — humanist sans with subtle
   rounding and good screen readability. Flag for review.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400;1,700&display=swap');

:root {
  /* ============================================================
     CORE BRAND PALETTE — ENSSA Style Guide
     Eight-colour set spanning Aubergine → Mauve.
     Treat these as identity colours: use sparingly and in
     pairs/trios, not all together at once.
     ============================================================ */
  --enssa-aubergine:   #322B44;  /* deepest, used for type / dark UI */
  --enssa-purple:      #77468D;
  --enssa-magenta:     #C51E67;
  --enssa-salmon:      #DF686B;
  --enssa-gold:        #B39C51;  /* RGB 179,156,81 — guide's hex was a typo */
  --enssa-green:       #639C51;  /* the lighter "study" green from the guide */
  --enssa-teal:        #009F8A;  /* Science of Learning teal */
  --enssa-mauve:       #908DBA;

  /* Science of Learning / CIS lock-up partners */
  --sol-teal:          #009F8A;  /* Science of Learning */
  --cis-education:     #803F91;  /* CIS Education purple */
  --cis-green:         #005953;  /* CIS Primary deep green */

  /* ============================================================
     SEMANTIC RATING SCALES — two parallel vocabularies
     The team is still deciding which framing to expose in the
     portal. Both share the same colourblind-safe palette and
     map 1:1, so swapping is a label change, not a re-skin.

     Scale A — AT-RISK (clinical / triage framing)
       low risk        → on-track   (green)
       moderate risk   → emerging   (amber)
       high risk       → concern    (red)

     Scale B — PERFORMANCE (descriptive framing)
       acceptable      → on-track   (green)
       low             → emerging   (amber)
       very low        → concern    (red)

     Always pair colour with text label; never colour alone.
     ============================================================ */
  --risk-on-track:     #2E7D5B;  /* darkened green — passes WCAG AA on white */
  --risk-on-track-bg:  #E3F1E9;
  --risk-on-track-fg:  #1B4D38;

  --risk-emerging:     #C97A1F;  /* amber leaning warm — distinguishable from green/red for deuteranopia */
  --risk-emerging-bg:  #FBEBD3;
  --risk-emerging-fg:  #6E3F0D;

  --risk-concern:      #C5283D;  /* measured red, not alarming neon */
  --risk-concern-bg:   #F8DCDF;
  --risk-concern-fg:   #6E1422;

  /* ============================================================
     NEUTRAL SCALE
     Warm-tinted (very slight purple cast pulled from Aubergine)
     so neutrals feel of-a-piece with the brand palette.
     ============================================================ */
  --ink-0:   #FFFFFF;
  --ink-50:  #FAF9FC;
  --ink-100: #F2F0F6;
  --ink-150: #E8E5EE;
  --ink-200: #DAD5E2;
  --ink-300: #BDB6C9;
  --ink-400: #948CA6;
  --ink-500: #6F6783;
  --ink-600: #534B66;
  --ink-700: #3C354C;
  --ink-800: #28233A;
  --ink-900: #1B1729;

  /* ============================================================
     SEMANTIC SURFACE / TEXT TOKENS
     Use these in product UI; reserve raw brand colours for
     identity moments (logos, headers, accents).
     ============================================================ */
  --bg-page:        var(--ink-50);
  --bg-surface:     var(--ink-0);
  --bg-sunken:      var(--ink-100);
  --bg-hover:       var(--ink-100);
  --bg-pressed:     var(--ink-150);

  --fg-1:           var(--ink-900);   /* primary text */
  --fg-2:           var(--ink-700);   /* secondary text */
  --fg-3:           var(--ink-500);   /* tertiary / meta */
  --fg-4:           var(--ink-400);   /* disabled / hint */
  --fg-on-dark:     var(--ink-0);

  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  --accent:         var(--enssa-teal);     /* primary action — research/teacher UI */
  --accent-fg:      var(--ink-0);
  --accent-hover:   #00897A;
  --accent-pressed: #006F63;

  --accent-warm:    var(--enssa-magenta);  /* identity accent in research/briefing */

  /* Year-1 screener accent — the warmer, friendlier identity colour
     used inside the child-facing tablet experience. */
  --kid-accent:     var(--enssa-purple);
  --kid-accent-bg:  #EFE8F3;
  --kid-accent-on:  var(--ink-0);

  /* ============================================================
     TYPOGRAPHY
     Calibri (per spec) → Lato (Google Fonts substitute).
     System stack as fallback. No serif in the brand.
     ============================================================ */
  --font-sans: 'Lato', 'Calibri', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);  /* same family, heavier weight + tracking */

  /* Type scale — based on a 1.2 minor-third with 16px body.
     Body should never go below 12pt (≈16px) in print outputs. */
  --fs-12: 0.75rem;    /* 12px — meta/caption only */
  --fs-14: 0.875rem;   /* 14px — small UI */
  --fs-16: 1rem;       /* 16px — body */
  --fs-18: 1.125rem;   /* 18px — comfortable body */
  --fs-20: 1.25rem;    /* 20px — lead / large body */
  --fs-24: 1.5rem;     /* 24px — h4 */
  --fs-30: 1.875rem;   /* 30px — h3 */
  --fs-36: 2.25rem;    /* 36px — h2 */
  --fs-48: 3rem;       /* 48px — h1 */
  --fs-64: 4rem;       /* 64px — display / kid screen prompts */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-display: -0.01em;
  --tracking-heading: 0;
  --tracking-allcaps: 0.08em;   /* per spec: HEADINGS in all caps when ≤5–6 words */
  --tracking-body:    0;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ============================================================
     RADII — modest. Brand reads as rigorous, so no big pills
     except in the kid-facing tablet UI where targets are pillish.
     ============================================================ */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-pill:  999px;

  /* ============================================================
     SHADOWS — soft, warm (tinted with aubergine), single layer.
     Avoid heavy stacked drop shadows.
     ============================================================ */
  --sh-1: 0 1px 2px rgba(50, 43, 68, 0.06);
  --sh-2: 0 2px 6px rgba(50, 43, 68, 0.08), 0 1px 2px rgba(50, 43, 68, 0.04);
  --sh-3: 0 8px 20px rgba(50, 43, 68, 0.10), 0 2px 4px rgba(50, 43, 68, 0.05);
  --sh-4: 0 16px 40px rgba(50, 43, 68, 0.14), 0 4px 8px rgba(50, 43, 68, 0.06);
  --sh-focus: 0 0 0 3px rgba(0, 159, 138, 0.35);  /* teal focus ring */

  /* ============================================================
     MOTION — subtle. No bounces. This is a measurement tool.
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* enter / move */
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);   /* focused entry */
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Touch targets — tablet & Year-1 use */
  --touch-min: 44px;
  --touch-kid: 88px;   /* large pill targets for 6-year-olds */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via class names; do NOT rely on bare HTML tag styling
   inside React components.
   ============================================================ */

.font-sans   { font-family: var(--font-sans); }
.font-mono   { font-family: var(--font-mono); }

.h1, h1.enssa, .display {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  font-weight: 900;
  color: var(--fg-1);
  text-wrap: balance;
}

.h2, h2.enssa {
  font-family: var(--font-sans);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  font-weight: 900;
  color: var(--fg-1);
  text-wrap: balance;
}

.h3, h3.enssa {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
}

.h4, h4.enssa {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: 700;
  color: var(--fg-1);
}

/* Per spec: short headings (≤5–6 words) appear in ALL CAPS with
   tracking; longer headings stay sentence case. */
.eyebrow, .allcaps {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
  color: var(--fg-2);
}

.heading-allcaps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-allcaps);
}

.body, p.enssa {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--fg-2);
  font-weight: 400;
}

.caption, .meta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.code, code.enssa {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* Risk pill — semantic, label-first. */
.risk-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 700;
  padding: 4px 10px 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.risk-pill::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.risk-pill[data-risk="on-track"]  { color: var(--risk-on-track-fg);  background: var(--risk-on-track-bg);  border-color: color-mix(in oklab, var(--risk-on-track) 30%, transparent); }
.risk-pill[data-risk="emerging"]  { color: var(--risk-emerging-fg);  background: var(--risk-emerging-bg);  border-color: color-mix(in oklab, var(--risk-emerging) 30%, transparent); }
.risk-pill[data-risk="concern"]   { color: var(--risk-concern-fg);   background: var(--risk-concern-bg);   border-color: color-mix(in oklab, var(--risk-concern)  30%, transparent); }

/* Performance-scale aliases — same colours, different label set.
   Use [data-perf] when showing the performance vocabulary;
   [data-risk] when showing the at-risk vocabulary. */
.risk-pill[data-perf="acceptable"] { color: var(--risk-on-track-fg);  background: var(--risk-on-track-bg);  border-color: color-mix(in oklab, var(--risk-on-track) 30%, transparent); }
.risk-pill[data-perf="low"]        { color: var(--risk-emerging-fg);  background: var(--risk-emerging-bg);  border-color: color-mix(in oklab, var(--risk-emerging) 30%, transparent); }
.risk-pill[data-perf="very-low"]   { color: var(--risk-concern-fg);   background: var(--risk-concern-bg);   border-color: color-mix(in oklab, var(--risk-concern)  30%, transparent); }