/* ============================================================
   Bloom — marketing site skins
   assets/css/site-brand.css

   Loaded by home.html, enroll.html and the seven educator pages,
   after each page's own <style>. Each page keeps its Meadow tokens
   as :root (that is v1). This file adds the other skins, keyed on
   the data-brand attribute the Netlify head snippet stamps on
   <html> from site_settings.brand:

     v1  Meadow                     page's own :root, nothing here
     v2  Brand System v2, palette   tokens + Fraunces statements
     v3  Brand System v2, design    v2 + the Staffroom components
     v4  Bloom Bright               navy, coral, five hues, Nunito

   Two token vocabularies exist on the site. enroll.html and the
   educator pages use the Meadow names (--paper, --leaf, --f-display).
   home.html was rebuilt on the Bright names (--navy, --off, --teal-x)
   and aliases the Meadow ones onto them. Every skin below sets BOTH
   sets, so any page reads the right value whichever names it uses.
   Unused tokens cost nothing.

   The class app has its own copy of each skin in style.css.
   Full systems: claude/Bloom_Brand_System_v2.html and
   claude/Bloom_Site_Style_Sheet_v2.html in the Bloom project.
   ============================================================ */


/* ============================================================
   v2 + v3 · Brand System v2 tokens
   Warm oat paper, morning green, five families at three steps,
   Fraunces for statements, Figtree for everything a teacher reads.
   ============================================================ */
[data-brand="v2"],
[data-brand="v3"] {
  /* ---- Meadow names ---- */
  --paper: #FBF7F1; --paper-shade: #F2EBE0; --card: #FFFFFF;
  --ink: #1E2A24; --ink-soft: #55635B; --line: rgba(30, 42, 36, .14);
  --leaf: #3E9E6A; --leaf-deep: #1F6B45;
  --coral: #E4694A; --coral-deep: #A93C25;
  --sunny: #F5B62E; --sunny-deep: #8A5D00;
  --sky: #3E9BD0; --sky-deep: #1A6892;
  --violet: #7E68CD; --violet-deep: #5A44A8;
  --blush: #FBDCD2;
  --midnight: #123326; --midnight-2: #1C4A36;          /* forest, not night sky */
  --action: var(--leaf-deep); --action-text: #FFFFFF; --action-hover: #185737;
  --r-s: 8px; --r-m: 14px; --r-l: 18px; --r-pill: 999px;
  --shadow: 0 2px 0 rgba(30, 42, 36, .10); --shadow-press: 0 1px 0 rgba(30, 42, 36, .10);
  --t-tap: 180ms; --t-move: 240ms;
  --bounce: cubic-bezier(.2, .6, .3, 1);                /* calm: nothing bounces */
  --f-display: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --f-learn: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --f-brand: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ---- Bright names (home.html) ---- */
  --navy: var(--midnight); --slate: var(--ink-soft);
  --off: var(--paper); --off-2: var(--paper-shade); --mist: #9BB0A4;
  --coral-d: var(--coral-deep);
  --teal: #3E9E6A;   --teal-l: #CFE9D8;   --teal-x: #E4F1E8;
  --purple: #7E68CD; --purple-l: #E1D9F7; --purple-x: #EEE9F8;
  --orange: #F5B62E; --orange-l: #FDE8BE; --orange-x: #FBF0DA;
  --green: #3E9E6A;  --green-l: #CFE9D8;  --green-x: #E4F1E8;
  --blue: #3E9BD0;   --blue-l: #D3E8F5;   --blue-x: #E8F2F9;
  --sweep: 0px;
  --sh-sticker: 0 2px 0 rgba(30, 42, 36, .10);
  --sh-float: 0 8px 22px rgba(30, 42, 36, .20);

  /* ---- home.html semantic tokens ---- */
  --w-h1: 600; --w-h2: 600; --w-h3: 800; --ls-display: -.015em; --lh-display: 1.08;
  --hero-bg: var(--paper); --hero-text: var(--ink); --hero-sub: var(--ink-soft); --hero-link: var(--leaf-deep);
  --deep-bg: var(--midnight); --deep-text: #E8EFE9; --deep-mute: #9BB0A4; --deep-accent: #7FD3A3;
  --night-bg: var(--midnight);
  --tint-a: #E4F1E8; --tint-b: #EEE9F8; --tint-c: #FBF0DA; --tint-d: #E4F1E8; --tint-e: #E8F2F9;
  --card-border: 1px solid var(--line);
  --eyebrow: var(--ink-soft);
  --link: var(--leaf-deep);
  --nav-bg: rgba(251, 247, 241, .94); --nav-rule: 1px solid var(--line);
  --tile: #FFFFFF; --tile-a: #FFFFFF; --tile-b: #FFFFFF; --tile-c: #FFFFFF;
  --foot-bg: transparent; --foot-text: var(--ink-soft); --foot-mark: var(--ink);
}

/* Statements in Fraunces, at both v2 and v3. Everything else stays
   Figtree; the page's own h3 rule already reads --f-display. */
[data-brand="v2"] h1, [data-brand="v2"] h2,
[data-brand="v3"] h1, [data-brand="v3"] h2 {
  font-family: var(--f-brand);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
[data-brand="v2"] .logo, [data-brand="v3"] .logo {
  font-family: var(--f-brand); font-weight: 600; font-size: 30px; letter-spacing: 0;
  font-variation-settings: 'SOFT' 50;
}
[data-brand="v2"] .motto, [data-brand="v3"] .motto,
[data-brand="v2"] .saying .q, [data-brand="v3"] .saying .q,
[data-brand="v2"] .wkcard .disc, [data-brand="v3"] .wkcard .disc {
  font-family: var(--f-brand); font-weight: 600; font-variation-settings: 'SOFT' 40;
}
[data-brand="v2"] footer, [data-brand="v3"] footer { background: var(--foot-bg); color: var(--foot-text); }
[data-brand="v2"] .btn-hero, [data-brand="v3"] .btn-hero,
[data-brand="v2"] .nav-enroll, [data-brand="v3"] .nav-enroll {
  background: var(--action); color: var(--action-text);
}
/* on the forest band the primary is pale, never green on green */
[data-brand="v2"] .night .btn-gold, [data-brand="v3"] .night .btn-gold {
  background: var(--deep-text); color: var(--midnight);
}
[data-brand="v2"] .night .btn-gold:hover, [data-brand="v3"] .night .btn-gold:hover { background: #FFFFFF; }


/* ============================================================
   v3 · the Staffroom components
   Quiet rules instead of heavy borders, tracked eyebrows, square-ish
   solid buttons, a barely-there lift, nothing that moves much.
   ============================================================ */
[data-brand="v3"] body { font-family: var(--f-learn); font-size: 17px; line-height: 1.62; -webkit-font-smoothing: antialiased; }

[data-brand="v3"] nav { background: rgba(251, 247, 241, .94); border-bottom: 1px solid var(--line); }
[data-brand="v3"] .nav-guide { font-weight: 600; }

/* eyebrows: uppercase, tracked, the document's signature move.
   span.step, not .step: enroll.html uses .step for a whole section. */
[data-brand="v3"] span.step,
[data-brand="v3"] .phero .kicker,
[data-brand="v3"] .phero .crumb,
[data-brand="v3"] .card .badge,
[data-brand="v3"] .wcard .when,
[data-brand="v3"] .legc .lname,
[data-brand="v3"] .legc .doing .dl {
  font-family: var(--f-display); font-weight: 800;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
[data-brand="v3"] span.step { color: var(--eyebrow); }
[data-brand="v3"] .band-deep span.step, [data-brand="v3"] .dcard span.step { color: var(--deep-accent); }
[data-brand="v3"] .hero .btn-quiet { color: var(--hero-link); }
[data-brand="v3"] .night .btn-quiet, [data-brand="v3"] .band-deep .btn-quiet { color: var(--deep-accent); }
[data-brand="v3"] .phero .crumb { font-size: 12px; }

/* buttons: solid fill, 8px corners, no ink outline, no squash */
[data-brand="v3"] .btn {
  font-family: var(--f-display); font-weight: 600;
  border-radius: var(--r-s);
  box-shadow: none;
  transition: background var(--t-tap) var(--bounce), border-color var(--t-tap) var(--bounce);
}
[data-brand="v3"] .btn:hover { transform: none; }
[data-brand="v3"] .btn:active { transform: none; box-shadow: none; }
[data-brand="v3"] .btn-hero, [data-brand="v3"] .nav-enroll, [data-brand="v3"] .lcard .ebtn {
  background: var(--action); color: var(--action-text); border: 1.5px solid var(--action);
}
[data-brand="v3"] .btn-hero:hover, [data-brand="v3"] .nav-enroll:hover { background: var(--action-hover); border-color: var(--action-hover); }
[data-brand="v3"] .night .btn-gold { border: 1.5px solid var(--deep-text); }
[data-brand="v3"] .btn-second, [data-brand="v3"] .nav-login {
  background: transparent; color: var(--ink); border: 1.5px solid rgba(30, 42, 36, .30);
}
[data-brand="v3"] .night .btn-ghost { border: 1.5px solid var(--deep-mute); }
[data-brand="v3"] .btn-second:hover, [data-brand="v3"] .nav-login:hover { background: var(--paper-shade); }
[data-brand="v3"] .btn-quiet { color: var(--leaf-deep); text-decoration: underline; }
[data-brand="v3"] .wiggle:hover { animation: none; transform: none; }

/* cards: one hairline rule, a 2px lift, 14px corners */
[data-brand="v3"] .card,
[data-brand="v3"] .plan,
[data-brand="v3"] .wkcard,
[data-brand="v3"] .formcard,
[data-brand="v3"] .done,
[data-brand="v3"] .lcard,
[data-brand="v3"] .meter,
[data-brand="v3"] .wcard,
[data-brand="v3"] .tcard,
[data-brand="v3"] .ccard,
[data-brand="v3"] .legc,
[data-brand="v3"] .qcard {
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); background: var(--card);
}
[data-brand="v3"] .plan.on { border: 2px solid var(--leaf-deep); box-shadow: var(--shadow); }
[data-brand="v3"] a.card:hover, [data-brand="v3"] .plan:hover,
[data-brand="v3"] .tcard:hover, [data-brand="v3"] .ccard:hover, [data-brand="v3"] .legc:hover { transform: none; box-shadow: var(--shadow); background: var(--paper-shade); }
[data-brand="v3"] .chain span, [data-brand="v3"] .pill, [data-brand="v3"] .pn a {
  border: 1px solid var(--line); box-shadow: none; font-weight: 600;
}
[data-brand="v3"] .band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
[data-brand="v3"] .saying { background: var(--paper-shade); border-radius: var(--r-l); }

/* the deep register is a flat forest band, never a gradient */
[data-brand="v3"] .night { background: var(--midnight); border-radius: var(--r-l); }
[data-brand="v3"] .night .stars { display: none; }

/* forms: 4px inputs, one hairline */
[data-brand="v3"] .field input, [data-brand="v3"] .field textarea, [data-brand="v3"] .lcard input {
  border: 1px solid var(--line); border-radius: 4px; background: #FFFFFF;
}
[data-brand="v3"] .field input:focus, [data-brand="v3"] .field textarea:focus { outline: 3px solid var(--leaf-deep); outline-offset: 2px; border-color: var(--leaf-deep); }

/* editor chrome follows the ink */
[data-brand="v3"] .editbar { font-family: var(--f-display); }


/* ============================================================
   v4 · Bloom Bright
   Bloom navy is the anchor, coral is the only thing you press, five
   subject hues at three strengths, Nunito at every weight up to 900.
   Everything rounded: pill, 14, 28, 56, and the sweep where a band
   hands off to the next. No gradients, no card shadows, lift only.
   ============================================================ */
[data-brand="v4"] {
  /* ---- Meadow names ---- */
  --paper: #F9F8F2; --paper-shade: #EFEEE4; --card: #FFFFFF;
  --ink: #0A2537; --ink-soft: #3C505C; --line: rgba(10, 37, 55, .13);
  --leaf: #00C8B1; --leaf-deep: #00705F;
  --coral: #FF5454; --coral-deep: #C42F2F;
  --sunny: #FF8600; --sunny-deep: #A34F00;
  --sky: #0F8EB3; --sky-deep: #0A6B87;
  --violet: #8D6DEA; --violet-deep: #6B45D6;
  --blush: #B6ABFE;
  --midnight: #0F3550; --midnight-2: #0F3550;
  --action: var(--coral); --action-text: var(--ink); --action-hover: #FF6B6B;
  --r-s: 14px; --r-m: 28px; --r-l: 28px; --r-pill: 999px;
  --shadow: none; --shadow-press: none;
  --t-tap: 160ms; --t-move: 240ms;
  --bounce: cubic-bezier(.2, .7, .3, 1);
  --f-display: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --f-learn: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --f-brand: 'Nunito', ui-sans-serif, system-ui, sans-serif;

  /* ---- Bright names (home.html) ---- */
  --navy: #0F3550; --slate: #3C505C;
  --off: #F9F8F2; --off-2: #EFEEE4; --mist: #A9C6D6;
  --coral-d: #C42F2F;
  --teal: #00C8B1;   --teal-l: #91E7DC;   --teal-x: #E1FFF6;
  --purple: #8D6DEA; --purple-l: #B6ABFE; --purple-x: #F1E9FF;
  --orange: #FF8600; --orange-l: #FFAF57; --orange-x: #FDE9C5;
  --green: #11B753;  --green-l: #82DDA7;  --green-x: #DFF3C9;
  --blue: #0F8EB3;   --blue-l: #72D7F2;   --blue-x: #C8F4FF;
  --sweep: clamp(48px, 7vw, 120px);
  --sh-sticker: 0 6px 18px rgba(10, 37, 55, .10);
  --sh-float: 0 10px 30px rgba(10, 37, 55, .22);

  /* ---- home.html semantic tokens ---- */
  --w-h1: 900; --w-h2: 900; --w-h3: 800; --ls-display: -.025em; --lh-display: .99;
  --hero-bg: var(--navy); --hero-text: var(--off); --hero-sub: var(--off); --hero-link: var(--teal-l);
  --deep-bg: var(--navy); --deep-text: var(--off); --deep-mute: var(--mist); --deep-accent: var(--teal-l);
  --night-bg: var(--ink);
  --tint-a: var(--teal-x); --tint-b: var(--purple-x); --tint-c: var(--orange-x); --tint-d: var(--green-x); --tint-e: var(--blue-x);
  --card-border: none;
  --eyebrow: var(--coral-d);
  --link: var(--coral-d);
  --nav-bg: rgba(249, 248, 242, .94); --nav-rule: 1px solid var(--line);
  --tile: var(--off); --tile-a: var(--teal-x); --tile-b: var(--purple-x); --tile-c: var(--blue-x);
  --foot-bg: var(--ink); --foot-text: var(--mist); --foot-mark: var(--off);
}

[data-brand="v4"] body { font-family: var(--f-learn); font-size: 18px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
[data-brand="v4"] a { color: var(--coral-d); text-underline-offset: 3px; }
[data-brand="v4"] :focus-visible { outline: 3px solid var(--coral-d); outline-offset: 3px; border-radius: 4px; }

/* type: 900 headlines tracked tight, 800 column heads, sentence case */
[data-brand="v4"] h1, [data-brand="v4"] h2 { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; line-height: 1.03; text-transform: none; }
[data-brand="v4"] h1 { letter-spacing: -.025em; line-height: .99; }
[data-brand="v4"] h3 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }
[data-brand="v4"] .logo { font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -.035em; color: var(--ink); }
[data-brand="v4"] .motto { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
[data-brand="v4"] .saying .q { font-family: var(--f-display); font-weight: 700; font-style: italic; letter-spacing: -.015em; }
[data-brand="v4"] .wkcard .disc { font-family: var(--f-display); font-weight: 800; font-size: 16px; color: var(--leaf-deep); }

/* eyebrows: 800, tracked, coral deep */
[data-brand="v4"] span.step,
[data-brand="v4"] .phero .kicker,
[data-brand="v4"] .phero .crumb {
  font-family: var(--f-display); font-weight: 800;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
[data-brand="v4"] span.step { color: var(--eyebrow); }
[data-brand="v4"] .band-deep span.step, [data-brand="v4"] .dcard span.step { color: var(--deep-accent); }
[data-brand="v4"] .hero .btn-quiet { color: var(--hero-link); }
[data-brand="v4"] .night .btn-quiet, [data-brand="v4"] .band-deep .btn-quiet { color: var(--deep-accent); }
[data-brand="v4"] .phero .kicker { color: var(--off); }   /* sits on a deep hue (inline style) */

/* nav: off-white, one hairline, coral pill is the only heavy thing */
[data-brand="v4"] nav { background: rgba(249, 248, 242, .94); border-bottom: 1px solid var(--line); }
[data-brand="v4"] .nav-guide { font-weight: 700; }

/* buttons: pills, weight 800, lift on hover, no squash */
[data-brand="v4"] .btn {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -.005em;
  border-radius: var(--r-pill); box-shadow: none;
  transition: transform var(--t-tap) var(--bounce), background-color var(--t-tap);
}
[data-brand="v4"] .btn:hover { transform: translateY(-2px); }
[data-brand="v4"] .btn:active { transform: none; box-shadow: none; }
[data-brand="v4"] .btn-hero, [data-brand="v4"] .nav-enroll, [data-brand="v4"] .btn-gold, [data-brand="v4"] .lcard .ebtn, [data-brand="v4"] .editbar .ebtn.save {
  background: var(--coral); color: var(--ink); border: none;
}
[data-brand="v4"] .btn-hero:hover, [data-brand="v4"] .nav-enroll:hover, [data-brand="v4"] .btn-gold:hover { background: var(--action-hover); }
[data-brand="v4"] .btn-second, [data-brand="v4"] .nav-login {
  background: transparent; color: var(--ink); border: 2.5px solid var(--ink);
}
[data-brand="v4"] .btn-second:hover, [data-brand="v4"] .nav-login:hover { background: var(--paper-shade); }
[data-brand="v4"] .btn-quiet { color: var(--coral-d); font-weight: 800; text-decoration: underline; }
[data-brand="v4"] .wiggle:hover { animation: none; transform: translateY(-2px); }

/* cards: the tile. No border, no shadow, 28px corners. */
[data-brand="v4"] .card,
[data-brand="v4"] .plan,
[data-brand="v4"] .wkcard,
[data-brand="v4"] .formcard,
[data-brand="v4"] .done,
[data-brand="v4"] .lcard,
[data-brand="v4"] .plans-empty {
  border: none; border-radius: var(--r-m); box-shadow: none;
}
[data-brand="v4"] .card, [data-brand="v4"] .wkcard { background: var(--tint-a); }
[data-brand="v4"] .cards .card:nth-child(3n+2), [data-brand="v4"] .weeks .wkcard:nth-child(3n+2) { background: var(--tint-b); }
[data-brand="v4"] .cards .card:nth-child(3n+3), [data-brand="v4"] .weeks .wkcard:nth-child(3n+3) { background: var(--tint-e); }
[data-brand="v4"] .card p, [data-brand="v4"] .wkcard .story { color: var(--slate); }
[data-brand="v4"] .card .go { color: var(--coral-d); font-weight: 800; }
[data-brand="v4"] a.card { color: var(--ink); }
[data-brand="v4"] a.card:hover { transform: translateY(-3px); box-shadow: none; }
/* tiles inside a tinted band go off-white so they still read as tiles */
[data-brand="v4"] .band .cards .card { background: var(--off); }
[data-brand="v4"] .plan { background: #FFFFFF; border: 2.5px solid transparent; }
[data-brand="v4"] .plan.on { border-color: var(--navy); box-shadow: none; }
[data-brand="v4"] .plan.on .tick { background: var(--navy); border-color: var(--navy); }
[data-brand="v4"] .plan .save { background: var(--orange-l); color: var(--ink); }
[data-brand="v4"] .plan li::before, [data-brand="v4"] .plan .choose { color: var(--navy); }
[data-brand="v4"] .formcard, [data-brand="v4"] .done { background: #FFFFFF; }
[data-brand="v4"] .chain span, [data-brand="v4"] .pill, [data-brand="v4"] .pn a,
[data-brand="v4"] .wkcard .prac {
  border: none; box-shadow: none; background: var(--teal-l); color: var(--ink); font-weight: 800;
}
[data-brand="v4"] .pn a:hover { background: var(--teal); }
[data-brand="v4"] .band { background: var(--teal-x); border: none; }
[data-brand="v4"] .saying { background: var(--purple-l); border-radius: var(--r-m); }
[data-brand="v4"] .saying .who { color: var(--ink); font-weight: 800; }
[data-brand="v4"] .card .badge, [data-brand="v4"] .wkcard .num { font-family: var(--f-display); font-weight: 800; }

/* the deep register: flat ink, the Bright enrol panel */
[data-brand="v4"] .night { background: var(--ink); border-radius: var(--r-m); }
[data-brand="v4"] .night .stars span { opacity: .3; }
[data-brand="v4"] .night .btn-gold { background: var(--coral); color: var(--ink); }
[data-brand="v4"] .night a { color: var(--teal-l); }

/* forms: 14px inputs on off-white, no border, teal focus */
[data-brand="v4"] .field input, [data-brand="v4"] .field textarea, [data-brand="v4"] .lcard input {
  border: none; border-radius: var(--r-s); background: var(--paper);
}
[data-brand="v4"] .field input:focus, [data-brand="v4"] .field textarea:focus, [data-brand="v4"] .lcard input:focus { outline: 3px solid var(--teal-l); border-color: transparent; }
[data-brand="v4"] .field label, [data-brand="v4"] .lcard label { font-weight: 700; }
[data-brand="v4"] .step-h .num { background: var(--navy); }

/* editor chrome */
[data-brand="v4"] .editbar { font-family: var(--f-display); font-weight: 700; }
[data-brand="v4"] .editbar .ebtn.save { background: var(--teal-l); color: var(--ink); }
[data-brand="v4"] .toastbox { font-family: var(--f-display); }

/* footers: the sub-pages sit on off-white, home.html turns to ink via --foot-bg */
[data-brand="v4"] footer { background: var(--foot-bg); color: var(--foot-text); }
[data-brand="v4"] footer a { color: var(--foot-text); }
[data-brand="v4"] .motto { color: var(--foot-mark); }
[data-brand="v4"] .who .face { border-color: var(--off); box-shadow: none; }
[data-brand="v4"] .night .stars span { background: var(--off); }