/* ============================================================
   TalkMentor Ink — design tokens  v1.1  (2026.09.09)
   Single source of truth for the marketing site, the platform
   and the teaching materials.

   Rules
   1. Components read tokens only. Never redeclare a colour
      inside a @media or [data-theme] block — redeclare the
      TOKEN there instead, or the un-stamped "system" theme
      renders one theme's text on the other theme's ground.
   2. Every foreground/background pair that must move together
      has an --on-* partner. Use it.
   3. One marker gesture per composition.
   4. Three lesson roles: indigo = coach, teal = AI,
      marker = learner. One role per block, never mixed.
      Marker/teal are fills only; as text use the -deep pair.
   5. Every card on a LIGHT ground carries the cut corner
      (.tm-card / .tm-card--sm / .tm-card--lg). Controls, data cells
      and any plane on a dark ground never do. The one uncut light
      card is the ticket (the offer) — it is torn, not cut.
   6. Marketing CTA is marker; platform primary is indigo. A button
      is a control, so the CTA does not count as the marker gesture.

   Fonts (Google Fonts):
   Archivo:wght@500;600;700;800
   IBM+Plex+Sans:wght@400;500;600;700
   Courier+Prime:wght@400;700
   Noto+Sans+TC:wght@400;500;700;900
   Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400..600,0..1,0
   Icons: Material Symbols Rounded only — weight 500, filled;
   outlined cut (FILL 0) marks not-yet states.
   Chinese display: Noto Sans TC 900, letter-spacing 0 to +0.02em
   (never negative on Han glyphs), line-height >= 1.3.
   Neutrals are warm — paper and pencil, not screen grey.
   ============================================================ */

:root{
  /* — ground & surface — */
  --tm-desk:#F7F2E7;      /* ground behind document sheets     */
  --tm-sheet:#FFFFFF;     /* the sheet itself                  */
  --tm-wash:#FBF8F0;      /* card fill                          */
  --tm-paper:#FEFCF7;     /* table rows, field bodies on wash   */
  --tm-mist:#F4F0E5;      /* alternating band                  */

  /* — ink ramp — */
  --tm-ink:#26211A;       /* 16.3:1 on sheet — all body text   */
  --tm-ink-70:#57503F;    /*  7.6:1 — secondary prose          */
  --tm-ink-45:#837A66;    /*  3.8:1 — mono apparatus only      */
  --tm-ink-25:#C6BCA6;    /*  1.8:1 — carries NO meaning       */
  --tm-hair:#E9E3D4;      /* every 1px divider                 */
  --tm-rule:#26211A;      /* the one 2px anchor rule           */

  /* — the three voices — */
  --tm-brand:#2A48C4;     /*  7.1:1 on sheet                   */
  --tm-brand-deep:#1F3596;
  --tm-brand-wash:#E7EAFA;
  --tm-on-brand:#FFFFFF;
  --tm-marker:#FFDD57;    /* 12.2:1 with ink. Never text.      */
  --tm-marker-deep:#7D6000; /* learner as text on light, 5.9:1    */
  --tm-marker-wash:#FFF7DC;
  --tm-on-marker:#26211A;
  /* --- the three lesson roles --- */
  /* coach = --tm-brand (indigo). The platform speaks for the coach. */        /* AI assistant, 6.6:1 on white      */
  --tm-teal:#00C8B3;      /* AI fill — ink text, 7.5:1         */
  --tm-teal-deep:#0C7D72; /* AI as text on light, 4.7:1        */
  --tm-teal-wash:#DCF3EF;
  --tm-on-teal:#26211A;

  /* — semantic: measurement only, never decoration — */
  --tm-lv1:#E7EAFA;--tm-lv2:#CBD2F3;--tm-lv3:#A3AFE8; /* level ramp: */
  --tm-lv4:#7183D6;--tm-lv5:#4460CF;--tm-lv6:#22399F;  /* L1–L6 only  */
  --tm-on-lv-low:#26211A; --tm-on-lv-high:#FFFFFF;
  --tm-gain:#1E7A55;      /* 5.3:1 — positive delta            */
  --tm-drop:#B4443A;      /* 5.5:1 — negative delta, too hard  */

  /* — highlighter geometry (theme-dependent) — */
  --tm-mark-fg:#26211A;
  --tm-mark-pos:0 88%;
  --tm-mark-size:100% .42em;

  /* — inverted sheets inside a light document — */
  --tm-inv-sheet:#26211A;
  --tm-inv-text:#FFFFFF;
  --tm-inv-text-2:#D9CFBA;
  --tm-inv-hair:rgba(255,255,255,.16);

  /* — type —
     Latin face FIRST. Per-glyph fallback then sets Han from
     Noto Sans TC and everything else from Plex Sans. Reversed,
     Noto claims Latin punctuation too and its ' is a
     full-width CJK glyph. */
  --tm-f-display:"Archivo","Noto Sans TC",system-ui,sans-serif;
  --tm-f-body:"IBM Plex Sans","Noto Sans TC",system-ui,sans-serif;
  --tm-f-mono:"Courier Prime","Courier New",ui-monospace,monospace;
  /* lines the learner must say aloud — the dictionary serif */
  --tm-f-speech:ui-serif,"New York","Iowan Old Style",Georgia,"Noto Serif TC",serif;

  /* — space: 4px base — */
  --tm-s1:4px;  --tm-s2:8px;  --tm-s3:12px; --tm-s4:16px;
  --tm-s5:22px; --tm-s6:30px; --tm-s7:44px; --tm-s8:60px; --tm-s9:88px;

  /* — rule weights — */
  /* the card signature: one corner cut, bottom right.
     Size follows the plane: sm for small cards and step cards,
     default for cards and panels, lg for planes that hold a whole
     composition (hero panel, offer). Documents may step down one. */
  --tm-cut-sm:9px;
  --tm-cut:18px;
  --tm-cut-lg:28px;

  --tm-rule-anchor:2px;
  --tm-rule-hair:1px;
  --tm-rule-marker:3px;

  /* — layout — */
  --tm-wrap:1180px;
  --tm-sheet-a4:794px;
  --tm-gut:clamp(20px,5vw,56px);

  --tm-shadow:0 1px 2px rgba(38,33,26,.06), 0 10px 30px rgba(38,33,26,.09);
}

/* Dark = the logbook cover. Redeclare TOKENS ONLY.
   Guarded so an explicit light choice beats a dark OS. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tm-desk:#100D09;      --tm-sheet:#1B1712;
    --tm-wash:#221D16; --tm-paper:#282217;      --tm-mist:#282218;
    --tm-ink:#EFE9DC;       --tm-ink-70:#B5AB97;
    --tm-ink-45:#877D69;    --tm-ink-25:#57503F;
    --tm-hair:#3D362A;      --tm-rule:#EFE9DC;
    --tm-brand:#94A6F0;     --tm-brand-deep:#B8C4F8;
    --tm-brand-wash:#232A4A;--tm-on-brand:#0B1119;
    --tm-marker:#FFDD57;    --tm-marker-deep:#FFDD57;
    --tm-marker-wash:#2A2513; --tm-on-marker:#26211A;
    --tm-teal:#45D6C4;      --tm-teal-deep:#45D6C4;
    --tm-teal-wash:#113230; --tm-on-teal:#26211A;
    --tm-lv1:#232A4A;--tm-lv2:#2F3A66;--tm-lv3:#414F8E;
    --tm-lv4:#5A6BB8;--tm-lv5:#94A6F0;--tm-lv6:#C3CDFA;
    --tm-on-lv-low:#EFE9DC; --tm-on-lv-high:#26211A;
  --tm-gain:#5FD3A0;      --tm-drop:#FF8A7A;
    --tm-mark-fg:#26211A;   --tm-mark-pos:0 0;
    --tm-mark-size:100% 100%;
    --tm-inv-sheet:#0B0906; --tm-inv-text:#FFFFFF;
    --tm-inv-text-2:#D9CFBA;--tm-inv-hair:rgba(255,255,255,.14);
    --tm-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --tm-desk:#100D09;      --tm-sheet:#1B1712;
  --tm-wash:#221D16; --tm-paper:#282217;      --tm-mist:#282218;
  --tm-ink:#EFE9DC;       --tm-ink-70:#B5AB97;
  --tm-ink-45:#877D69;    --tm-ink-25:#57503F;
  --tm-hair:#3D362A;      --tm-rule:#EFE9DC;
  --tm-brand:#94A6F0;     --tm-brand-deep:#B8C4F8;
  --tm-brand-wash:#232A4A;--tm-on-brand:#0B1119;
  --tm-marker:#FFDD57;    --tm-marker-deep:#FFDD57;
  --tm-marker-wash:#2A2513; --tm-on-marker:#26211A;
  --tm-teal:#45D6C4;      --tm-teal-deep:#45D6C4;
  --tm-teal-wash:#113230; --tm-on-teal:#26211A;
  --tm-lv1:#232A4A;--tm-lv2:#2F3A66;--tm-lv3:#414F8E;
  --tm-lv4:#5A6BB8;--tm-lv5:#94A6F0;--tm-lv6:#C3CDFA;
  --tm-on-lv-low:#EFE9DC; --tm-on-lv-high:#26211A;
  --tm-gain:#5FD3A0;      --tm-drop:#FF8A7A;
  --tm-mark-fg:#26211A;   --tm-mark-pos:0 0;
  --tm-mark-size:100% 100%;
  --tm-inv-sheet:#0B0906; --tm-inv-text:#FFFFFF;
  --tm-inv-text-2:#D9CFBA;--tm-inv-hair:rgba(255,255,255,.14);
  --tm-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
}

/* ---- base ---- */
body{
  background:var(--tm-sheet);       /* never leave this unset */
  color:var(--tm-ink);
  font-family:var(--tm-f-body);
  font-size:17px;line-height:1.75;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
.tm-num,table{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}
:focus-visible{outline:3px solid var(--tm-marker);outline-offset:2px;}

/* ---- apparatus ---- */
.tm-mono,.tm-eyebrow{
  font-family:var(--tm-f-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;
}
.tm-mono{color:var(--tm-ink-45);}
.tm-eyebrow{color:var(--tm-brand);}

/* ---- the cut corner: the system's card signature ----
   Marks a CARD — a self-contained plane. Never on a control
   (button, chip, tag), a data cell (map cell, timeline segment)
   or a page section: if everything were cut, the cut would say
   nothing. Bottom right, because in a left-to-right column the
   eye leaves there and left-aligned text never reaches it. */
.tm-card{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tm-cut)),
  calc(100% - var(--tm-cut)) 100%,0 100%);}
.tm-card--sm{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tm-cut-sm)),
  calc(100% - var(--tm-cut-sm)) 100%,0 100%);}
.tm-card--lg{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--tm-cut-lg)),
  calc(100% - var(--tm-cut-lg)) 100%,0 100%);}
/* dark grounds: never cut */
.tm-dark .tm-card,.tm-dark .tm-card--sm,.tm-dark .tm-card--lg{clip-path:none;}

/* ---- the spoken line ---- */
.tm-speech{font-family:var(--tm-f-speech);font-weight:600;line-height:1.55;color:var(--tm-ink);}

/* ---- the one marker gesture ---- */
.tm-mark{
  background-image:linear-gradient(var(--tm-marker),var(--tm-marker));
  background-repeat:no-repeat;
  background-position:var(--tm-mark-pos);
  background-size:var(--tm-mark-size);   /* covers the words, never an underline */
  color:var(--tm-mark-fg);font-weight:700;padding:.05em .16em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---- icons: Material Symbols Rounded ---- */
.tm-icon{font-family:"Material Symbols Rounded";font-weight:500;font-style:normal;
  font-size:1.2em;line-height:1;display:inline-block;vertical-align:-.22em;
  letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
  font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 1,'GRAD' 0,'opsz' 24;}
.tm-icon--outline{font-variation-settings:'FILL' 0,'GRAD' 0,'opsz' 24;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---- print: documents are print-first ---- */
@page{size:A4;margin:10mm;}
@media print{
  :root{--tm-desk:#FFFFFF;}
  body{background:#FFFFFF;font-size:11px;}
  .tm-no-print{display:none;}
}