/* ==========================================================================
   Penwick design system — tokens
   "Ink & Stave" · v2.0 · 21 Aug 2026

   The old site treated Penwick's material as PAPER: cream, quiet, editorial.
   This one treats it as INK — saturated, confident, the colour of the pen
   rather than the page. The four-line stave is the structural motif and the
   gold star is the reward accent, because those are the two things that
   actually exist in the product.

   Import this once. Everything else — landing page, /learn articles, the
   trainer, the store screenshots — reads from here.
   ========================================================================== */

/* --- faces ---------------------------------------------------------------
   Display  Gabarito   geometric-humanist, warm but crisp. Not Inter.
   Body     Figtree    excellent at 15–17px, neutral without being cold.
   Cursive  Edu NSW ACT Cursive — the app's OWN teaching letterform. Used for
            exactly one highlighted word per headline, never for running text.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"PenwickCursive";
  font-display:swap;
  src:url("/assets/fonts/EduNSWACTCursive.woff2") format("woff2"),
      url("/assets/fonts/EduNSWACTCursive.ttf") format("truetype");
}

:root{
  /* === Ink — primary ==================================================== */
  --pw-ink-900:#150F45;
  --pw-ink-800:#1D1559;
  --pw-ink-700:#241A6E;   /* deep ground for colour-blocked bands           */
  --pw-ink-600:#33249B;
  --pw-ink-500:#4432D4;   /* THE brand colour. Buttons, links, marks.       */
  --pw-ink-400:#6B5CE7;
  --pw-ink-300:#A79CF2;
  --pw-ink-200:#D9D3FB;
  --pw-ink-100:#EFECFE;
  --pw-ink-050:#F7F5FF;

  /* === Star — reward accent ============================================= */
  --pw-star-700:#8A5D00;  /* gold text on light, AA at any size             */
  --pw-star-600:#B87A00;
  --pw-star-500:#FFC53D;  /* fills, highlights, the star itself             */
  --pw-star-300:#FFDF95;
  --pw-star-100:#FFF3D6;

  /* === Sherbet — energy / attention ===================================== */
  --pw-coral-700:#A62E1D;
  --pw-coral-600:#B33320;
  --pw-coral-500:#FF6B57;
  --pw-coral-100:#FFE8E3;

  /* === Mint — secure / progress ========================================= */
  --pw-mint-700:#086554;
  --pw-mint-600:#07705D;
  --pw-mint-500:#12BFA0;
  --pw-mint-100:#DAF6F0;

  /* === Neutrals — biased violet, never a flat grey ====================== */
  --pw-page:#FBFAFF;
  --pw-card:#FFFFFF;
  --pw-sunken:#F3F1FC;
  --pw-line:#E7E4F5;
  --pw-line-strong:#CFC9E8;
  --pw-text:#16132E;
  --pw-body:#4C4767;
  --pw-muted:#6E6890;
  --pw-onDark:#F6F4FF;
  --pw-onDark-muted:#B6AEE4;

  /* === Semantic — the report's three levels, and only three ============= */
  --pw-secure:var(--pw-mint-600);
  --pw-secure-bg:var(--pw-mint-100);
  --pw-growing:var(--pw-star-700);
  --pw-growing-bg:var(--pw-star-100);
  --pw-start:var(--pw-coral-600);
  --pw-start-bg:var(--pw-coral-100);

  /* === Roles ============================================================ */
  --pw-bg:var(--pw-page);
  --pw-surface:var(--pw-card);
  --pw-surface-sunken:var(--pw-sunken);
  --pw-border:var(--pw-line);
  --pw-accent:var(--pw-ink-500);
  --pw-accent-hover:var(--pw-ink-600);
  --pw-accent-contrast:#FFFFFF;
  --pw-focus:var(--pw-ink-400);

  /* === Type ============================================================= */
  --pw-display:"Gabarito","Trebuchet MS",system-ui,-apple-system,sans-serif;
  --pw-sans:"Figtree","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --pw-cursive:"PenwickCursive","Edu NSW ACT Cursive",cursive;
  --pw-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;

  --pw-t-hero:clamp(2.75rem,6.4vw,5.125rem); /* 44 → 82  */
  --pw-t-d1:clamp(2.125rem,4.6vw,3.5rem);    /* 34 → 56  */
  --pw-t-d2:clamp(1.75rem,3.4vw,2.625rem);   /* 28 → 42  */
  --pw-t-h3:clamp(1.25rem,1.9vw,1.625rem);   /* 20 → 26  */
  --pw-t-h4:1.125rem;                        /* 18       */
  --pw-t-lead:clamp(1.0625rem,1.5vw,1.3125rem);
  --pw-t-body:1.0625rem;                     /* 17       */
  --pw-t-small:0.9375rem;                    /* 15       */
  --pw-t-label:0.75rem;                      /* 12       */

  --pw-lh-tight:0.98;
  --pw-lh-head:1.1;
  --pw-lh-body:1.65;
  --pw-tr-tight:-0.03em;
  --pw-tr-label:0.12em;

  /* === Space — 4px base ================================================= */
  --pw-1:0.25rem;  --pw-2:0.5rem;   --pw-3:0.75rem;  --pw-4:1rem;
  --pw-5:1.25rem;  --pw-6:1.5rem;   --pw-8:2rem;     --pw-10:2.5rem;
  --pw-12:3rem;    --pw-16:4rem;    --pw-20:5rem;    --pw-24:6rem;
  --pw-32:8rem;
  --pw-section:clamp(4rem,8vw,7.5rem);   /* vertical rhythm between sections */
  --pw-gutter:clamp(1.25rem,4vw,2.5rem);
  /* Content width. A hard 1200px is right at laptop sizes and wrong above
     them: on a very wide viewport the page becomes a narrow ribbon in a
     field of empty margin. 1440 still resolves to 1200, the approved value;
     wider screens breathe, with a ceiling so the measure stays readable. */
  --pw-max:clamp(1200px, 76vw, 1760px);
  --pw-measure:65ch;

  /* === Radius — generous. Nothing in this system is a sharp rectangle. == */
  --pw-r-chip:0.5rem;
  --pw-r-control:0.875rem;
  --pw-r-card:1.25rem;
  --pw-r-panel:1.75rem;
  --pw-r-band:2.5rem;
  --pw-r-device:2.25rem;
  --pw-r-pill:999px;

  /* === Elevation — shadows carry the ink hue, never neutral black ======= */
  --pw-sh-sm:0 2px 8px rgba(36,26,110,.06);
  --pw-sh-md:0 10px 28px rgba(36,26,110,.09);
  --pw-sh-lg:0 26px 60px rgba(36,26,110,.14);
  --pw-sh-pop:0 14px 34px rgba(36,26,110,.18);
  --pw-sh-onDark:0 24px 56px rgba(9,5,40,.42);

  /* === Motion =========================================================== */
  --pw-fast:140ms;
  --pw-base:220ms;
  --pw-slow:420ms;
  --pw-ease:cubic-bezier(.22,.68,.36,1);
  --pw-spring:cubic-bezier(.34,1.4,.5,1);
}

/* --- Dark ----------------------------------------------------------------
   Deep ink ground, not black. Star and mint carry the page; the 500 ink is
   too dark to sit on it, so the accent shifts up to 400/300.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --pw-bg:#100B33;
    --pw-surface:#1B1450;
    --pw-surface-sunken:#150F45;
    --pw-border:#2E2470;
    --pw-line:#2E2470;
    --pw-line-strong:#3F338C;
    --pw-text:#F6F4FF;
    --pw-body:#CFC8F2;
    --pw-muted:#9C93D4;
    --pw-accent:var(--pw-ink-300);
    --pw-accent-hover:#C3BAF8;
    --pw-accent-contrast:#150F45;
    --pw-focus:var(--pw-star-500);
    --pw-secure:#3DDCBB;
    --pw-secure-bg:#0C3B36;
    --pw-growing:var(--pw-star-500);
    --pw-growing-bg:#40300A;
    --pw-start:#FF8B7A;
    --pw-start-bg:#4A1C15;
    --pw-sh-sm:0 2px 8px rgba(0,0,0,.4);
    --pw-sh-md:0 10px 28px rgba(0,0,0,.45);
    --pw-sh-lg:0 26px 60px rgba(0,0,0,.55);
    --pw-sh-pop:0 14px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --pw-bg:#100B33;
  --pw-surface:#1B1450;
  --pw-surface-sunken:#150F45;
  --pw-border:#2E2470;
  --pw-line:#2E2470;
  --pw-line-strong:#3F338C;
  --pw-text:#F6F4FF;
  --pw-body:#CFC8F2;
  --pw-muted:#9C93D4;
  --pw-accent:var(--pw-ink-300);
  --pw-accent-hover:#C3BAF8;
  --pw-accent-contrast:#150F45;
  --pw-focus:var(--pw-star-500);
  --pw-secure:#3DDCBB;
  --pw-secure-bg:#0C3B36;
  --pw-growing:var(--pw-star-500);
  --pw-growing-bg:#40300A;
  --pw-start:#FF8B7A;
  --pw-start-bg:#4A1C15;
  --pw-sh-sm:0 2px 8px rgba(0,0,0,.4);
  --pw-sh-md:0 10px 28px rgba(0,0,0,.45);
  --pw-sh-lg:0 26px 60px rgba(0,0,0,.55);
  --pw-sh-pop:0 14px 34px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion:reduce){
  :root{--pw-fast:0ms;--pw-base:0ms;--pw-slow:0ms;}
}