/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 1 — tokens. Values originally embedded from the ImpactAI Design System v2.
   Embedded rather than linked because the apps deploy from different roots and
   no app links that file at runtime. Verify any edit with its check_tokens.py —
   every fg/bg pair below was measured, not eyeballed.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* primitives — TDS blue / grey, ImpactAI ink, status ramps */
  --ds-c-blue-50:#E8F3FF; --ds-c-blue-400:#4593FC; --ds-c-blue-500:#3182F6;
  --ds-c-blue-700:#1B64DA; --ds-c-blue-800:#1957C2;
  --ds-c-grey-100:#F2F4F6; --ds-c-grey-200:#E5E8EB; --ds-c-grey-300:#D1D6DB;
  --ds-c-grey-400:#B0B8C1; --ds-c-grey-700:#4E5968; --ds-c-grey-900:#191F28;
  --ds-c-ink-950:#0A0D12; --ds-c-ink-900:#0E1116; --ds-c-ink-800:#161B24;
  --ds-c-ink-700:#1D2430; --ds-c-ink-600:#242C3B; --ds-c-ink-500:#333D4E;
  --ds-c-ink-400:#414E63; --ds-c-ink-300:#666E7D;
  --ds-c-green-fg-d:#3DD68C; --ds-c-green-bg-d:#1B3533;
  --ds-c-green-fg-l:#0F7B48; --ds-c-green-bg-l:#E7F7EF; --ds-c-green-solid-l:#12884E;
  --ds-c-red-fg-d:#F76476; --ds-c-red-bg-d:#33232D; --ds-c-red-solid-d:#F4586B;
  --ds-c-red-fg-l:#C42133; --ds-c-red-bg-l:#FDECEE; --ds-c-red-solid-l:#D8293B;
  --ds-c-amber-fg-d:#F5A524; --ds-c-amber-bg-d:#352E24;
  --ds-c-amber-fg-l:#8A5300; --ds-c-amber-bg-l:#FFF5E0; --ds-c-amber-solid-l:#C07C08;
  --ds-c-teal-fg-d:#2DD4BF; --ds-c-teal-bg-d:#19353A;
  --ds-c-teal-fg-l:#0F766E; --ds-c-teal-bg-l:#E6F7F5;

  --ds-font-sans:"Pretendard Variable",Pretendard,system-ui,"Segoe UI",sans-serif;
  --ds-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  /* Three Korean rules enforced below: no negative tracking under 14px (Hangul
     counters collapse); never uppercase+tracking on Korean; tabular-nums on
     everything numeric. */
  --ds-fs-page:20px; --ds-fs-section:16px; --ds-fs-body:14px;
  --ds-fs-sm:13px; --ds-fs-xs:12px; --ds-fs-2xs:11.5px;

  --ds-radius-sm:6px; --ds-radius:10px; --ds-radius-lg:14px; --ds-radius-pill:999px;
  /* ONE height for every full-size control. Intrinsic heights differ by control
     type at identical padding, so this is a floor applied to all of them. */
  --ds-control-h:36px; --ds-control-h-sm:26px; --ds-control-h-lg:44px;
  --ds-dur-press:90ms; --ds-dur-fast:160ms; --ds-dur-enter:240ms;
  --ds-ease-out:cubic-bezier(.16,1,.3,1);

  /* semantics — DARK (the base leg) */
  color-scheme: dark;
  --ds-bg:var(--ds-c-ink-900); --ds-surface:var(--ds-c-ink-800);
  --ds-surface-2:var(--ds-c-ink-700); --ds-surface-3:var(--ds-c-ink-600);
  --ds-elevated:#10151E; --ds-overlay:rgba(4,6,10,.6);
  --ds-track:rgba(255,255,255,.05);
  --ds-text:#E8EBF2; --ds-text-2:#97A1B7; --ds-text-3:#8A94A6;
  --ds-on-accent:#FFFFFF;
  --ds-accent:var(--ds-c-blue-500); --ds-accent-text:var(--ds-c-blue-400);
  --ds-accent-strong:var(--ds-c-blue-700); --ds-accent-hover:var(--ds-c-blue-800);
  --ds-accent-tint:rgba(49,130,246,.16); --ds-accent-wash:rgba(49,130,246,.08);
  --ds-accent-bg:#182338;
  --ds-border:var(--ds-c-ink-500); --ds-border-default:var(--ds-c-ink-400);
  --ds-border-strong:#4E5C74; --ds-border-field:var(--ds-c-ink-300);
  --ds-success-fg:var(--ds-c-green-fg-d); --ds-success-bg:var(--ds-c-green-bg-d);
  --ds-success-solid:var(--ds-c-green-fg-d); --ds-success-border:#2C6E55;
  --ds-on-success:#0B1F16;
  --ds-danger-fg:var(--ds-c-red-fg-d); --ds-danger-bg:var(--ds-c-red-bg-d);
  --ds-danger-solid:var(--ds-c-red-solid-d); --ds-danger-border:#6E323E;
  --ds-on-danger:#2A0810;
  --ds-warning-fg:var(--ds-c-amber-fg-d); --ds-warning-bg:var(--ds-c-amber-bg-d);
  --ds-warning-solid:var(--ds-c-amber-fg-d); --ds-warning-border:#6B5423;
  --ds-on-warning:#2A1D05;
  --ds-advice-fg:var(--ds-c-teal-fg-d); --ds-advice-bg:var(--ds-c-teal-bg-d);
  --ds-advice-border:#1F5F5C;
  --ds-neutral-bg:rgba(151,161,183,.14);
  --ds-card-raised:var(--ds-surface-2);
  --ds-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --ds-shadow:0 1px 3px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.35);
}

/* semantics — LIGHT. Every token above is restated: a token defined only in the
   dark block silently keeps its dark value here, which is the easiest way to
   ship a broken second theme. */
:root[data-theme="light"] {
  color-scheme: light;
  --ds-bg:#F7F8FA; --ds-surface:#FFFFFF; --ds-surface-2:#F7F8FA;
  --ds-surface-3:#EFF1F4; --ds-elevated:#FFFFFF;
  --ds-overlay:rgba(25,31,40,.45); --ds-track:rgba(25,31,40,.07);
  --ds-text:var(--ds-c-grey-900); --ds-text-2:var(--ds-c-grey-700);
  --ds-text-3:#616A77;              /* not grey-600: that is 4.34:1 on --ds-bg */
  --ds-on-accent:#FFFFFF;
  --ds-accent:var(--ds-c-blue-500); --ds-accent-text:var(--ds-c-blue-700);
  --ds-accent-strong:var(--ds-c-blue-700); --ds-accent-hover:var(--ds-c-blue-800);
  --ds-accent-tint:rgba(49,130,246,.10); --ds-accent-wash:rgba(49,130,246,.06);
  --ds-accent-bg:var(--ds-c-blue-50);
  --ds-border:var(--ds-c-grey-200); --ds-border-default:var(--ds-c-grey-300);
  --ds-border-strong:var(--ds-c-grey-400); --ds-border-field:#8C8F93;
  --ds-success-fg:var(--ds-c-green-fg-l); --ds-success-bg:var(--ds-c-green-bg-l);
  --ds-success-solid:var(--ds-c-green-solid-l); --ds-success-border:#A8E0C4;
  --ds-on-success:#FFFFFF;
  --ds-danger-fg:var(--ds-c-red-fg-l); --ds-danger-bg:var(--ds-c-red-bg-l);
  --ds-danger-solid:var(--ds-c-red-solid-l); --ds-danger-border:#F5B8BF;
  --ds-on-danger:#FFFFFF;
  --ds-warning-fg:var(--ds-c-amber-fg-l); --ds-warning-bg:var(--ds-c-amber-bg-l);
  --ds-warning-solid:var(--ds-c-amber-solid-l); --ds-warning-border:#EDCF91;
  --ds-on-warning:#2A1D05;           /* white on amber solid is only 3.43:1 */
  --ds-advice-fg:var(--ds-c-teal-fg-l); --ds-advice-bg:var(--ds-c-teal-bg-l);
  --ds-advice-border:#9BDBD3;
  --ds-neutral-bg:rgba(107,118,132,.12);
  --ds-card-raised:var(--ds-surface);
  --ds-shadow-sm:0 1px 2px rgba(25,31,40,.06);
  --ds-shadow:0 1px 3px rgba(25,31,40,.10),0 8px 24px rgba(25,31,40,.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 2 — the editorial layer.  Colour, contrast and control height come from
   the DS tokens above and are not re-decided here.  What this layer adds is the
   thing the DS deliberately leaves open: a form for THIS tool.

   The tool is a bench for setting Korean prose, so the page is built like a
   printed one — a work rail, a measured leaf of paper, and a margin for the
   apparatus (cost, model, targets, lint).  Titles are set in a serif; the
   interface around them stays on Pretendard, because Korean UI text needs it.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --app-serif:"Newsreader","Gowun Batang",Georgia,"Nanum Myeongjo",serif;
  --leaf-w:min(100%,780px);
  --rail-w:266px;
  --margin-w:228px;
  --gutter:26px;
  /* An editorial scale, above the DS's UI sizes — those stop at 20px because
     the DS is for dashboards, and a manuscript needs a title that behaves. */
  --fs-display:29px; --fs-title:20px; --fs-lede:14.5px;
  --ink-1:var(--ds-text); --ink-2:var(--ds-text-2); --ink-3:var(--ds-text-3);
}

* { box-sizing:border-box; }
:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; border-radius:3px; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ds-border-strong); border-radius:999px; }
::selection { background:var(--ds-accent-tint); }

body {
  margin:0; color:var(--ink-1);
  background:var(--ds-bg);
  /* Two faint washes rather than a flat fill: the page has a light source, so
     the top of the sheet reads as nearer than the bottom. */
  background-image:
    radial-gradient(1200px 420px at 18% -8%, var(--ds-accent-wash), transparent 70%),
    radial-gradient(900px 380px at 96% 4%, var(--ds-advice-bg), transparent 72%);
  background-attachment:fixed;
  font-family:var(--ds-font-sans); font-size:var(--ds-fs-body); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { margin:0; font-weight:600; }
a { color:var(--ds-accent-text); text-underline-offset:2px; }

/* Latin keys — stage ids, file names, provider ids — set small and tracked.
   Never applied to Korean: tracking pulls Hangul counters apart. */
.mono, code, .key { font-family:var(--ds-font-mono); font-variant-numeric:tabular-nums; }
.key { font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
.num { font-variant-numeric:tabular-nums; }
code { background:var(--ds-surface-3); padding:1px 5px; border-radius:var(--ds-radius-sm);
  font-size:var(--ds-fs-xs); color:var(--ink-2); }
.serif { font-family:var(--app-serif); font-weight:500; letter-spacing:0; }
.grow { flex:1; }
.hint { color:var(--ink-3); font-size:var(--ds-fs-xs); }


:root { --ds-bg-surface:var(--ds-surface); --ds-bg-surface-2:var(--ds-surface-2); --ds-content-primary:var(--ink-1); --ds-content-secondary:var(--ink-2); }