/* JASK semantic tokens. Components consume these tokens; palettes live here only. */
:root, [data-theme="light"] {
  color-scheme: light;
  --j-bg: #fafafa; --j-surface: #ffffff; --j-surface-alt: #f4f4f5;
  --j-text: #18181b; --j-muted: #63636c; --j-border: #e4e4e7;
  --j-primary: #27272a; --j-on-primary: #ffffff; --j-primary-hover: #09090b;
  --j-selected: #efeff1; --j-selected-text: #27272a;
  --j-accent-text: var(--j-primary);
  --j-success: #17633d; --j-success-bg: #e6f3e9;
  --j-warning: #84520a; --j-warning-bg: #fff2d8;
  --j-danger: #a02d39; --j-danger-bg: #fcebed;
  --j-info: #245b99; --j-info-bg: #eaf1fc;
  --j-focus: #52525b; --j-shadow: 0 8px 24px rgb(24 24 27 / 3%);
  --j-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --j-font-sm: .8125rem; --j-font-base: .9375rem; --j-font-lg: 1.125rem;
  --j-space-1: 4px; --j-space-2: 8px; --j-space-3: 12px; --j-space-4: 16px;
  --j-space-5: 24px; --j-space-6: 32px; --j-radius: 12px; --j-control-radius: 7px;
}
[data-theme="ocean"] {
  color-scheme: light;
  --j-bg: #f8fafc; --j-surface: #ffffff; --j-surface-alt: #f1f5f9;
  --j-text: #17202e; --j-muted: #5f6b7c; --j-border: #e2e8f0;
  --j-primary: #175cd3; --j-on-primary: #ffffff; --j-primary-hover: #124ba9;
  --j-selected: #edf4ff; --j-selected-text: #1753b9;
  --j-focus: #175cd3; --j-shadow: 0 8px 24px rgb(15 23 42 / 3%);
}
[data-theme="dark"] {
  color-scheme: dark;
  --j-bg: #101114; --j-surface: #191a1f; --j-surface-alt: #24252c;
  --j-text: #f4f4f5; --j-muted: #a1a1aa; --j-border: #33343e;
  --j-primary: #b4b8ff; --j-on-primary: #191a38; --j-primary-hover: #ced0ff;
  --j-selected: #2c2c46; --j-selected-text: #d4d5ff;
  --j-success: #a2e3b8; --j-success-bg: #213e2c;
  --j-warning: #f6cf83; --j-warning-bg: #40321d;
  --j-danger: #ffb4bf; --j-danger-bg: #46282e;
  --j-info: #a9ceff; --j-info-bg: #263954;
  --j-focus: #a9ceff; --j-shadow: 0 10px 28px rgb(0 0 0 / 12%);
}
[data-theme="rose"] {
  color-scheme: light;
  --j-bg: #fcf8f9; --j-surface: #ffffff; --j-surface-alt: #f7f1f3;
  --j-text: #292126; --j-muted: #74616b; --j-border: #eae0e5;
  --j-primary: #c72554; --j-on-primary: #ffffff; --j-primary-hover: #a61b43;
  --j-selected: #fce7ee; --j-selected-text: #aa2047;
  --j-focus: #c72554; --j-radius: 14px; --j-control-radius: 8px;
  --j-shadow: 0 8px 24px rgb(90 25 48 / 3%);
}
[data-theme="gold"] {
  color-scheme: light;
  --j-bg: #faf9f6; --j-surface: #ffffff; --j-surface-alt: #f3f0e9;
  --j-text: #292720; --j-muted: #706655; --j-border: #e6e2d9;
  --j-primary: #d1ad57; --j-on-primary: #272216; --j-primary-hover: #c39a3f;
  --j-selected: #f6edd7; --j-selected-text: #755817;
  --j-accent-text: #89651e;
  --j-focus: #947028; --j-radius: 10px; --j-control-radius: 6px;
  --j-shadow: 0 8px 24px rgb(55 45 25 / 3%);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--j-font); font-size: var(--j-font-base); line-height: 1.6; color: var(--j-text); background: var(--j-bg); }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--j-border); border-radius: var(--j-control-radius); color: var(--j-text); background: var(--j-surface); text-decoration: none; font-weight: 600; }
button:hover, .button:hover { background: var(--j-surface-alt); }
.button-primary { background: var(--j-primary); color: var(--j-on-primary); border-color: var(--j-primary); }
.button-primary:hover { background: var(--j-primary-hover); }
button:disabled { opacity: .55; cursor: not-allowed; }
select, input, textarea { min-height: 40px; padding: 8px 10px; border: 1px solid var(--j-border); border-radius: var(--j-control-radius); background: var(--j-surface); color: var(--j-text); max-width: 100%; }
textarea { resize: vertical; width: 100%; }
input::placeholder { color: var(--j-muted); }
input[type="checkbox"] { min-height: auto; accent-color: var(--j-primary); }
:focus-visible { outline: 3px solid var(--j-focus); outline-offset: 3px; }
a { color: var(--j-accent-text); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2rem); line-height: 1.25; letter-spacing: -.03em; }
h2 { font-size: var(--j-font-lg); line-height: 1.4; }
h3 { font-size: 1rem; }
.muted, small { color: var(--j-muted); }
small { font-size: var(--j-font-sm); }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon[data-style="round"] { stroke-width: 2; }
.icon[data-style="solid"] { fill: currentColor; stroke: none; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 5px; padding: 3px 8px; font-size: var(--j-font-sm); font-weight: 600; color: var(--j-muted); background: var(--j-surface-alt); white-space: nowrap; }
.badge-success { color: var(--j-success); background: var(--j-success-bg); }
.badge-warning { color: var(--j-warning); background: var(--j-warning-bg); }
.badge-danger { color: var(--j-danger); background: var(--j-danger-bg); }
.badge-info { color: var(--j-info); background: var(--j-info-bg); }
.field-label { display: block; font-size: var(--j-font-sm); font-weight: 600; margin-bottom: 8px; }
.panel { background: var(--j-surface); border: 1px solid var(--j-border); border-radius: var(--j-radius); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: 10px; background: var(--j-surface); }
.skip-link:focus { top: 16px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (pointer: coarse) { button, .button, select, input { min-height: 44px; } input, select, textarea { font-size: 1rem; } }