/* yeojido U3 design tokens — source: design yeojido v3 styles.css (:root, dark, no-JS dark, contrast more) and tokens.json. Values copied, none invented. */
/* load order: design-tokens.css -> components.css -> responsive.css */

/* ---------- theme: light set (default) ---------- */
:root{
  --brand-purple:#9349ff;
  --brand-red:#ff3a4e;
  --brand-blue:#626dff;
  --brand-grad:linear-gradient(125deg,#9349ff,#ff3a4e);
  --plum:#2a1446;
  --bg:#f6f4fb;
  --surface:#ffffff;
  --surface-tint:#efe8fb;
  --surface-closed:#efedf3;
  --night:#1a0f2e;
  --ink:#15111f;
  --ink-2:#4a4560;
  --ink-3:#625d78;
  --line:#ebe6f4;
  --hover:rgba(21,17,31,.06);
  --ok:#0f7a4a;
  --ok-bg:#e3f5ec;
  --off:#5f5974;
  --off-bg:#e6e3ed;
  --closed-rank:#7f7992;
  --cat-fg:#4b2a8a;
  --pressed-bg:#15111f;
  --pressed-fg:#ffffff;
  --pressed-sub:#d9d4e6;
  --seg-track:#e9e4f3;
  --seg-on:#ffffff;
  --btn-ink-bg:#15111f;
  --btn-ink-fg:#ffffff;
  --btn-ink-hover:#000000;
  --btn-soft-bg:#efe8fb;
  --btn-soft-fg:#3b1f70;
  --btn-soft-hover:#e4d9f8;
  --btn-line:#8f86a8;
  --glass-opaque:#ffffff;
  --glass-fill:rgba(255,255,255,.66);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(255,255,255,.4);
  --glass-depth:0 10px 28px -14px rgba(40,10,80,.3);
  --shadow-1:0 1px 0 rgba(21,17,31,.04),0 10px 30px -18px rgba(60,20,120,.22);
  --shadow-2:0 1px 0 rgba(21,17,31,.04),0 18px 36px -18px rgba(60,20,120,.35);
  --shadow-chip:0 1px 0 rgba(21,17,31,.05);
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-pill:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}

/* ---------- theme: dark set ---------- */
html[data-theme="dark"]{
  --bg:#0b0910;
  --surface:#17121f;
  --surface-tint:#221a31;
  --surface-closed:#110d17;
  --night:#1d1233;
  --ink:#f4f1fa;
  --ink-2:#c3bcd4;
  --ink-3:#a59eba;
  --line:#2c2440;
  --hover:rgba(255,255,255,.08);
  --ok:#5ee0a0;
  --ok-bg:#0f2d1f;
  --off:#c2bbd2;
  --off-bg:#2a2436;
  --closed-rank:#8a8399;
  --cat-fg:#d2c0ff;
  --pressed-bg:#efe8fb;
  --pressed-fg:#15111f;
  --pressed-sub:#4a4560;
  --seg-track:#221a31;
  --seg-on:#3a2d52;
  --btn-ink-bg:#7b3cf0;
  --btn-ink-fg:#ffffff;
  --btn-ink-hover:#6a2fe0;
  --btn-soft-bg:#2a2040;
  --btn-soft-fg:#e2d6ff;
  --btn-soft-hover:#342850;
  --btn-line:#7a6d9e;
  --glass-opaque:#1a1424;
  --glass-fill:rgba(24,18,34,.62);
  --glass-rim:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08);
  --glass-depth:0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-1:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px -18px rgba(0,0,0,.7);
  --shadow-2:inset 0 0 0 1px rgba(255,255,255,.10),0 18px 36px -18px rgba(0,0,0,.8);
  --shadow-chip:inset 0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}

/* no JS: follow the system setting (same values as html[data-theme="dark"]) */
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#0b0910;--surface:#17121f;--surface-tint:#221a31;--surface-closed:#110d17;--night:#1d1233;
    --ink:#f4f1fa;--ink-2:#c3bcd4;--ink-3:#a59eba;--line:#2c2440;--hover:rgba(255,255,255,.08);
    --ok:#5ee0a0;--ok-bg:#0f2d1f;--off:#c2bbd2;--off-bg:#2a2436;--closed-rank:#8a8399;--cat-fg:#d2c0ff;
    --pressed-bg:#efe8fb;--pressed-fg:#15111f;--pressed-sub:#4a4560;--seg-track:#221a31;--seg-on:#3a2d52;
    --btn-ink-bg:#7b3cf0;--btn-ink-fg:#ffffff;--btn-ink-hover:#6a2fe0;--btn-soft-bg:#2a2040;--btn-soft-fg:#e2d6ff;--btn-soft-hover:#342850;--btn-line:#7a6d9e;
    --glass-opaque:#1a1424;--glass-fill:rgba(24,18,34,.62);
    --glass-rim:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08);
    --glass-depth:0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-1:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 30px -18px rgba(0,0,0,.7);
    --shadow-2:inset 0 0 0 1px rgba(255,255,255,.10),0 18px 36px -18px rgba(0,0,0,.8);
    --shadow-chip:inset 0 0 0 1px rgba(255,255,255,.06);
    color-scheme:dark;
  }
}

/* more contrast: stronger secondary text and lines in both themes */
@media (prefers-contrast:more){
  :root{--ink-2:#2e2a3d;--ink-3:#3f3a52;--line:#8f88a3;--off:#3f3a52}
  html[data-theme="dark"]{--ink-2:#e6e1f0;--ink-3:#d3cce2;--line:#6f6689;--off:#e6e1f0}
}