@charset "utf-8";
/* The Click design's tokens under the Portal's own names (Click 포털 리디자인 1단계, design/click-portal HANDOFF 2절).

   click-tokens.css (loaded before style.css) holds the design's tokens as the design wrote them. Every screen of the
   Portal names its colours, faces and corners by style.css's tokens (--ds-*, and the older names style.css points at
   them: --line, --muted, --mint ...), and tests read those names. So the names stay and this sheet, read after every
   other sheet of the page (index.html, after the screens' sheets), gives each one the design's value by the design's
   token: a screen not redrawn yet is drawn in ink, yellow and cloud the day this lands, and a screen redrawn later
   names the design's tokens itself. Nothing here is a new colour: each value is a click-tokens.css token, except
   --muted, which style.css also names (an older alias read after click-tokens.css) and is said here again with the
   design's value.

   Mapping, one line each (design/click-portal/docs/click-tokens.css):
   - text, lines, grounds: --ds-text* -> --ink*, --muted; --ds-line* -> --border*; --ds-bg/surface* -> --bg-app, --surface, --bg-subtle, --divider-soft
   - accent (was blue): ink for what is chosen, pressed, linked and focused; the neutral selection ground for its soft tone
   - states: ok -> 관리 중 green, danger -> 관리 밖 red, caution and unknown -> 검토 필요 orange (unknown drawn dashed by
     its parts), info and blocked -> neutral ink tones (the design has no blue), Click and new -> the yellow wash
   - faces: --ds-font -> --font-sans (the same Pretendard Variable), --ds-font-mono -> --font-mono (IBM Plex Mono)
   - corners and the pop-over shadow: --ds-radius -> --r-card, --ds-radius-s -> --r-ctl, --ds-shadow-pop -> --shadow-pop
   - type and space (Click Design System, 2단계): --ds-fs-* -> the role scale (--fs-*), --ds-space-* -> the 4px grid
     (--sp-*), so a screen that still names the older sizes stands on the same scale as one redrawn: body 14, a cell or
     control 13.5, meta 12.5, a section 15, the figure 26 -- and no 13/14/14 three-step blur (docs/design/DESIGN_SYSTEM.md). */
:root{
  --muted:#535C6E;

  --ds-font:var(--font-sans);
  --ds-font-mono:var(--font-mono);

  --ds-bg:var(--bg-app);--ds-surface:var(--surface);--ds-surface-2:var(--bg-subtle);--ds-surface-3:var(--divider-soft);
  --ds-line:var(--border);--ds-line-strong:var(--border-strong);
  --ds-text:var(--ink);--ds-text-2:var(--ink-2);--ds-text-3:var(--muted);--ds-muted:var(--muted);

  --ds-accent:var(--primary);--ds-accent-strong:var(--primary-hover);--ds-accent-soft:var(--select-bg);--ds-accent-text:var(--primary-ink);
  --ds-focus:var(--select-ring);

  --ds-ok:var(--st-managed);--ds-ok-text:var(--st-managed-fg);--ds-ok-soft:var(--st-managed-bg);
  --ds-danger:var(--st-unmanaged);--ds-danger-text:var(--st-unmanaged-fg);--ds-danger-soft:var(--st-unmanaged-bg);
  /* A caution that is a known fact (승인 대기, 중간, a refused sign-in) stands on its own lighter amber; the review ground (with
     its dashed edge) is 판단 불가's alone -- whole-review F-038, browser_portal_flow; dev kept the two apart before #103.
     #FDF7F1: 5.9:1 under the review words. */
  --ds-caution:var(--st-review);--ds-caution-text:var(--st-review-fg);--ds-caution-soft:#FDF7F1;
  --ds-unknown:var(--st-review);--ds-unknown-text:var(--st-review-fg);--ds-unknown-soft:var(--st-review-bg);--ds-unknown-line:var(--st-review);
  --ds-info:var(--ink-3);--ds-info-text:var(--ink-2);--ds-info-soft:var(--bg-subtle);
  --ds-blocked:var(--ink-2);--ds-blocked-soft:var(--divider);
  --ds-neutral:var(--faint);--ds-neutral-soft:var(--divider-soft);
  --ds-click:var(--brand-ink);--ds-click-text:var(--primary-ink);--ds-click-soft:var(--primary-wash);--ds-click-line:var(--primary-line);
  --ds-new:var(--primary-ink);--ds-new-soft:var(--primary-tint);

  --ds-radius:var(--r-card);--ds-radius-s:var(--r-ctl);--ds-radius-xs:var(--r-sm);
  --ds-fs-xs:var(--fs-xs);--ds-fs-sm:var(--fs-sm);--ds-fs-md:var(--fs-body);--ds-fs-lg:var(--fs-section);--ds-fs-xl:17px;--ds-fs-2xl:20px;
  --ds-fs-figure:var(--fs-kpi);--ds-fs-hero:var(--fs-kpi-xl);--ds-fs-first:var(--fs-kpi-xl);
  --ds-space-1:var(--sp-1);--ds-space-2:var(--sp-2);--ds-space-3:var(--sp-3);--ds-space-4:var(--sp-4);--ds-space-5:var(--sp-5);--ds-space-6:var(--sp-6);
  --ds-shadow:var(--shadow-card);--ds-dur-fast:var(--dur-fast);--ds-dur:var(--dur);--ds-ease:var(--ease);
  --ds-shadow-pop:var(--shadow-pop);

  --ds-brand-bg:var(--brand-ink);
  --ds-nav-bg:var(--bg-sidebar);--ds-nav-line:var(--border);--ds-nav-well:var(--surface);
  --ds-nav-text:var(--ink-2);--ds-nav-dim:var(--muted);--ds-nav-hover:var(--divider-soft);
  --ds-nav-active-bg:var(--primary-tint);--ds-nav-active-text:var(--primary-ink);--ds-nav-active-mark:var(--primary);
  --ds-tip-bg:var(--ink);
}
