/*
 * tokens.css · the Studio Fabi tools kit (Capsule Dock)
 *
 * The one place to change how every tool looks: colours (light + dark), type,
 * radii, layout, motion and stacking. kit.css builds every shared component
 * from these tokens, and a tool's own <style> uses only these tokens too.
 *
 * RULES
 * - Every colour is plain hex or rgba, because canvases read them with
 *   getComputedStyle() and a canvas can't resolve var(), calc() or
 *   color-mix(). Only the layout tokens at the end use calc() and var().
 * - Light is the base. :root[data-theme='dark'] overrides it. theme.js sets
 *   the attribute before first paint (shared with studiofabi.com).
 * - Exactly three text tones: --ink, --ink-soft, --ink-faint.
 * - Every interactive edge is --edge (>= 3:1 against what is outside it).
 *   --rule and --ring are decorative only and never the only edge of
 *   something clickable.
 * - One selected style everywhere: --solid fill with --solid-ink.
 * - Brand blue (--brand) is for the inset square of the primary, the hover of
 *   small solid buttons, the drop bubble and the toast icon. --accent is for
 *   focus, slider fill, check badges, modified dots and links.
 * - Subject colours (checkerboards, logo backing) are the same in both
 *   themes: an artboard previews print or video, not the interface.
 * - Tool-local custom properties (--inv, --eu, --ratio, --cols, --c, --a, --b,
 *   --f, --p, --origin) are allowed, but never under a name defined here.
 *
 * Contrast ratios (WCAG, verified) are noted where a value was chosen for
 * them, measured against --surface unless stated otherwise.
 *
 * ---------------------------------------------------------------------------
 * OLD NAME -> NEW NAME (porters convert mechanically; no old name survives)
 *   --paper -> --surface              --stage -> gone (the stage is --bg)
 *   --g-025, --g-050 -> --well        --g-100, --g-150 -> --well or --hover
 *   --g-200 -> --rule                 --g-300 -> --edge (lines, graphics), or
 *                                       --hover (fills that carry text)
 *   --g-400, --g-500 -> --ink-faint (meta) or --ink-soft (hints)
 *   --g-600, --g-700 -> --ink-soft or --ink
 *   --hair -> --rule                  --hair-strong -> --edge
 *   --muted -> --ink-soft             --ink-soft, --ink-faint: same names, now hex
 *   --accent-text -> --accent         --accent-mid, --accent-soft: same names
 *   --ok-soft, --warn-soft, --bad-soft, --erase-soft -> none (status is an
 *     icon or dot, never tinted text)
 *   --erase -> --bad                  --brand-blue -> --brand
 *   --brand-navy, --brand-white -> --solid / --solid-ink (UI), or a literal
 *     hex (output colour)
 *   --tip-fg -> --tip-ink             --font-ui -> --font
 *   --fs-micro (11), --fs-small (12) -> --fs-meta (13)
 *   --fs-label (13) -> --fs-label (now 14)
 *   --fs-base (14) -> --fs-body (15) or --fs-label (14)
 *   --fs-title (17) -> --fs-name (20)  --fs-dialog (26) -> --fs-dialog (now 32)
 *   --radius-xs (6), --radius-sm (8) -> --radius-xs (10)
 *   --radius (10) -> --radius-sm (12)
 *   --radius-lg (14) -> --radius-md (16)
 *   --radius-xl (20) -> --radius-lg (20); --radius-xl (24) for artboard,
 *     sheet and dialogs
 *   --shadow-sm -> none (flat at rest)
 *   --shadow, --shadow-lg -> --shadow-pop or --shadow-float
 *   --shadow-art, --scrim: same names
 *   --check-a, --check-b: same names, now identical in both themes; the old
 *     dark checker -> --check-dark-a / --check-dark-b
 *   --header -> --hdr-h               --ease-in-out -> --ease-out
 *   --gutter: the OLD 10px panel spacing is gone. --gutter now means the 24px
 *     outer inset; never reuse it for the old layout (Karaoke's .main grid).
 *   --panel, --rail, --pad, --control-h, --tl -> gone (the kit writes
 *     --tray-h for Karaoke's timeline)
 *
 * TOKENS READ BY TOOL JAVASCRIPT (getComputedStyle, via Kit.theme.tokens)
 * Karaoke timeline (drawTL); renamed reads:
 *   css('--paper') -> '--surface'       css('--g-400') ruler labels -> '--ink-faint'
 *   css('--hair') grid -> '--rule'      css('--g-200') centre line -> '--rule'
 *   css('--g-100') line bracket -> '--well'
 *   css('--g-300') waveform -> '--edge'
 *   css('--g-300') unselected block -> fill '--hover' plus a 1px '--edge'
 *     stroke. An --edge fill would put the ink label at 3.64:1 in dark;
 *     --hover gives 15.6:1 in light and 11.4:1 in dark.
 *   '--accent', '--accent-mid', '--ink': unchanged
 *   hard-coded '#fff' selected label -> '--accent-ink'
 * Modular Mosaic canvasTheme (new reads; today these are hard-coded):
 *   checker -> '--check-a'/'--check-b' (light) and '--check-dark-a'/'--check-dark-b' (dark)
 *   margin shading -> '--canvas-shade'   grid lines -> '--canvas-grid'
 *   shape hairline -> '--canvas-line'    safe-border dash -> '--edge'
 *   selection -> '--accent' over a '--select-halo' double stroke
 *   erase preview -> '--bad'             template thumbs -> '--well' ground, '--accent' blocks
 * Inline var() strings built in tool JS: --muted -> --ink-soft (Forum,
 * Reddit); --g-400 and --g-500 -> --ink-faint (Ad Mockups, Karaoke); --warn,
 * --accent and --bad keep their names.
 * Moodboard's grid overlay follows the BOARD's background luminance, not the
 * theme. It is a subject colour and stays a literal rgba in the tool.
 */

:root {
  /* ---------- brand constant (never theme-dependent) ---------- */
  --brand: #1f42c1;        /* Studio Fabi blue; #ffffff on it is 8.05:1 */
  --brand-ink: #ffffff;    /* glyphs and text on --brand (the primary's inset square, the drop bubble, the toast icon); both themes */

  /* ---------- ground (website Background.astro) ---------- */
  --bg: #f7f7f7;                          /* page ground, header, hub page */
  --field-green: #e1f2ea;                 /* drifting radial field, bottom left */
  --field-blue: #e3ecf7;                  /* drifting radial field, bottom right */
  --vignette-dot: rgba(2, 14, 30, 0.14);  /* 16px dot grid behind the subject; hub card art */
  --hdr-frost: rgba(247, 247, 247, 0.86); /* hub only: the sticky header once scrolled */

  /* ---------- surfaces ---------- */
  --surface: #ffffff;                     /* sheet, popovers, fields, tiles, dialogs, cards */
  --well: #eef0f3;                        /* inset wells: value fields, hex, bubbles, switch-off track, file row */
  --hover: #e4e8ee;                       /* hover fill on surface controls; text-carrying canvas fills */
  --hover-soft: rgba(2, 14, 30, 0.06);    /* hover inside wells and menus; the (i) badge fill */
  --ring: rgba(2, 14, 30, 0.08);          /* 1px inset card ring on sheet and popovers (decorative) */

  /* ---------- text: exactly three tones ---------- */
  --ink: #020e1e;        /* labels, values, options        19.37:1 */
  --ink-soft: #4e5662;   /* hints, descriptions             7.42:1 (6.50 on well) */
  --ink-faint: #626a74;  /* meta only: counts, units        5.48:1 (4.80 on well, 5.11 on bg) */

  /* ---------- lines ---------- */
  --edge: #828892;       /* every control boundary          3.57:1 (3.13 on well, 3.33 on bg) */
  --rule: #dcdfe4;       /* decorative separators only */

  /* ---------- selected + primary (navy, like the website pills) ---------- */
  --solid: #020e1e;                          /* the one selected style; primary fill */
  --solid-ink: #f7f7f7;                      /* text and glyphs on --solid    18.08:1 */
  --solid-ink-soft: #b6bbc2;                 /* secondary text on --solid     10.03:1 */
  --solid-sep: rgba(247, 247, 247, 0.24);    /* divider inside the split primary */
  --solid-hover: rgba(247, 247, 247, 0.10);  /* hover on the split's second part */

  /* ---------- accent ---------- */
  --accent: #1f42c1;                       /* focus, slider fill, check badges, modified dots, links  8.05:1 */
  --accent-ink: #ffffff;                   /* glyph or label on an --accent fill (check badge, selected timeline block) */
  --accent-mid: rgba(31, 66, 193, 0.24);   /* canvas highlight: the block being sung, hover cell */
  --accent-soft: #e4e9f8;                  /* icon bubbles (drop tile, hub, empty states) */
  --accent-icon: #1f42c1;                  /* icon on --accent-soft  6.64:1 */
  --focus-glow: rgba(31, 66, 193, 0.22);   /* 3-4px glow around focused fields */
  --pulse: rgba(31, 66, 193, 0.45);        /* the 'this changed' pulse after a Fix or Undo */
  --select-halo: #ffffff;                  /* canvases: halo under an --accent selection outline, both themes */
  --chk-shadow: rgba(2, 14, 30, 0.35);     /* drop shadow under the check on gradient preset chips, both themes */

  /* ---------- canvas overlays drawn on artboards (Mosaic; any grid or guide) ---------- */
  --canvas-shade: rgba(2, 14, 30, 0.05);   /* shaded margin band */
  --canvas-grid: rgba(2, 14, 30, 0.09);    /* cell grid lines */
  --canvas-line: rgba(2, 14, 30, 0.16);    /* hairline around drawn shapes */

  /* ---------- status (text is never coloured; icons and dots are) ---------- */
  --ok: #15803d;                           /* 5.02:1 */
  --warn: #9a5b00;                         /* 5.43:1 */
  --bad: #c2363b;                          /* 5.41:1 */
  --status-ink: #ffffff;                   /* glyph on a --warn or --bad fill (status bubble)  5.4:1 */
  --status-ring: rgba(2, 14, 30, 0.12);    /* ring around the status pill and the transport */
  --bad-glow: rgba(194, 54, 59, 0.18);     /* glow around an invalid hex or value field */

  /* ---------- dock (website hero capsule) ---------- */
  --dock-bg: rgba(255, 255, 255, 0.86);    /* frosted fill, only inside @supports (backdrop-filter) */
  --dock-solid: #ffffff;                   /* fallback fill; ring colour of the modified dot */
  --dock-line: rgba(2, 14, 30, 0.85);      /* 1px capsule outline  12.3:1 */
  --dock-shadow: 0 16px 40px -20px rgba(2, 14, 30, 0.35);
  --dock-div: rgba(2, 14, 30, 0.2);        /* the 1x32 divider before the primary */
  --chip-hover: rgba(2, 14, 30, 0.06);

  /* ---------- floating ---------- */
  --tip-bg: #020e1e;                       /* tooltip (inverts in dark) */
  --tip-ink: #f7f7f7;
  --toast-bg: #020e1e;                     /* toast: navy in both themes */
  --toast-ink: #f7f7f7;
  --toast-ic: #1f42c1;                     /* check circle in the toast */
  --toast-bad: #c2363b;                    /* error icon circle in the toast */
  --toast-focus: #6d8bff;                  /* focus ring on the navy toast  6.26:1 */
  --toast-ring: rgba(247, 247, 247, 0);
  --scrim: rgba(2, 14, 30, 0.38);          /* dialog backdrop, plus a 14px blur */
  --drop-fill: rgba(228, 233, 248, 0.8);   /* drop-anywhere overlay */
  --hdr-div: rgba(2, 14, 30, 0.14);        /* 1x20 divider after the wordmark */

  /* ---------- subject grounds: identical in both themes ---------- */
  --check-a: #ffffff;                      /* light checker: transparent counts as white (QR, Moodboard, GIF, Mosaic in light) */
  --check-b: #e6e8eb;
  --check-dark-a: #262b33;                 /* dark checker: white-on-transparent subjects (Lower Thirds), Mosaic in dark */
  --check-dark-b: #1b1f26;
  --logo-bg: #ffffff;                      /* behind uploaded logos and images in bubbles and tiles */

  /* ---------- shadows (flat at rest; only floating things cast one) ---------- */
  --shadow-float: 0 0 0 1px rgba(2, 14, 30, 0.04), 0 2px 6px -2px rgba(2, 14, 30, 0.10), 0 20px 44px -16px rgba(2, 14, 30, 0.24);
  --shadow-pop: 0 1px 0 rgba(2, 14, 30, 0.04), 0 20px 48px -16px rgba(2, 14, 30, 0.25);
  --shadow-art: 0 1px 2px rgba(2, 14, 30, 0.06), 0 24px 60px -30px rgba(2, 14, 30, 0.30);
  --shadow-lift: 0 18px 40px -24px rgba(2, 14, 30, 0.35);  /* hover lift: presets, hub cards (website ToolCard) */
  --shadow-tip: 0 12px 28px -14px rgba(2, 14, 30, 0.45);
  --shadow-toast: 0 18px 40px -16px rgba(2, 14, 30, 0.5);
  --shadow-cue: 0 6px 16px -8px rgba(2, 14, 30, 0.35);     /* the 'More below' pill */
  --shadow-thumb: 0 1px 3px rgba(2, 14, 30, 0.3);          /* slider thumb */

  /* ---------- type ---------- */
  --font: 'Zimula', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;  /* interface only, never output */
  --font-head: 'Zimula InkSpot', 'Zimula', ui-sans-serif, system-ui, sans-serif;
  --fs-meta: 13px;     /* the floor: hints, meta, captions, tooltips, compact chip labels, badges */
  --fs-label: 14px;    /* field labels, options, values, segments, secondary buttons */
  --fs-body: 15px;     /* body, chips, primary buttons, menu rows, toasts, help text */
  --fs-input: 15px;    /* text inputs (16px on phones, against iOS zoom) */
  --fs-field: 18px;    /* the hero field on the stage: the largest UI text */
  --fs-name: 20px;     /* tool name in the header (InkSpot) */
  --fs-sheet: 24px;    /* sheet titles, confirm titles (InkSpot) */
  --fs-dialog: 32px;   /* guide title (InkSpot) */
  --fs-hero: clamp(34px, 4.4vw, 56px); /* hub h1 (InkSpot) */
  --lh: 1.4;           /* interface */
  --lh-read: 1.5;      /* help paragraphs, dialog bodies */

  /* ---------- shape: radii step down as things nest ---------- */
  --radius-pill: 999px; /* capsules, chips, swatches, pills, toasts, icon buttons */
  --radius-xl: 24px;    /* sheet, artboard, dialogs */
  --radius-lg: 20px;    /* drop frame, drop card, hub cards, tray, phone dock top corners */
  --radius-md: 16px;    /* hero field, menus, popovers, preset tiles, file row, status card */
  --radius-sm: 12px;    /* tiles, segment track, switch rows, buttons, tooltip */
  --radius-xs: 10px;    /* value fields, hex field, menu rows, inset square, preset chips */
  --radius-seg: 9px;    /* segment thumbs and the gliding indicator */
  --radius-2xs: 8px;    /* the small inset square in buttons, kbd keys, the toast's action */
  --radius-3xs: 6px;    /* tooltip kbd, image thumbs inside tiles */
  --radius-chip: 18px;  /* compact and phone chips (64px wide) */
  --radius-split: 14px; /* the split primary on phones */

  /* ---------- motion: one curve ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 0.12s;     /* press scale(.97) */
  --t-fade: 0.2s;       /* popover and tooltip fades; the reduced-motion ceiling */
  --t-color: 0.3s;      /* colour and background changes */
  --t-move: 0.45s;      /* indicators, icon nudges, knobs */
  --t-sheet: 0.5s;      /* sheet in and out, and the subject shift */

  /* ---------- stacking ---------- */
  --z-ground: 0;
  --z-stage: 1;
  --z-hint: 2;
  --z-tool: 20;         /* floating tool palette and selection toolbar on canvas tools */
  --z-sheet: 25;
  --z-dock: 30;
  --z-hdr: 40;
  --z-drop: 50;
  --z-pop: 60;
  --z-toast: 70;
  --z-tip: 90;

  /* ---------- layout (calc and var allowed here) ---------- */
  --hdr-h: 64px;
  --gutter: 24px;        /* outer inset: header padding, sheet right inset, dock bottom */
  --dock-h: 64px;        /* kit.js writes 72px on :root while the dock is compact (never at <=760px) */
  --tray-h: 0px;         /* timeline layout: kit.js writes the tray height plus its 16px gap */
  --zone-gap: 24px;      /* clear space kept above the dock */
  --dock-zone: calc(var(--gutter) + var(--tray-h) + var(--dock-h) + var(--zone-gap)); /* 112px by default */
  --sheet-w: 440px;
  --sheet-top: calc(var(--hdr-h) + 24px);
  --sheet-bot: var(--dock-zone);
  --col-max: 560px;      /* hero column (QR, GIF file strip, hub hero) */
  --phone-band: 216px;   /* phone: stage band left above an open bottom sheet (264px for transport layouts) */
  --phone-subject: 168px;
  --hit: 36px;           /* minimum desktop target */
  --tile-h: 76px;
  --sec-gap: 24px;       /* space between sections in a sheet */

  color-scheme: light;
  font-synthesis-weight: none;
}

:root[data-theme='dark'] {
  --bg: #020e1e;
  --field-green: #072521;
  --field-blue: #0a1d3d;
  --vignette-dot: rgba(247, 247, 247, 0.12);
  --hdr-frost: rgba(2, 14, 30, 0.86);

  --surface: #0f2138;
  --well: #182c47;
  --hover: #1f3655;
  --hover-soft: rgba(247, 247, 247, 0.07);
  --ring: rgba(247, 247, 247, 0.10);

  --ink: #f7f7f7;
  --ink-soft: #b6bbc2;   /* 8.40:1 on surface, 7.30 on well */
  --ink-faint: #9aa1ab;  /* 6.22:1 on surface, 5.41 on well */

  --edge: #73829a;       /* 4.16:1 on surface, 3.62 on well, 4.97 on bg */
  --rule: #22385a;

  --solid: #f7f7f7;
  --solid-ink: #020e1e;
  --solid-ink-soft: #4e5662;              /* 6.92:1 on the white solid */
  --solid-sep: rgba(2, 14, 30, 0.18);
  --solid-hover: rgba(2, 14, 30, 0.07);

  --accent: #6d8bff;                       /* 5.24:1 on surface; slider fill 4.55:1 on well */
  --accent-ink: #020e1e;                   /* navy on #6d8bff  6.26:1 */
  --accent-mid: rgba(109, 139, 255, 0.36);
  --accent-soft: #1e3258;
  --accent-icon: #8aa2ff;                  /* 5.26:1 on --accent-soft */
  --focus-glow: rgba(109, 139, 255, 0.35);
  --pulse: rgba(109, 139, 255, 0.5);

  --canvas-shade: rgba(247, 247, 247, 0.05);
  --canvas-grid: rgba(247, 247, 247, 0.10);
  --canvas-line: rgba(247, 247, 247, 0.20);

  --ok: #6ee29d;
  --warn: #f9dc62;
  --bad: #ff8589;
  --status-ink: #020e1e;                   /* 14.2:1 on warn, 8.3:1 on bad */
  --status-ring: rgba(247, 247, 247, 0.14);
  --bad-glow: rgba(255, 133, 137, 0.30);

  --dock-bg: rgba(15, 33, 56, 0.88);
  --dock-solid: #0f2138;
  --dock-line: rgba(247, 247, 247, 0.7);   /* 8.0:1 */
  --dock-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.7);
  --dock-div: rgba(247, 247, 247, 0.2);
  --chip-hover: rgba(247, 247, 247, 0.08);

  --tip-bg: #f7f7f7;
  --tip-ink: #020e1e;
  --toast-ring: rgba(247, 247, 247, 0.12); /* the navy toast needs a ring on the navy ground */
  --scrim: rgba(0, 4, 12, 0.62);
  --drop-fill: rgba(30, 50, 88, 0.8);
  --hdr-div: rgba(247, 247, 247, 0.16);

  /* --brand, --brand-ink, --check-*, --logo-bg, --toast-bg, --toast-ink,
     --toast-ic, --toast-bad, --toast-focus, --select-halo and --chk-shadow
     are deliberately NOT redefined: they stay the same in dark. */

  --shadow-float: 0 0 0 1px rgba(247, 247, 247, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.6), 0 20px 44px -16px rgba(0, 0, 0, 0.6);
  --shadow-pop: 0 0 0 1px rgba(247, 247, 247, 0.08), 0 20px 48px -16px rgba(0, 0, 0, 0.6);
  --shadow-art: 0 0 0 1px rgba(247, 247, 247, 0.08), 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 0 0 1px rgba(247, 247, 247, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  --shadow-tip: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-toast: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  --shadow-cue: 0 6px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

/* ---------- responsive layout tokens ---------- */
@media (max-width: 1280px) {
  :root { --sheet-w: 400px; }
}
/* short desktop screens (1280x800, 1440x800): a taller sheet and a tighter rhythm */
@media (max-width: 1280px) and (min-width: 761px), (max-height: 860px) and (min-width: 761px) {
  :root { --sheet-top: calc(var(--hdr-h) + 16px); --zone-gap: 16px; --sec-gap: 16px; --tile-h: 72px; }
}
@media (max-width: 1039px) {
  :root { --sheet-w: 360px; }
}
@media (max-width: 760px) {
  :root {
    --hdr-h: 56px;
    --gutter: 16px;
    --dock-h: calc(72px + env(safe-area-inset-bottom, 0px));
    --dock-zone: var(--dock-h);  /* the dock is a bottom bar; trays stack inside the scrolling stage */
    --fs-input: 16px;
    --fs-field: 16px;
  }
}
@media (max-width: 760px), (pointer: coarse) {
  :root { --hit: 44px; }
}