/* ===== tokens.css: the 5DO palette, scale and spacing — nothing else =====
 *
 * Split out of base.css on 2026-11-02 so the four sub-apps can share it.
 *
 * 분석 (Soul Code · Biofeedback), 명상 and 코스믹 are not part of 5do.html at
 * all — each is a separate document in an <iframe>, and none of them loaded
 * base.css. They had grown their own palettes: Biofeedback and Cosmic on a
 * #050810 ground against the app's #060A12, and Soul Code on #2a2250, a
 * PURPLE ground. Switching tabs meant switching product.
 *
 * They cannot simply load base.css — it carries a reset and `body` rules
 * (height: 100%, overflow-x: hidden, font-size) that would reflow pages built
 * without them. This file is declarations only: adding it to a document can
 * change nothing until a rule actually references a token.
 *
 * base.css imports it, so 5do.html is unaffected. Sub-apps link it directly.
 */
:root {
  /* ── Ground ── */
  --bg: #060A12;
  --bg-elevated: #0C1220;
  --bg-card: #111828;
  --surface: #1A2438;
  --border: #1E2D45;
  --border-hover: #2A3F5F;

  /* ── Primary (시안/블루) ── */
  --primary: #39E3FF;
  --primary-light: #7EECFF;
  --primary-dark: #1AB8D9;

  /* ── Primary tint ladder ──
   * Three steps replace twelve ad-hoc alphas of the same cyan. If a surface
   * needs "a bit more tint", it takes the next step up — it does not invent
   * .07 between two of these. --tint-weak doubles as the hairline border on
   * every glass surface, which is why --glass-border aliases it. */
  --tint-weak: rgba(57, 227, 255, .06);
  --tint: rgba(57, 227, 255, .12);
  --tint-strong: rgba(57, 227, 255, .25);
  --primary-glow: var(--tint);

  /* ── Scrim ── overlays that darken what is behind them */
  --scrim-weak: rgba(0, 0, 0, .3);
  --scrim: rgba(0, 0, 0, .5);
  --scrim-deep: rgba(0, 0, 0, .7);

  /* ── Wash ── the faint white used to lift a surface off the ground */
  --wash-weak: rgba(255, 255, 255, .04);
  --wash: rgba(255, 255, 255, .1);

  /* ── Product accents ──
   * QTX (the PEMF-optimised output) is PURPLE, and that is deliberate brand,
   * not a leftover: 5do.html picks it at runtime as
   *   _outputMode === 'qtx' ? '#8b5cf6' : …
   * The defect was never that purple exists — it is that purple existed at
   * twelve unnamed values (#7c5cfc #8b5cf6 #9b7fff #b89eff #c4b5fd #5a3ad9 and
   * six alphas of two different RGB triplets), so no two QTX surfaces agreed.
   * One hue, one ladder. */
  --qtx: #8B5CF6;
  --qtx-light: #B89EFF;
  --qtx-tint: rgba(139, 92, 246, .12);
  --qtx-tint-strong: rgba(139, 92, 246, .32);

  /* ── Secondary & Accents ── */
  /* #3ECFCF, not #7FFFD4. The design system in CLAUDE.md has said #3ECFCF
     all along and the four sub-apps use it 29 times; base.css had drifted.
     Only two gradient stops in player.css referenced the old value. */
  --secondary: #3ECFCF;
  --accent: #B490FF;
  --accent-warm: #FFB86C;
  /* A recurring accent across the sub-apps (CE5, Cosmic) and 5do.html. */
  --accent-pink: #FF6B9D;

  /* ── Semantic ── */
  --success: #4ADE80;
  --success-glow: rgba(74, 222, 128, .3);
  --warning: #FBBF24;
  --error: #F87171;
  /* A translucent error wash. Needed because mapping rgba(248,113,113,.25)
     onto solid --error turns a faint tint into a block of red. */
  --error-tint: rgba(248, 113, 113, .22);

  /* ── Text ──
   * --text-tertiary is 3.3:1 on --bg. That passes for large text (24px+) and
   * for non-text UI, and FAILS the 4.5:1 body minimum. Captions and numeric
   * readouts take --text-secondary (8.2:1). The player's elapsed-time readout
   * used to be 11px rgba(160,190,220,.4) — 2.5:1, barely over half the
   * minimum. */
  --text-primary: #E8F2FF;
  --text-secondary: #8AAAC8;
  --text-tertiary: #4A6580;

  /* ── Panels ──
   * --panel-blur is the opaque-ish ground behind every FIXED chrome layer
   * (header, tab bar, nav row, search, dropdown, popovers). Seven
   * near-identical values were in use — rgba(6,10,18,.96), (10,16,28,.96),
   * (12,18,26,.94), (7,11,16,.95), (10,14,20,.97) and so on — differences no
   * eye can see and no reason could explain. */
  --panel-blur: rgba(6, 10, 18, .96);

  /* ── Glass ── */
  --glass: rgba(12, 18, 32, .75);
  --glass-border: var(--tint-weak);

  /* ── Radius ── three, and only three.
   * sm: thumbnails, inputs, small buttons · lg: cards, sheets, album art
   * pill: chips, the play button, progress bars */
  --r-sm: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ── Type scale ── five steps.
   * Body is 16px, not 12.5px. Under 16px iOS Safari zooms the page on every
   * tap into a text input, and the old 12–13px body is the single biggest
   * reason the UI reads as cramped.
   *
   * --t-micro exists for ONE surface: the frequency generator, an instrument
   * panel with ~20 controls whose labels cannot take caption size without the
   * layout breaking. It is a deliberate exception, not a spare size — reading
   * text never uses it. --t-hero is the generator's primary Hz readout. */
  --t-micro: 12px;
  --t-caption: 13px;
  --t-body: 16px;
  --t-title: 20px;
  --t-display: 28px;
  --t-hero: 52px;

  /* ── Spacing ── multiples of 4; everything lands on this ladder */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* ── Touch ── Apple HIG minimum. Any tappable control is at least this. */
  --tap: 44px;

  /* ── Chrome stack ──
   * These were loose numbers scattered across four files: top: 41px, top: 75px,
   * padding-top: 130px, calc(100vh - 90px), calc(100vh - 130px). Change one and
   * you had to find the other four by eye. Named once, here.
   *
   * The tab bar used to be the second of FOUR fixed layers at the top, which
   * is where the 130px came from. Moving it to the bottom gives 34px back and
   * puts navigation where the thumb is. */
  --h-header: 41px;
  --h-tabbar: 56px;
  --h-subtabs: 44px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --chrome-top: 96px;                 /* header + nav row + search bar */
  --chrome-bottom: calc(var(--h-tabbar) + var(--safe-b));
  /* A full-bleed iframe tab: everything except the header and the tab bar. */
  --h-full-page: calc(100vh - var(--h-header) - var(--chrome-bottom));
  --h-inner-page: calc(var(--h-full-page) - var(--h-subtabs));

  /* ── Transition ── */
  --transition: .2s ease;

  /* ── Legacy aliases ──
   * Kept so the refactor did not have to touch every selector at once.
   * Prefer the names above in new code; these are not a second palette. */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-sm);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-lg);
  --radius: var(--r-lg);
  --panel: var(--bg-elevated);
  --line: var(--border);
  --muted: var(--text-secondary);
  --txt: var(--text-primary);
  --blue: var(--primary);
  --blue2: var(--primary-dark);
  --stroke: var(--border);
  --glow: var(--primary-glow);
  --card: var(--bg-card);
  --thumb: #080E18;
  --accent2: var(--accent);
  --teal: var(--secondary);
  --title-glow: none;
}