/*
  Paika design tokens — the only place where colors are defined.
  Every page (landing, login, app, admin, downloads) reads these through
  data-theme on <html> or .pk-app. Screen code must not contain color values
  (checked by scripts/test-ui-tokens.mjs).
  Rules: control/standards/UI-DESIGN-RULES.md (user decision 2026-10-28):
  one ink background, yellow is the only accent (primary button, logo, selection,
  focus), status is always written in words.
*/
[data-theme] {
  /* Spacing scale (px): 4 8 12 16 20 24 32 48 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Controls: one height per size, same radius everywhere. */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-px: 16px;
  --control-px-sm: 12px;
  --control-radius: 8px;
  --control-font: 600 14px/1 var(--font-sans);
  --panel-radius: 8px;
  --focus-ring: 2px solid var(--brand);

  --font-sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-brand: "Avenir Next", Arial, sans-serif;

  /* Brand (same in both themes). */
  --brand: #ffd43b;
  --brand-hover: #ffde66;
  --brand-press: #e8be22;
  --on-brand: #191b20;
  --ink: #191b20;

  /* The one accent is the brand yellow; older code reads --accent. */
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --on-accent: var(--on-brand);

  /* Third-party sign-in buttons keep their own brand colors (provider rules). */
  --kakao-bg: #fee500;
  --kakao-text: #191919;
  --apple-bg: #f5f5f7;
  --apple-text: #111111;
  --on-danger: #ffffff;
  --shadow-color: rgb(0 0 0 / 0.25);
  /* Landing card on the brand yellow: ink text (12.1:1). */
  --card-brand: var(--brand);
  --card-brand-fg: var(--ink);
  /* Landing product cards (user decisions 2026-10-31): the same calm dark tones in both
     themes with light text; text 10.1:1+ and muted text 5.1:1+ on every card. */
  --card-p: #20364a;
  --card-o: #2f2a4a;
  --card-s: #1f3d36;
  --card-t: #46302a;
  --card-fg: #ecedef;
  --card-sub: #a6abb3;
}

[data-theme="dark"] {
  --bg: #191b20;
  --surface: #21242b;
  --surface-2: #292d35;
  --line: #323640;
  --line-strong: #454a55;
  --text: #ecedef;
  --muted: #a6abb3;
  --faint: #7f8590;
  /* Yellow may be text on the ink background. */
  --accent-text: var(--brand);
  --ok: #6fd3a2;
  --ok-bg: #1f3229;
  --warn: #f0bd66;
  --warn-bg: #3a3121;
  --danger: #ef8d8d;
  --danger-bg: #3a2326;
  --danger-solid: #c2453a;
  --idle-bg: #292d35;
  --idle: #c8cbd0;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f3ec;
  --line: #e4e2da;
  --line-strong: #777b83;
  --text: #191b20;
  --muted: #5b5f65;
  --faint: #6b6f76;
  /* Never yellow as small text on white (brand rule): ink instead. */
  --accent-text: var(--text);
  --ok: #185c38;
  --ok-bg: #e5f3ea;
  --warn: #7a4a00;
  --warn-bg: #fff1d2;
  --danger: #a4261c;
  --danger-bg: #fdecea;
  --danger-solid: #a4261c;
  --idle-bg: #f5f3ec;
  --idle: #3a3d45;
  color-scheme: light;
}

/* Buttons shared by every page.
   Primary = yellow + ink text, one per screen; default = secondary (outline);
   danger = destructive (red outline). Same height and radius everywhere;
   hover/focus never change size. */
[data-theme] :is(.pk-btn, .primary-button, .secondary-button, .pk-danger-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 var(--control-px); box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--control-radius);
  background: transparent; color: var(--text);
  font: var(--control-font); text-decoration: none; cursor: pointer; white-space: nowrap;
}
[data-theme] :is(.pk-btn, .secondary-button):hover { border-color: var(--text); background: var(--surface-2); }
[data-theme] :is(.pk-btn-primary, .primary-button) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
[data-theme] :is(.pk-btn-primary, .primary-button):hover { background: var(--brand-hover); border-color: var(--brand-hover); }
[data-theme] :is(.pk-btn-primary, .primary-button):active { background: var(--brand-press); border-color: var(--brand-press); }
[data-theme] .pk-btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
[data-theme] .pk-btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }
[data-theme] .pk-danger-btn { background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-danger); }
[data-theme] .pk-btn-small { min-height: var(--control-h-sm); padding: 0 var(--control-px-sm); font-size: 13px; }
[data-theme] :is(button, a, summary, input, select, textarea):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
[data-theme] :is(button, .pk-btn):disabled { opacity: .45; cursor: not-allowed; }
/* Links: text color with an underline; yellow only on dark hover. */
[data-theme] .pk-link { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
[data-theme] .pk-link:hover { color: var(--accent-text); }