/*
 * Design tokens for the three platform skins x two themes, adapted from the
 * app's frontend/src/lib/theme/tokens.css (comfortable density only).
 *
 * <html data-platform="mac|win|gnome" data-theme="light|dark">
 *
 * Both attributes always hold resolved values (skin-boot.js resolves "auto"
 * before first paint), so no prefers-color-scheme query is needed here.
 * Without JS the page stays GNOME light, as written in the HTML.
 */

/* ---------- base (shared, mac-like light) ---------- */
:root {
  --wall: radial-gradient(1200px 700px at 0% 0%, #cfe0ff 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 100%, #f6d9e6 0%, transparent 55%), #eceef3;
  --side: rgba(245, 246, 250, 0.58);
  --side-line: rgba(0, 0, 0, 0.06);
  --side-blur: blur(30px) saturate(1.6);
  --panel: #fbfbfc;
  --card: #ffffff;
  --sunk: #f2f3f6;
  --text: #1d1d1f;
  --muted: #6e6e76;
  --faint: #a1a1aa;
  --line: rgba(0, 0, 0, 0.075);
  --stroke2: rgba(0, 0, 0, 0.14);
  --hover: rgba(127, 127, 140, 0.12);
  --selected: rgba(127, 127, 140, 0.2);
  --fill: rgba(127, 127, 140, 0.14);
  --accent: #3a6ff7;
  --accent-soft: rgba(58, 111, 247, 0.11);
  --on-accent: #fff;
  --rec: #ef4f43;
  --warn: #e2902a;
  --ok: #2fa866;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 6px 24px rgba(20, 30, 60, 0.07);
  --pop-shadow: 0 12px 40px rgba(20, 30, 60, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif;

  /* radii (skins override) */
  --r-ctl: 7px;
  --r-btn: 8px;
  --r-card: 14px;
  --r-pop: 18px;
  --r-nav: 7px;
  /* site only: the drawn window around a screenshot */
  --r-win: 10px;
  --win-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 22px 60px rgba(20, 30, 60, 0.2), 0 4px 14px rgba(20, 30, 60, 0.08);

  /* data palette */
  --data-0: #e5536f;
  --data-1: #8d6cf0;
  --data-2: #efa23a;
  --data-3: #3fae5a;
  --data-4: #2a9fd6;
  --data-5: #4f7cff;
  --data-6: #b8794a;
  --data-7: #24b0a0;

  /* density: comfortable */
  --fs: 15px;
  --fs-ui: 13px;
  --fs-small: 12px;
  --ctl-h: 32px;
  --toolbar-h: 52px;
  --side-w: 228px;
  --nav-py: 6px;
  --nav-fs: 14px;
  --nav-gap: 1px;
  --pill-h: 30px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --wall: radial-gradient(1200px 700px at 0% 0%, #1e2a4a 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 100%, #3a1f33 0%, transparent 55%), #141417;
  --side: rgba(36, 36, 42, 0.55);
  --side-line: rgba(255, 255, 255, 0.06);
  --panel: #1b1b1f;
  --card: #232328;
  --sunk: #18181b;
  --text: #f2f2f5;
  --muted: #9a9aa4;
  --faint: #62626b;
  --line: rgba(255, 255, 255, 0.08);
  --stroke2: rgba(255, 255, 255, 0.18);
  --accent: #6b93ff;
  --accent-soft: rgba(107, 147, 255, 0.15);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 24px rgba(0, 0, 0, 0.25);
  --pop-shadow: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.1);
  --win-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 22px 60px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* ---------- macOS: system blue, vibrancy sidebar ---------- */
:root[data-platform="mac"] {
  --font: -apple-system, "SF Pro Text", BlinkMacSystemFont, system-ui, sans-serif;
  --accent: #007aff;
  --accent-soft: rgba(0, 122, 255, 0.11);
}
:root[data-platform="mac"][data-theme="dark"] {
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.17);
}

/* ---------- Windows 11 / Fluent: Mica-like wall, 4px radii ---------- */
:root[data-platform="win"] {
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --wall: radial-gradient(1400px 900px at 8% -10%, #e3eaf6 0%, transparent 70%),
    radial-gradient(1000px 800px at 100% 110%, #efe7ee 0%, transparent 60%), #f3f3f3;
  --side: transparent;
  --side-line: transparent;
  --side-blur: none;
  --panel: #f9f9f9;
  --card: #ffffff;
  --sunk: #f3f3f3;
  --text: #1b1b1b;
  --muted: #5d5d5d;
  --faint: #8a8a8a;
  --line: rgba(0, 0, 0, 0.08);
  --stroke2: rgba(0, 0, 0, 0.16);
  --hover: color-mix(in srgb, var(--text) 5%, transparent);
  --selected: color-mix(in srgb, var(--text) 8%, transparent);
  --accent: #0067c0;
  --accent-soft: rgba(0, 103, 192, 0.1);
  --rec: #c42b1c;
  --warn: #c27c0e;
  --ok: #0f7b0f;
  --shadow: none;
  --pop-shadow: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.07);
  --r-ctl: 4px;
  --r-btn: 4px;
  --r-card: 8px;
  --r-pop: 8px;
  --r-nav: 4px;
  --r-win: 8px;
  --win-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.18), 0 2px 21px rgba(0, 0, 0, 0.12);
  --toolbar-h: 48px;
  --data-0: #c239b3;
  --data-1: #8764b8;
  --data-2: #ca5010;
  --data-3: #498205;
  --data-4: #038387;
  --data-5: #0078d4;
  --data-6: #986f0b;
  --data-7: #00a19a;
}
:root[data-platform="win"][data-theme="dark"] {
  --wall: radial-gradient(1400px 900px at 8% -10%, #1d2533 0%, transparent 70%),
    radial-gradient(1000px 800px at 100% 110%, #281f27 0%, transparent 60%), #202020;
  --panel: #272727;
  --card: #2d2d2d;
  --sunk: #1f1f1f;
  --text: #ffffff;
  --muted: #c5c5c5;
  --faint: #8b8b8b;
  --line: rgba(255, 255, 255, 0.08);
  --stroke2: rgba(255, 255, 255, 0.2);
  --accent: #4cc2ff;
  --accent-soft: rgba(76, 194, 255, 0.14);
  --on-accent: #000;
  --rec: #ff99a4;
  --warn: #fce100;
  --ok: #6ccb5f;
  --pop-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --win-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 32px 64px rgba(0, 0, 0, 0.5);
  --data-0: #ee5fb7;
  --data-1: #b4a0ff;
  --data-2: #f7894a;
  --data-3: #8cbd18;
  --data-4: #00b7c3;
  --data-5: #4cc2ff;
  --data-6: #d6a700;
  --data-7: #00c8bd;
}

/* ---------- GNOME / libadwaita: opaque, gray chrome, GNOME palette ---------- */
:root[data-platform="gnome"] {
  --font: "Adwaita Sans", Cantarell, Inter, system-ui, sans-serif;
  --wall: #fafafb;
  --side: #ebebed;
  --side-line: rgba(0, 0, 6, 0.08);
  --side-blur: none;
  --panel: #fafafb;
  --card: #ffffff;
  --sunk: #f0f0f2;
  --text: #2e2e33;
  --muted: #6c6c72;
  --faint: #9a9a9f;
  --line: rgba(0, 0, 6, 0.1);
  --stroke2: rgba(0, 0, 6, 0.16);
  --hover: color-mix(in srgb, var(--text) 6%, transparent);
  --selected: color-mix(in srgb, var(--text) 14%, transparent);
  --fill: color-mix(in srgb, var(--text) 8%, transparent);
  --accent: #3584e4;
  --accent-soft: rgba(53, 132, 228, 0.13);
  --rec: #e01b24;
  --warn: #e5a50a;
  --ok: #2ec27e;
  --shadow: 0 0 0 1px rgba(0, 0, 6, 0.09);
  --pop-shadow: 0 1px 5px 1px rgba(0, 0, 6, 0.09), 0 2px 14px 3px rgba(0, 0, 6, 0.05),
    0 0 0 1px rgba(0, 0, 6, 0.14);
  --r-ctl: 6px;
  --r-btn: 6px;
  --r-card: 12px;
  --r-pop: 14px;
  --r-nav: 6px;
  --r-win: 12px;
  --win-shadow: 0 0 0 1px rgba(0, 0, 6, 0.14), 0 2px 14px 3px rgba(0, 0, 6, 0.07), 0 16px 40px rgba(0, 0, 6, 0.1);
  --toolbar-h: 47px;
  --data-0: #e01b24;
  --data-1: #9141ac;
  --data-2: #ff7800;
  --data-3: #986a44;
  --data-4: #e5a50a;
  --data-5: #3584e4;
  --data-6: #1a5fb4;
  --data-7: #2ec27e;
}
:root[data-platform="gnome"][data-theme="dark"] {
  --wall: #222226;
  --side: #2e2e32;
  --side-line: rgba(0, 0, 6, 0.36);
  --panel: #222226;
  --card: #36363a;
  --sunk: #1d1d20;
  --text: #ffffff;
  --muted: #a8a8ad;
  --faint: #77767b;
  --line: rgba(255, 255, 255, 0.09);
  --stroke2: rgba(255, 255, 255, 0.16);
  --accent: #3584e4;
  --accent-soft: rgba(53, 132, 228, 0.2);
  --rec: #ff7b63;
  --warn: #f5c211;
  --ok: #2ec27e;
  --shadow: 0 0 0 1px rgba(0, 0, 6, 0.3);
  --pop-shadow: 0 2px 14px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 6, 0.5);
  --win-shadow: 0 0 0 1px rgba(0, 0, 6, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.45);
  --data-0: #f66151;
  --data-1: #c061cb;
  --data-2: #ffa348;
  --data-3: #cdab8f;
  --data-4: #f8e45c;
  --data-5: #62a0ea;
  --data-6: #99c1f1;
  --data-7: #57e389;
}

/* ---------- base elements ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
body {
  font: 450 var(--fs) / 1.5 var(--font);
  color: var(--text);
  background: var(--wall);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  transition:
    transform 0.12s cubic-bezier(0.3, 0.7, 0.4, 1.4),
    background 0.2s,
    opacity 0.2s,
    color 0.2s;
}
button:active:not(:disabled) {
  transform: scale(0.95);
}
a {
  color: var(--accent);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* focus rings, per skin (as in the app) */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}
[data-platform="win"] :focus-visible {
  outline: 2px solid var(--text);
}
[data-platform="gnome"] :focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  button:active:not(:disabled) {
    transform: none;
  }
}