/* ============================================================================
   Black Belt design tokens
   ----------------------------------------------------------------------------
   Import this file and style through the variables. Never hardcode a colour,
   gap, radius or duration in a component.

   THREE THEMES, set on <html data-dojo-theme="...">:
     dojo-dark    white → brown   (default)
     dojo-light   black belt      (the lights come on)
     dojo-legacy  red belt        (secret post-black-belt mode)

   BELT COLOUR, set on <html data-belt="...">:
     each belt supplies --belt (fills, glow) and --belt-ink (text, borders)

   SWAP LIST for Luke — everything else can stay:
     · --font-display        pick your display face
     · the nine --belt-* pairs in each theme block
     · --accent / --accent-2 if you want a brand hue distinct from belt colour
   ========================================================================== */

/* ── fonts ────────────────────────────────────────────────────────────── */
/* Lexend is the default body face on purpose: it was designed to improve
   reading proficiency, and these apps are used by boys with decoding
   difficulty. Substitute the DISPLAY face freely; think hard before
   substituting the body face. */
/* fonts are linked from each page (kit/fonts) */

:root {
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
  /* Numbers wear the body face (Luke, 19 Sep: no monospace anywhere in the
     app). The token stays so digits still opt into tabular figures where
     they line up; it just no longer means a different face. */
  --font-num:     "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;

  /* type scale — 1.25 ratio, do not interpolate */
  --t-xs:   0.75rem;   /* 12 — labels, eyebrows */
  --t-sm:   0.875rem;  /* 14 — secondary */
  --t-base: 1rem;      /* 16 — UI default */
  --t-md:   1.125rem;  /* 18 — reading passages */
  --t-lg:   1.375rem;  /* 22 — section heads */
  --t-xl:   1.75rem;   /* 28 — screen titles */
  --t-2xl:  2.25rem;   /* 36 — stat numbers */
  --t-3xl:  2.875rem;  /* 46 — belt ceremony */

  --lh-tight: 1.15;
  --lh-body:  1.6;
  --lh-read:  1.75;    /* reading passages only — more air between lines */
  --measure:  62ch;    /* reading passage max width */

  /* spacing — 4px base. nothing between these steps. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;

  /* radius by role, not by habit
     md/lg recalibrated against antigravity.google's control/card radii
     (10px / 16px) — same graduated-scale idea, slightly more considered. */
  --r-sm:   4px;    /* chips, tags, inline marks */
  --r-md:   10px;   /* buttons, inputs */
  --r-lg:   16px;   /* cards, panels */
  --r-full: 999px;  /* pills, avatars, progress tracks */

  /* motion — a boy sees these hundreds of times. fast, or it reads as sluggish. */
  --motion-fast: 150ms;   /* hover, focus, toggle */
  --motion-base: 220ms;   /* screen and panel transitions */
  --motion-slow: 420ms;   /* belt ceremony ONLY */
  --motion-reveal: 1400ms; /* a gauge filling with his numbers — data arriving, not UI moving */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --belt-glow-alpha: 0.12;
  --border: 1px solid var(--rule);
}

/* ============================================================================
   THEME · dojo-dark — white through brown belts. The default.
   ========================================================================== */
:root,
:root[data-dojo-theme="dojo-dark"] {
  --ground:    #0E0E13;
  --surface:   #16161D;
  --surface-2: #1E1E27;
  --ink:       #ECEAF0;
  --ink-2:     #B6B4C2;
  --muted:     #7E7C8C;
  --rule:      #2A2A35;
  --rule-2:    #3A3A47;

  --accent:    #8D85DD;
  --accent-2:  #A9A2F0;

  --good:      #6FC08C;
  --warn:      #D9A24E;
  --crit:      #E58170;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.8);
  --belt-glow-alpha: 0.12;
}

/* Safety net: if a belt is ever unset, fall back to the accent rather than
   rendering transparent. A missing --belt should look wrong in review, not
   invisible in production. Sits before the pairs so any pair outranks it. */
:root { --belt: var(--accent); --belt-ink: var(--accent-2); }

/* Belt pairs on the dark ground. --belt-ink is the readable one.
   Matched on any element, not only the root: the page wears the boy's belt
   on <html>, and a roster of boys wears one belt per row. Black and red
   only have a dark-ground pair for that roster — a boy at those belts is
   always in the light or legacy theme, whose pairs below outrank these. */
[data-belt="white"]  { --belt:#F2F0E8; --belt-ink:#FFFFFF; }
[data-belt="yellow"] { --belt:#E8C437; --belt-ink:#F4D45E; }
[data-belt="orange"] { --belt:#DD8127; --belt-ink:#F29B4D; }
[data-belt="green"]  { --belt:#3F8A4E; --belt-ink:#68B87A; }
[data-belt="blue"]   { --belt:#2A6AA8; --belt-ink:#5B9BD8; }
[data-belt="purple"] { --belt:#6A4A9C; --belt-ink:#A186D6; }
[data-belt="brown"]  { --belt:#7A5233; --belt-ink:#BC8B5E; }
[data-belt="black"]  { --belt:#24242C; --belt-ink:#CFCDD8; }
[data-belt="red"]    { --belt:#B32D20; --belt-ink:#EF6A57; }

/* ============================================================================
   THEME · dojo-light — BLACK BELT ONLY. The lights come on.
   The single biggest visual reward in the product. Do not use it anywhere else.
   ========================================================================== */
:root[data-dojo-theme="dojo-light"] {
  --ground:    #F4F3F0;
  --surface:   #FFFFFF;
  --surface-2: #EAE8E3;
  --ink:       #16161D;
  --ink-2:     #3E3E4A;
  --muted:     #6D6B7A;
  --rule:      #DEDCD6;
  --rule-2:    #C7C5BE;

  --accent:    #3A3580;
  --accent-2:  #5F58B8;

  --good:      #2F6B45;
  --warn:      #8A5A12;
  --crit:      #97301F;

  --shadow: 0 1px 2px rgba(26,26,34,.06), 0 8px 28px -16px rgba(26,26,34,.24);
  --belt-glow-alpha: 0.10;
}

/* Black belt on the light ground — the pair inverts. */
:root[data-dojo-theme="dojo-light"][data-belt="black"] { --belt:#24242C; --belt-ink:#16161D; }

/* ============================================================================
   THEME · dojo-legacy — RED BELT. Secret, unlocked after the final boss.
   Dark again, but deeper and warmer than dojo-dark, so it reads as earned
   rather than as a reversion.
   ========================================================================== */
:root[data-dojo-theme="dojo-legacy"] {
  --ground:    #0A0708;
  --surface:   #141011;
  --surface-2: #1C1617;
  --ink:       #F2EAEA;
  --ink-2:     #C4B4B4;
  --muted:     #8A7878;
  --rule:      #2E2224;
  --rule-2:    #402F31;

  --accent:    #E0523F;
  --accent-2:  #F07460;

  --good:      #6FC08C;
  --warn:      #D9A24E;
  --crit:      #F07460;

  --shadow: 0 1px 2px rgba(0,0,0,.6), 0 10px 34px -14px rgba(179,45,32,.4);
  --belt-glow-alpha: 0.16;   /* the secret mode glows a little harder */
}

:root[data-dojo-theme="dojo-legacy"][data-belt="red"] { --belt:#B32D20; --belt-ink:#EF6A57; }

/* ============================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);        /* always explicit — never inherit a ground */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* antigravity.google runs its headlines at ~450 weight even at 48px+ — quieter
   and more technical than a maxed-out display weight. Borrowing that
   restraint here: 600 instead of the browser's implicit ~700 bold. */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

/* Reading passages. The one place where line-height and measure are
   pedagogical settings rather than taste. */
.passage {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: var(--lh-read);
  max-width: var(--measure);
}

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* Sentence case, body face, a whisper of tracking — small size and muted
   colour already say "label" without shouting in caps or borrowing the
   numeric face for a techy look. Mono is for digits only (see .num). */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* A text caret can only ever appear where a boy types. Everything else —
   buttons, passage words, cards — never shows one, even with the browser's
   caret-browsing mode (F7) switched on by accident. */
* { caret-color: transparent; }
input, textarea, [contenteditable] { caret-color: auto; }
button, a, label, .word { user-select: none; -webkit-user-select: none; }

/* Focus is always visible and always belt-coloured. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--belt-ink);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Wide content scrolls in its own container. The page body never does. */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* ── the ambient belt glow ─────────────────────────────────────────────── */
.belt-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Oversized so the pools have room to roll off-screen without a hard edge
     showing, and so the gradients read as weather, not as a spotlight. */
  inset: -40%;
  background:
    radial-gradient(45% 40% at 30% 35%, var(--belt) 0%, transparent 70%),
    radial-gradient(40% 35% at 70% 65%, var(--belt) 0%, transparent 70%);
  opacity: var(--belt-glow-alpha);
  animation: belt-drift 90s ease-in-out infinite;
}
/* A slow loop around the page — never the same corner twice in a row, and
   the scale breathes so it never looks like a slide. */
@keyframes belt-drift {
  0%   { transform: translate3d(  0%,  0%, 0) scale(1);    }
  25%  { transform: translate3d( 12%, -8%, 0) scale(1.06); }
  50%  { transform: translate3d(  4%, 10%, 0) scale(0.96); }
  75%  { transform: translate3d(-12%,  4%, 0) scale(1.04); }
  100% { transform: translate3d(  0%,  0%, 0) scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .belt-ambient { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}