/* Drewsky's English — design tokens. THE new canonical token layer (Nate's roadmap).
   Ratifies the design-system spec. New shell surfaces load ONLY this file and reference
   colour via var(--token) — raw #hex in a shell file fails test/tokens-tripwire.test.js.
   ⚠ Never co-load with legacy theme.css: it defines --ink/--paper/--card/--line/--gold
   with DIFFERENT values, and the later :root wins. theme.css is legacy, retired later. */
:root {
  /* ============ CORE ============ */
  --brand:      #2F6F4E;  /* primary actions, active states, Sam. The one green. */
  --brand-soft: #EDF3E4;  /* mission strips, tints, ghost-button fills */
  /* INK UNIFICATION (UI-alignment pass): primary text is the KAWAII ink #3A3230
     everywhere (kawaii doctrine: Ink #3A3230). The old cool navy ink is preserved
     as --ink-cool for surfaces that explicitly opt in (e.g. lesson-path --lp-ink2). */
  --ink:        #3A3230;  /* primary text — the one ink (kawaii doctrine) */
  --ink-cool:   #1E2A38;  /* legacy cool ink, explicit opt-in only */
  --muted:      #67738A;  /* secondary text, captions */
  --paper:      #FBF7EE;  /* page background (warm cream) */
  --lesson-reward-paper: #FBF7EE;   /* the lesson reward's paper (Codex's frames), whatever a page's --paper is */
  --card:       #FFFFFF;  /* cards sitting on --paper */
  --line:       #E7DFCC;  /* hairline borders */

  /* ============ ACCENTS ============ */
  --navy:       #28405C;  /* Business track identity; secondary buttons */
  --sand:       #F3E7C6;  /* chips, pills, stat badges */

  /* SHIMAGO LESSON REWARD STARS — founder exception, 2026-10-01.
     Warm gold is approved for earned lesson-star artwork and its brief glints.
     These tokens are consumed only by lesson-reward-stars.css; they are not UI
     accents, currency colours, or changes to --gold / --state-mastery below. */
  --shimago-reward-gold-light: #FFE89B;
  --shimago-reward-gold: #F8CC58;
  --shimago-reward-gold-shade: #E9AC35;
  --shimago-reward-gold-edge: #CB882B;
  --shimago-reward-outline: #795128;
  --shimago-reward-face: #624325;
  --shimago-reward-cream: #FFF7DE;
  --shimago-reward-shadow: #B69A73;

  /* ============ SKY (Today scene; matches the island's day/golden/night modes) ============ */
  --sky-day1:   #A8D4F5;  --sky-day2:  #D7EBF2;   /* morning/day sky (hub hobby scene sky) */
  --sky-gold1:  #F2B879;  --sky-gold2: #F9E4C8;   /* golden hour */
  --sky-night1: #1A2536;  --sky-night2:#3E5878;   /* night (business scene sky) */
  --sun:        #FFD23F;  /* sun disc / stars — decorative sky only, NOT the mastery gold */
  --cloud:      #FFFFFF;
  --grass1:     #A8CD96;  --grass2: #8DBB7C;   /* scene ground (hub hobby hills) */

  /* ============ KAWAII PASTELS (canonical; ui.css aliases these same names) ============ */
  --p1: #C9B6F2;  --p2: #FFD9E4;  --p3: #FFE9A8;  --p4: #BDE0FA;
  --gold:       #E0A82E;  /* mastery + island entry ONLY — see GOLD LAW below */
  /* TERRACOTTA LAW (split by usage plane):
       • as a SOLID CTA / button FILL  -> MONEY ONLY (booking, live lessons). Nowhere else.
       • as a track IDENTITY accent (headers, chips, tints, rules) -> TOEIC.
     So: a terracotta *button* means "spend money"; a terracotta *accent* means "TOEIC".
     Never a general-purpose fill. Route via --cta-money (buttons) or --track-toeic (identity). */
  --terracotta: #B8563C;

  /* ============ GOLD LAW (ruling b — tight leash) ============
     --gold / --state-mastery appears on EXACTLY TWO things, nowhere else, ever:
       (1) mastery states — mastered words, era-ups, achievements
       (2) the island's single entry button
     NOT decor, NOT currency UI, NOT active states, NOT CTAs.
     Mirrors CLAUDE.md's site law: gold #E0A82E = mastery only. */

  /* ============ SEMANTIC ALIASES (code uses THESE, never raw names) ============ */
  --cta-primary:    var(--brand);       /* primary action buttons */
  --cta-money:      var(--terracotta);  /* MONEY CTAs only — booking, live lessons (terracotta as a button fill) */
  --state-mastery:  var(--gold);        /* mastery only (see GOLD LAW) */
  --track-business: var(--navy);        /* Business track identity */
  --track-hobby:    var(--brand);       /* Hobby track identity (the primary green) */
  --track-toeic:    var(--terracotta);  /* TOEIC track identity accent — NOT as a CTA fill (see TERRACOTTA LAW) */

  /* ============ TYPE ============ */
  --font-display: 'Fredoka', system-ui, sans-serif;               /* display / headings */
  /* JP fallback is a REAL native JP stack (was 'Fredoka' — a Latin face, useless as JP fallback). */
  --font-jp:      'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic','Noto Sans JP',Meiryo,sans-serif;
  --font-body:    'Atkinson Hyperlegible', system-ui, sans-serif; /* body / UI text */
  --font-accent:  'Fraunces', Georgia, serif;                     /* editorial serif accent (heavily used) */
  --font-hand:    'Caveat', cursive;                              /* handwritten accent (heavily used) */

  --text-display: 26px;  /* page titles */
  --text-heading: 19px;  /* section headings */
  --text-body:    16px;  /* body / controls — 16px floor (Atkinson Hyperlegible; avoids iOS input zoom) */
  --text-caption: 12px;  /* captions, labels, meta */
  --lh-tight: 1.1;   /* display / headings */
  --lh-body:  1.55;  /* body copy */

  /* ============ MOTION (Kowalski doctrine: one enter curve, sub-200ms, exits faster) ============ */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.45, 0, .4, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --dur-press: 140ms; --dur-pop: 180ms; --dur-menu: 200ms; --dur-drawer: 280ms;

  /* ============ ELEVATION (one hard kawaii press-shadow + two soft tiers; was 247 ad-hoc shadows) ============ */
  --shadow-hard: 0 3px 0 rgba(58,50,48,.18);        /* kawaii offset press */
  --shadow-1:    0 3px 8px rgba(46,70,51,.08);       /* resting card */
  --shadow-2:    0 6px 16px rgba(46,70,51,.08);      /* raised / sheet */
  --shadow-pop:  0 8px 18px rgba(77,154,64,.35);     /* celebratory */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    600;

  /* ============ SPACING (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ============ RADIUS ============ */
  --radius-pill:    999px;  /* chips, pills, badges */
  --radius-card:    20px;   /* cards, sheets */
  --radius-control: 12px;   /* buttons, inputs, tiles */

  /* ============================================================
     ISLAND CAFÉ SKIN (v6 pixel law) — merged from drewsky-skin.css.
     The track/path pages (hobby/toeic/business/path) consume THESE
     --dw-* tokens. Source of truth: /reference/*.html. This is one
     file, one dialect (kept a distinct namespace from the shell
     tokens above so neither collides). These pages carry emoji per
     the references + kawaii doctrine, so they are NOT registered in
     test/tokens-tripwire.test.js (which bans emoji on shell files).
     ============================================================ */
  /* surfaces */
  --dw-bg:#F8EEE3;          /* warm paper — track-page background       */
  --dw-card:#FDF8F2;        /* card face                                */
  --dw-card-hi:#FFFDF9;     /* emphasized card / chip face              */
  --dw-line:#EADFCE;        /* hairline border                          */
  --dw-sand:#C9B693;        /* emphasized border (on-photo bars)        */
  /* GRASS — the island's largest surface, and therefore a SYSTEM colour.
     Founder ruling I3 (docs/island-rulings.md): the biggest surface in the
     product uses the design system, not a constant invented in a bake script.
     tools/island-terrain-bake.py READS these two values; it does not restate
     the hex, so the ramp can never drift from the system that owns it.
     A ramp, not a swatch: -hi is the key-lit top, the base is the body. */
  --dw-grass:#9DB057;       /* island ground body — RETARGETED 2026-08-10 to the
                               measured reference grass (S__23846948_0.jpg seeded
                               swatch: L*68.7 a*-20.3 b*43.0); table + command in
                               docs/island-art-bible.md §6                */
  --dw-grass-hi:#B9CC70;    /* island ground, key-lit                    */
  /* MASSING FAMILIES (1B-II step 4, founder-ruled): the ONE family palette for
     the island's procedural massing blocks (bridge, growth landmarks, town-hall
     6-8, and any building whose render is missing). Values are the family
     colours the shipped building art was authored in (gen-buildings PALETTE) —
     the system now owns them, the generator does not restate them. Face
     shading (top/left/right) is derived in-engine from ONE light; only the
     family base lives here. island-engine.js reads these at runtime with
     byte-equal fallbacks (test/massing.test.js pins the two lists together).
     NEVER gold — #E0A82E is mastery only. */
  --dw-fam-terra:#C87856;   /* homes                                     */
  --dw-fam-cream:#E0D6B8;   /* civic / landmarks                         */
  --dw-fam-navy:#405476;    /* offices / commerce towers                 */
  --dw-fam-ochre:#C98A4A;   /* shops / leisure                           */
  --dw-fam-wood:#966C42;    /* piers / bridges                           */
  --dw-fam-crop:#60965A;    /* fields / parks                            */
  /* ink */
  --dw-ink:#3A3230;         /* == --ink (kawaii ink); named for the dialect */
  --dw-muted:#8A7F70;
  /* accent — PER-TRACK via the existing body.track-* dial (Drew-ruled 2026-07-25).
     :root default is HOBBY (reference blue, as built); track overrides below.
     TERRACOTTA LAW stands unamended — TOEIC's accent IS terracotta here, which
     is the track identity, not a general-purpose fill. */
  --dw-accent:#2A74A8;      /* deep — continue bar, primary CTA (hobby default) */
  --dw-accent-mid:#3B78B4;  /* mid — active tabs, progress, halo               */
  --dw-accent-soft:#E4EEF6; /* wash — count pills, soft fills                  */
  --dw-progress:var(--dw-accent-mid);  /* module/lesson progress bar fill      */
  /* mastery gold — mastery contexts ONLY (jewel stars = mastery). The references
     dressed LOCK badges in soft-gold; Drew ruled that OUT (2026-07-25): a lock is
     the opposite of mastery, so the gold family may not touch it. Locks are
     neutral (.dw-lock below). No soft/line gold tokens exist — the exception is
     gone, GOLD LAW intact. This is the one deliberate deviation from pixel law. */
  --dw-gold:#E0A82E;
  /* elevation */
  --dw-sh:0 3px 10px rgba(90,70,50,.08);
  --dw-sh-lift:0 8px 22px rgba(70,50,30,.16);
  --dw-sh-onphoto:0 10px 26px rgba(60,42,25,.30);
  /* shape */
  --dw-r-card:20px;
  --dw-r-node:18px;
  --dw-r-pill:999px;
}

/* ---- per-track accent dial (Drew-ruled: scene-derived, routed through the
   EXISTING body.track-* mechanism; no new machinery). Hobby keeps the reference
   blue exactly. TOEIC = terracotta #B8563C (TERRACOTTA LAW: track identity);
   mid/soft are DERIVED tints (my judgment — flag for Drew's eye), and progress
   bars stay academy-green #2E5947 (reads calmer than terracotta-on-cream, per
   the ruling's "keep if they read well"). Business = existing steel-navy. ---- */
body.track-toeic{
  --dw-accent:#B8563C;        /* terracotta — track identity (TERRACOTTA LAW) */
  --dw-accent-mid:#C86B50;    /* derived mid terracotta */
  --dw-accent-soft:#F6E7E1;   /* derived terracotta wash */
  --dw-progress:#2E5947;      /* academy green — calmer progress bar (ruling judgment) */
}
body.track-business{
  --dw-accent:#28405C;        /* steel-navy — existing Business identity */
  --dw-accent-mid:#3A5578;    /* derived mid navy */
  --dw-accent-soft:#E6ECF3;   /* derived navy wash */
  --dw-progress:var(--dw-accent-mid);
}

/* ---- component recipes (class-per-component; markup in references) ---- */
.dw-card{background:var(--dw-card);border:1px solid var(--dw-line);
  border-radius:var(--dw-r-card);box-shadow:var(--dw-sh)}
.dw-pill{display:inline-block;background:var(--dw-card-hi);border:2px solid var(--dw-line);
  border-radius:var(--dw-r-pill);font-weight:700;box-shadow:var(--dw-sh),
  inset 0 -2.5px 0 rgba(150,120,70,.10)} /* dimensional bottom lip */
.dw-tabs{display:flex;background:var(--dw-card-hi);border:2.5px solid var(--dw-sand);
  border-radius:var(--dw-r-pill);padding:5px;box-shadow:var(--dw-sh-onphoto)}
.dw-tabs button{flex:1;border:0;background:none;font-family:inherit;font-weight:700;
  color:#8A8272;border-radius:var(--dw-r-pill);cursor:pointer}
.dw-tabs button.on{background:var(--dw-accent-mid);color:#FFF;
  box-shadow:0 2px 8px rgba(42,116,168,.4)}
.dw-cta{background:var(--dw-accent);color:#FFF;border:0;border-radius:22px;
  box-shadow:0 6px 16px rgba(42,116,168,.28);font-weight:700;cursor:pointer}
/* lock badge — NEUTRAL sand, never gold (Drew ruling: a lock is the opposite of
   mastery, so the gold family may not touch it). ONE recipe, all four surfaces;
   per-surface CSS adds only size/position. */
.dw-lock{background:var(--dw-card-hi);border:1px solid var(--dw-line);color:var(--dw-muted)}
.dw-grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>")}
/* the reduced-motion law: every decorative animation dies to a still */
@media (prefers-reduced-motion:reduce){
  .dw-anim{animation:none !important;transition:none !important}
}

/* ============================================================
   LESSON SKIN — founder wave A, 2026-09-03. Key frames:
   docs/keyframe/lesson/beat{1,3,6}-keyframe.png
   Every value here was RULED in the brief; the frames were sampled to confirm
   (navy #17335c–#233f64 vs #1f3a5f · cream #f4e9de–#f8ede2 vs #f4ecdd ·
   green #357854–#3a7d56 vs #3f7d4e — the ruled values sit inside the samples).
   The path is tokenised per track: --lesson-wash is the ONLY thing a second
   track overrides. NO GOLD APPEARS HERE, by rule.
   ============================================================ */
:root{
  --lesson-navy:#1f3a5f;            /* body */
  --lesson-navy-ink:#17335c;        /* text on cream */
  --lesson-wash:url(assets/img/lesson/wash-business.jpg);
  --lesson-wash-h:26%;              /* the scene band on interaction beats.
       MEASURED off the frames, not taken from the brief's 38%: beat3 is 26.0% and
       beat6 25.4% on the centre column, and the brief's single "~38%" reads as the
       midpoint of those and beat1's 55%. Beat 1's deeper, blurrier wash is its own
       pair of tokens below, used in wave B. */
  --lesson-wash-deep:url(assets/img/lesson/wash-business-deep.jpg);
  --lesson-wash-deep-h:55%;

  --lesson-cream:#f4ecdd;           /* panel / button / tile face */
  --lesson-rim:#cdbb95;             /* 1.5px rim */
  --lesson-bevel:#d8c9a9;           /* 0 6px 0 bevel */
  --lesson-hi:rgba(255,255,255,.65);/* 1px inner top highlight */
  --lesson-tray:#eae0cf;            /* recessed tray, 4% darker than cream */

  --lesson-green:#3f7d4e;           /* THE ONLY GREEN — primary button face */
  --lesson-green-bevel:#2f5f3a;

  --lesson-right:#e6f1e6;           /* transient correct */
  --lesson-wrong:#f3e3e1;           /* transient wrong */
  --lesson-sub:#6e6e6e;             /* grade sub-label */
  --lesson-tile:#fffdf6;            /* tile face — the frame reads #fffffb, brighter
                                       than the panel cream; a tile is lit, a panel is not */
  --lesson-used:#f6eade;            /* spent tile — the frame reads #f6eade: a SOLID,
       slightly warmer cream. The first pass used rgba(cream,.55), which over navy
       composited to a muddy blue-grey and read as disabled-broken rather than spent. */
  --lesson-used-ink:#a99e8c;

  --lesson-r-panel:22px; --lesson-r-btn:18px; --lesson-r-tile:14px;
  --lesson-tap:44px;                /* the floor, outranks one-screen */
}

/* ============================================================
   PLAYFUL CONTROLS — opt-in homepage template, 2026-09-28.
   Add sg-button to a real button/link; add --primary for learning actions.
   The --island mango variant is reserved for the single island-entry action
   under the existing island-entry exception; it is not a reward/mastery cue.
   A link wrapping a visual button uses sg-button-host on the link so press
   and keyboard focus reach the same face. Retain the native link/button
   behavior, accessible name and disabled/busy semantics on the real control.
   Future pages can opt in without changing existing lessons or game controls.
   ============================================================ */
.sg-button{
  --sg-face-top:#fffdf5;
  --sg-face-bottom:#f5e9cf;
  --sg-base:#b9a987;
  --sg-rim:#cdbf9e;
  --sg-ink:#214f43;
  --sg-gloss:rgba(255,255,255,.66);
  --sg-highlight:rgba(255,255,255,.9);
  --sg-shadow:rgba(20,70,66,.19);
  --sg-focus:#165e58;
  --sg-radius:22px;
  --sg-height:55px;
  --sg-depth:6px;
  --sg-press:4px;
  --sg-ease:cubic-bezier(.22,1.35,.4,1);
  box-sizing:border-box;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:44px;
  min-height:var(--sg-height);
  padding:12px 23px;
  border:1px solid var(--sg-rim);
  border-radius:var(--sg-radius);
  background:
    radial-gradient(ellipse 80% 65% at 50% -7%,var(--sg-gloss),transparent 82%),
    linear-gradient(180deg,var(--sg-face-top),var(--sg-face-bottom));
  color:var(--sg-ink);
  box-shadow:inset 0 2px 0 var(--sg-highlight),inset 0 -2px 0 rgba(255,255,255,.18),0 var(--sg-depth) 0 var(--sg-base),0 10px 16px var(--sg-shadow);
  font:inherit;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform 200ms var(--sg-ease),box-shadow 160ms ease,filter 160ms ease;
}
.sg-button--primary{
  --sg-face-top:#b3e7bb;
  --sg-face-bottom:#8cd5a2;
  --sg-base:#37806d;
  --sg-rim:#78bfa0;
  --sg-ink:#174f40;
}
.sg-button--island{
  --sg-face-top:#ffdc68;
  --sg-face-bottom:#ffc12e;
  --sg-base:#ce841b;
  --sg-rim:#e6b443;
  --sg-ink:#4c340c;
}
.sg-button--compact{
  --sg-height:44px;
  --sg-radius:16px;
  padding:9px 16px;
}
.sg-button--icon{
  --sg-height:44px;
  --sg-radius:16px;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  flex:none;
}
.sg-button:focus-visible,
.sg-button-host:focus-visible .sg-button{
  outline:3px solid var(--sg-focus);
  outline-offset:5px;
}
@media(hover:hover) and (pointer:fine){
  .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover,
  .sg-button-host:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
    transform:translateY(-1px);
    filter:brightness(1.025);
  }
}
.sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active,
.sg-button-host:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){
  transform:translateY(var(--sg-press)) scale(.985);
  box-shadow:inset 0 1px 2px rgba(30,61,43,.1),0 2px 0 var(--sg-base),0 4px 8px var(--sg-shadow);
  transition-duration:80ms;
  filter:none;
}
.sg-button:disabled,
.sg-button[aria-disabled="true"],
.sg-button-host:disabled .sg-button,
.sg-button-host[aria-disabled="true"] .sg-button{
  opacity:.55;
  filter:saturate(.5);
  cursor:not-allowed;
  transform:none;
}
.sg-button[aria-busy="true"],
.sg-button-host[aria-busy="true"] .sg-button{
  --sg-gloss:rgba(255,255,255,.3);
  cursor:progress;
  filter:saturate(.75);
  transform:none;
}
@media(prefers-reduced-motion:reduce){
  .sg-button{transition:none}
  .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover,
  .sg-button-host:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){transform:none}
  .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active,
  .sg-button-host:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active .sg-button:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]){transform:translateY(var(--sg-press))}
}