/* ══════════════════════════════════════════════════════════════════════════════
   tokens.css — THE SOURCE OF TRUTH for the visualization design system.

   Files in viz/ do NOT link to this file. They carry an inlined copy of the
   block below, fenced by the `vk-tokens v1` sentinels, so that any single
   viz file stays 100% portable — emailable, publishable, pixel-identical when
   copied somewhere else on its own.

   To re-sync after editing this file:
     1. copy everything between the BEGIN and END sentinel lines
     2. replace the matching block in each viz/*.html
     3. bump the version in the sentinel when tokens change incompatibly

   To find stale files:
     grep -L "vk-tokens v1" viz/*.html

   Palette provenance — decoded from Melvin's own reference images in
   ~/Documents/Techflection/Training Materials/:
     "I want to do this - scared.png"  → #55efc4 mint, #2d3436 charcoal,
                                          #dfe6e9 neutral, and the signature
                                          hard-offset shadow
     "Challenging moments.JPG"         → sky/coral two-tone, caption-top /
                                          caption-bottom poster layout
   ══════════════════════════════════════════════════════════════════════════════ */

/* ╔══ vk-tokens v1 ══ BEGIN ══ canonical: shared/tokens.css ══ do not hand-edit ══╗ */
:root{
  --vk-tokens-version:1;
  color-scheme:light;

  /* ── surfaces & ink ──────────────────────────────────────────────────────
     Contrast ratios in comments are against --vk-paper (light) and are
     computed, not estimated. */
  --vk-paper:#ffffff;
  --vk-paper-2:#f4f7f8;        /* ink 11.78  AAA */
  --vk-paper-3:#e9eef0;        /* ink 10.84  AAA */
  --vk-ink:#2d3436;            /* on paper 12.68  AAA   ← from the flowchart */
  --vk-ink-soft:#5a6063;       /* on paper  6.39  AA                        */
  --vk-ink-faint:#8b9295;      /* on paper  3.16  LARGE TEXT / non-text ONLY */
  --vk-rule:#d3dcdf;           /* 1.39 — hairlines, never text              */
  --vk-rule-strong:#2d3436;    /* the chunky hand-drawn border              */

  /* ── marks: FILLS ONLY, never small text ─────────────────────────────────
     THE ONE RULE OF THIS SYSTEM. #55efc4 on white is 1.45:1 and #8ecdf7 is
     1.72:1 — both are invisible as text. Every mark has an -ink sibling
     below; reach for that whenever the color must carry type. */
  --vk-mint:#55efc4;
  --vk-sky:#8ecdf7;            /* the ordinary / the good */
  --vk-coral:#e8593f;          /* the hard moments        */
  --vk-mint-soft:#dcfaf0;      /* ink 11.46  AAA */
  --vk-sky-soft:#e4f2fd;       /* ink 11.12  AAA */
  --vk-coral-soft:#fce4de;     /* ink 10.44  AAA */

  /* ── text-safe sibling of every mark ───────────────────────────────────── */
  --vk-mint-ink:#0a7f5f;       /* on paper 4.98  AA */
  --vk-sky-ink:#1c74b8;        /* on paper 4.95  AA */
  --vk-coral-ink:#c8402a;      /* on paper 4.97  AA */

  /* ── ink to place ON a mark field ──────────────────────────────────────── */
  --vk-on-mint:var(--vk-ink);  /* 8.77  AAA */
  --vk-on-sky:var(--vk-ink);   /* 7.38  AAA */
  --vk-on-coral:#ffffff;       /* 3.54  ⚠ LARGE TEXT ONLY (≥24px, or ≥19px bold) */
  --vk-coral-deep:#c8402a;     /* use THIS coral field when it must carry small
                                  white text — white on it is 4.97  AA */

  /* ── semantic aliases: what a visualization actually reaches for ────────── */
  --vk-accent:var(--vk-mint);       --vk-accent-ink:var(--vk-mint-ink);
  --vk-high:var(--vk-sky);          --vk-high-ink:var(--vk-sky-ink);
  --vk-low:var(--vk-coral);         --vk-low-ink:var(--vk-coral-ink);
  --vk-high-soft:var(--vk-sky-soft);
  --vk-low-soft:var(--vk-coral-soft);

  /* ── type ────────────────────────────────────────────────────────────────
     No web fonts — must work offline. ui-sans-serif resolves to SF Pro on
     macOS: geometric, tight, excellent at display sizes with -0.03em. */
  --vk-sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",
            Roboto,"Helvetica Neue",Arial,sans-serif;
  --vk-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --vk-step--1:clamp(0.80rem,0.78rem + 0.10vw,0.86rem);  /* micro-label   */
  --vk-step-0 :clamp(1.00rem,0.96rem + 0.20vw,1.13rem);  /* body          */
  --vk-step-1 :clamp(1.20rem,1.12rem + 0.40vw,1.44rem);  /* lead          */
  --vk-step-2 :clamp(1.44rem,1.28rem + 0.80vw,1.94rem);  /* subhead       */
  --vk-step-3 :clamp(1.80rem,1.45rem + 1.75vw,2.75rem);  /* headline sm   */
  --vk-step-4 :clamp(2.20rem,1.55rem + 3.25vw,4.00rem);  /* headline      */
  --vk-step-5 :clamp(2.75rem,1.60rem + 5.75vw,6.00rem);  /* poster display*/

  --vk-lh-display:0.98;  --vk-lh-tight:1.15;  --vk-lh-body:1.6;
  --vk-tr-display:-0.03em; --vk-tr-label:0.14em;

  /* ── space / measure / radius ──────────────────────────────────────────── */
  --vk-1:.25rem; --vk-2:.5rem;  --vk-3:.75rem; --vk-4:1rem;  --vk-5:1.5rem;
  --vk-6:2rem;   --vk-7:3rem;   --vk-8:4rem;   --vk-9:6rem;  --vk-10:8rem;
  --vk-gutter:clamp(1.5rem,5vw,5rem);

  --vk-measure:62ch;         /* prose                                        */
  --vk-measure-tight:34ch;   /* poster caption — short lines are the look    */
  --vk-frame:1100px;

  --vk-r-0:0; --vk-r-1:4px; --vk-r-2:10px; --vk-r-3:18px; --vk-r-pill:999px;
  --vk-shadow-hard:4px 4px 0 var(--vk-ink);   /* the flowchart signature */

  --vk-dur:420ms; --vk-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── DARK ─────────────────────────────────────────────────────────────────────
   Two blocks, identical bodies, written out in full (no "same as above" — a
   future editor will change one and not the other).

   BOTH are scoped to `screen`. That is the whole trick: print therefore always
   renders the light palette, and the print stylesheet needs zero token
   overrides. Do not remove the `screen` qualifier.

   light-dark() would collapse these into one declaration per token, but it
   degrades to *unset* tokens on older browsers — visually broken, which is
   unacceptable for files meant to be emailed. Explicit overrides never break.
   ────────────────────────────────────────────────────────────────────────── */
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --vk-paper:#14181a; --vk-paper-2:#1c2124; --vk-paper-3:#242b2e;
    --vk-ink:#eef2f3;            /* 15.85  AAA */
    --vk-ink-soft:#a3adb1;       /*  7.80  AAA */
    --vk-ink-faint:#727c80;      /*  4.18  AA  */
    --vk-rule:#333c40; --vk-rule-strong:#eef2f3;
    --vk-coral:#ff7a63;          /*  6.99  AA — coral must lift on dark */
    --vk-mint-soft:#12312a; --vk-sky-soft:#122636; --vk-coral-soft:#33170f;
    --vk-mint-ink:#55efc4;       /* 12.36  AAA */
    --vk-sky-ink:#8ecdf7;        /* 10.40  AAA */
    --vk-coral-ink:#ff7a63;
    --vk-on-mint:#14181a; --vk-on-sky:#14181a;
    --vk-on-coral:#14181a;       /*  6.99  AA — on dark, coral CAN carry small text */
    --vk-coral-deep:#ff7a63;
    --vk-shadow-hard:4px 4px 0 var(--vk-ink);
  }
}
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --vk-paper:#14181a; --vk-paper-2:#1c2124; --vk-paper-3:#242b2e;
    --vk-ink:#eef2f3;
    --vk-ink-soft:#a3adb1;
    --vk-ink-faint:#727c80;
    --vk-rule:#333c40; --vk-rule-strong:#eef2f3;
    --vk-coral:#ff7a63;
    --vk-mint-soft:#12312a; --vk-sky-soft:#122636; --vk-coral-soft:#33170f;
    --vk-mint-ink:#55efc4;
    --vk-sky-ink:#8ecdf7;
    --vk-coral-ink:#ff7a63;
    --vk-on-mint:#14181a; --vk-on-sky:#14181a;
    --vk-on-coral:#14181a;
    --vk-coral-deep:#ff7a63;
    --vk-shadow-hard:4px 4px 0 var(--vk-ink);
  }
  :root[data-theme="light"]{ color-scheme:light; }
}

/* ── base ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--vk-paper);
  color:var(--vk-ink);
  font-family:var(--vk-sans);
  font-size:var(--vk-step-0);
  line-height:var(--vk-lh-body);
  -webkit-font-smoothing:antialiased;
}

/* ── components — nine of them. Resist adding a tenth. ─────────────────────── */

/* 1. the frame: caption-top / stage / caption-bottom, straight from the
      "Challenging moments" poster */
.vk-poster{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--vk-6);
  min-height:100svh;
  max-width:var(--vk-frame);
  margin-inline:auto;
  padding:var(--vk-gutter);
}
/* .vk-controls is fixed to the viewport, so on a wide screen it sits clear of
   the centred poster. Below that it lands on top of whatever is at the top of
   the header — reserve room on THAT element only. Padding the whole header
   would squeeze the headline, which is the one thing that needs the width. */
.vk-poster > header > :first-child{ padding-inline-end:var(--vk-controls-gap, 0); }
@media screen and (max-width:960px){
  :root{ --vk-controls-gap:11rem; }
}
@media print{
  :root{ --vk-controls-gap:0; }
}

/* 2. the lowercase captions that bracket the idea */
.vk-cap{
  margin:0;
  font-size:var(--vk-step-4);
  font-weight:600;
  line-height:var(--vk-lh-display);
  letter-spacing:var(--vk-tr-display);
  text-transform:lowercase;
  max-width:var(--vk-measure-tight);
  text-wrap:balance;
}
.vk-cap--bottom{ justify-self:end; text-align:right; color:var(--vk-ink-soft); }

/* 3. where the visual lives */
.vk-stage{
  display:grid;
  place-items:center;
  container-type:inline-size;
}

/* 4. micro-label */
.vk-label{
  font-size:var(--vk-step--1);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--vk-tr-label);
  color:var(--vk-ink-soft);
  /* A label often carries a source or a URL, and one long unbreakable token is
     enough to set the whole poster's min-content width and push the page into
     horizontal scroll — "intentbasedleadership.com", uppercased with tracking,
     measured 423px on its own and blew out a 390px viewport. Let it break. */
  overflow-wrap:anywhere;
}

/* 5. the flowchart block */
.vk-card{
  background:var(--vk-paper);
  border:2px solid var(--vk-rule-strong);
  border-radius:var(--vk-r-3);
  box-shadow:var(--vk-shadow-hard);
  padding:var(--vk-4);
}

/* 6. prose */
.vk-note{
  max-width:var(--vk-measure);
  font-size:var(--vk-step-0);
  line-height:var(--vk-lh-body);
  color:var(--vk-ink-soft);
}

/* 7. legend: mark swatch + -ink label */
.vk-legend{
  display:flex; flex-wrap:wrap; gap:var(--vk-2) var(--vk-5);
  align-items:center; padding:0; margin:0; list-style:none;
  font-size:var(--vk-step--1);
}
.vk-legend li{ display:flex; align-items:center; gap:var(--vk-2); }
.vk-swatch{
  inline-size:.9em; block-size:.9em; border-radius:var(--vk-r-1);
  background:var(--vk-ink-faint); flex:none;
}

/* 8. fixed controls cluster */
.vk-controls{
  position:fixed; inset-block-start:var(--vk-4); inset-inline-end:var(--vk-4);
  display:flex; gap:var(--vk-2); z-index:10;
}
.vk-controls button{
  font:inherit; font-size:var(--vk-step--1);
  text-transform:lowercase; letter-spacing:.02em;
  color:var(--vk-ink-soft); background:var(--vk-paper-2);
  border:1px solid var(--vk-rule); border-radius:var(--vk-r-pill);
  padding:var(--vk-1) var(--vk-3); cursor:pointer;
  transition:color var(--vk-dur) var(--vk-ease),
             border-color var(--vk-dur) var(--vk-ease);
}
.vk-controls button:hover{ color:var(--vk-ink); border-color:var(--vk-ink-faint); }
.vk-controls button:focus-visible{
  outline:2px solid var(--vk-ink); outline-offset:2px;
}

/* 9. field of marks, for grid-style posters */
.vk-grid{
  display:grid;
  grid-template-columns:repeat(var(--vk-cols,30),1fr);
  gap:var(--vk-1);
}

/* ── utilities ────────────────────────────────────────────────────────────── */
.vk-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0;
}

/* ── motion: mandatory, since "dynamic" is half the brief ─────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* ── export ───────────────────────────────────────────────────────────────── */
/* Pin the frame to an exact pixel box via the URL hash (#px1080), then use
   DevTools → select the .vk-poster node → "Capture node screenshot". */
:root[data-export="1080"] .vk-poster{
  width:1080px; height:1080px; min-height:0; max-width:none;
}
:root[data-export="1200"] .vk-poster{
  width:1200px; height:675px; min-height:0; max-width:none;
}

@media print{
  @page{ size:280mm 280mm; margin:0; }
  /* REQUIRED. Without this the flat color fields drop out and the poster
     prints blank. The dark blocks are scoped to `screen`, so print is
     already guaranteed to use the light palette. */
  :root{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  html,body{ background:#fff; }
  .vk-controls{ display:none; }
  .vk-poster{ min-height:auto; break-inside:avoid; }
}
/* ╚══ vk-tokens v1 ══ END ═══════════════════════════════════════════════════════╝ */