/* bucoo brand type system — one source of truth for the wordmark + type tokens. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Andika:wght@400;700&display=swap');
:root{
  --font-brand:'Fredoka',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-read:'Andika',-apple-system,'Segoe UI',sans-serif;
  /* Canonical page content width (R-0041). Every signed-in app / persona page centres its
     .wrap on this so pages read as one product; long-form (article) surfaces may go narrower. */
  --page-max:1080px;
}
/* The Bucoo wordmark is ALWAYS Fredoka, everywhere. */
.logo, .navlogo span, .footbrand span, .brand, .bn-logo{ font-family:var(--font-brand); }

/* Typography hygiene: never strand a single word on its own line.
   balance = even out heading line lengths; pretty = stop a lone last word in body copy.
   Progressive enhancement — browsers without support just wrap normally. */
h1, h2, h3, h4{ text-wrap:balance; }
p, li, blockquote, figcaption{ text-wrap:pretty; }

/* Canonical wordmark lockup — the SAME logo image + Fredoka wordmark on every page,
   so secondary pages match the home header exactly (no per-page favicon/dot variants). */
.navlogo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink,#1f2a3a); }
.navlogo img{ width:36px; height:36px; border-radius:11px; }
.navlogo span{ font-weight:600; font-size:24px; letter-spacing:-.02em; }

/* Active top-nav item — a Microsoft-style underline under the current page's link.
   Driven by class .here or aria-current="page"; the CTA button (.btn-try) is excluded.
   Uses ::after so there is zero layout shift regardless of each page's nav padding. */
.navlinks a.here, .navlinks a[aria-current="page"]{ color:var(--ink,#1f2a3a); font-weight:700; }
/* Stretch the active link to the full header height so its underline sits FLUSH with the
   bar's bottom border (the CTA button in the same row sets that height); the text stays
   vertically centred. bottom:-13px carries the bar down through the row's vertical padding
   onto the border on every page (±1px across the pages' 12–13px nav padding). */
.navlinks a.here:not(.btn-try), .navlinks a[aria-current="page"]:not(.btn-try){
  align-self:stretch; display:inline-flex; align-items:center; position:relative;
}
.navlinks a.here:not(.btn-try)::after,
.navlinks a[aria-current="page"]:not(.btn-try)::after{
  content:""; position:absolute; left:2px; right:2px; bottom:-13px; height:3px;
  border-radius:3px 3px 0 0; background:var(--blue,#2f6bff);
}
/* ===== consolidated design tokens — pass 2 (type scale) =====
   Only NEW token names live here (no page defines the fs-, r- or shadow- prefixed tokens),
   so nothing collides with a page's own CSS regardless of stylesheet load order. The
   System-B palette + the .btn/.badge component classes move here in pass 3. */
:root{
  /* 8-step type scale (pages migrate their font-sizes onto these) */
  --fs-caption:12px; --fs-sm:14px; --fs-body:16px; --fs-lead:18px;
  --fs-title:20px; --fs-h2:26px; --fs-h1:32px; --fs-display:clamp(32px,4vw,46px);
  /* Font-weight tokens (R-0041) — weight is a SIGNAL. Use these role-named tokens EVERYWHERE instead
     of hard-typing a number, so consistency is by construction, not by discipline (Matt, 2026-08-19).
     Roles: regular = body copy · medium = nav items / secondary labels / ghost controls ·
     semibold = buttons + emphasised labels · bold = headings + the active-state signal. */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  /* radius + shadow (adopted in pass 3) */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-raised:0 6px 18px rgba(31,42,58,.07);
  --shadow-floating:0 14px 34px rgba(31,42,58,.10);
  --shadow-pop:0 14px 38px rgba(20,40,80,.18);
  --shadow-glow:0 8px 18px rgba(255,106,90,.35);

  /* System-B palette (pass 3 — the single source; pages must not redeclare) */
  --blue:#2f6bff; --blue-d:#1f4fd0; --blue-50:#eef4ff;
  --ink:#1f2a3a; --muted:#5a6779; --line:#e3ebf7; --surface:#ffffff; --bg:#fbfdff;
  /* bright accents — fills behind icons, pills, illustration accents (NOT text on white) */
  --coral:#ff6a5a; --amber:#f59e0b; --green:#0f9d6f;
  --coral-100:#fff5ef; --amber-100:#fff8e6; --mint-100:#e7f8f1;
  /* contrast-safe variants — text on white, and CTA fills carrying white text */
  --coral-text:#cf3e29; --coral-text-d:#b8331f;
  --amber-text:#b45309;
  --green-text:#0c7a56;
}

/* ============================================================================
   Audience themes (R-0041 ext.) — one product, three audiences, one token source.
   The default :root above = PARENTS/TEACHERS (System-B cool-blue — the standard product UI).
   A surface opts into its audience by putting data-theme on <html>:
     data-theme="staff"  → admin · library (Book Studio) · voice (Sound Studio).
                           Dark-brown, professional/advanced. Always dark (not OS-driven).
     data-theme="child"  → the /read/ kid surface. Bigger type + hit targets, friendlier.
   `:root[data-theme=...]` (0,2,0) outranks a bare `:root` (0,1,0), so opting in wins over BOTH
   brand's default palette AND any legacy inline :root — no per-page re-assertion needed (this is
   the clean replacement for capture.html's hotfix). See [[feedback_bucoo_three_themes]].
   ============================================================================ */
:root[data-theme="staff"]{
  /* warm dark-brown ground + parchment ink (the approved Sound Studio look, made the default) */
  --bg:#1c1815; --surface:#26201b; --card:#26201b; --ink:#f3ece2; --muted:#b3a596; --line:#3a2f26;
  /* accent remapped cool→warm so brand components read coherently on the brown ground */
  --blue:#e8734a; --blue-d:#d15f38; --blue-50:#2a201a;
  --coral:#e8734a; --amber:#d9a441; --green:#3f8f7a;
  --coral-100:#2a201a; --amber-100:#2a2418; --mint-100:#1c2724;
  --coral-text:#f0a184; --amber-text:#e6b35a; --green-text:#7fc9b6;
  /* sound-studio page tokens — so the voice/Sound Studio family adopts by attribute alone */
  --ac:#e8734a; --ok:#3f8f7a; --rec:#c0392b; --sel:rgba(232,115,74,.22); --lane:#221d18; --word:#8a97e6;
  /* deeper shadows for the dark ground */
  --shadow-raised:0 6px 18px rgba(0,0,0,.35);
  --shadow-floating:0 14px 34px rgba(0,0,0,.45);
  --shadow-pop:0 14px 38px rgba(0,0,0,.5);
}
:root[data-theme="child"]{
  /* keep the friendly cool palette; scale type + radius up for young readers (bigger, simpler) */
  --fs-caption:14px; --fs-sm:16px; --fs-body:19px; --fs-lead:22px;
  --fs-title:24px; --fs-h2:30px; --fs-h1:38px; --fs-display:clamp(38px,5vw,56px);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
}

/* ===== shared button base (pass 3) =====
   One height/radius/weight for every button; variants differ by colour only (R-0041 / DESIGN.md). */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box; height:44px; padding:0 22px; border-radius:6px;
  border:1.5px solid transparent; font-family:var(--font-body); font-weight:var(--fw-semibold,600);
  font-size:var(--fs-body); line-height:1; text-decoration:none; cursor:pointer;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.btn-lg{ height:50px; padding:0 28px; font-size:var(--fs-lead); }
.btn-coral{ background:var(--coral-text); color:#fff; box-shadow:var(--shadow-glow); }
.btn-coral:hover{ background:var(--coral-text-d); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--blue-d); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-d); }
.btn-blue{ background:var(--blue); color:#fff; }
.btn-blue:hover{ background:var(--blue-d); color:#fff; }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue-d); }
/* P3-01: the SPACE-separated modifier classes the app pages actually use (class="btn coral" etc.),
   unified here as the single source — brand.css loads after every page's inline <style>, so these win
   over the per-page copies that had drifted. The base .btn above already unifies size/radius/weight;
   these just canonicalise the colours (System-B tokens, with fallbacks for pages that predate them). */
.btn.coral{ background:var(--coral,#ff6a5a); color:#fff; border-color:transparent; }
.btn.coral:hover{ background:var(--coral-d,#f4663f); color:#fff; }
.btn.mint{ background:var(--mint,#0f9d6f); color:#fff; border-color:transparent; }
.btn.mint:hover{ filter:brightness(.96); }
.btn.blue,.btn.primary{ background:var(--blue,#2f6bff); color:#fff; border-color:transparent; }
.btn.blue:hover,.btn.primary:hover{ background:var(--blue-d,#1f4fd0); color:#fff; }
.btn.ghost{ background:#fff; color:var(--blue-d,#1f4fd0); border-color:var(--line,#e3ebf7); }
.btn.ghost:hover{ border-color:var(--blue,#2f6bff); color:var(--blue-d,#1f4fd0); }
.btn.sm{ height:36px; padding:0 12px; font-size:var(--fs-sm,14px); }
.btn.block{ width:100%; }
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:not-allowed; }