/* Design tokens. Everything on the page takes its colours, type, radii and shadows from here, so a theme is just another
   set of these values. A theme is chosen with data-theme on <html>; without one the page follows the system setting.
   The dark theme is the nested table's own palette, which the rest of the page now shares.
   Prototyped as docs/viz/tokens.css: keep the two the same. */

:root {
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs: 14px; --fs-s: 13px; --fs-xs: 12px; --fs-h1: 22px; --fs-h2: 16px;
  --r-s: 6px; --r-m: 8px; --r-l: 12px; --r-pill: 999px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --sb-w: 248px; --sb-w-icons: 56px; --top-h: 48px;
}

/* Light ------------------------------------------------------------------------------------------------ */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f8; --surface: #ffffff; --raised: #ffffff; --sunken: #f0f1f4;
  --popover: rgb(255 255 255 / .97); --sb-bg: #f0f1f4;
  --text: #1f2328; --text-2: #3b3f47; --text-3: #5b5f68; --muted: #6a6e77; --faint: #9a9da6; --strong: #0b0c0e;
  /* --ink is what translucent fills and rules are made of, --shade what shadows are made of. */
  --ink: #1f2328; --shade: #2a3040;
  --line: color-mix(in srgb, var(--ink) 11%, transparent); --line-strong: color-mix(in srgb, var(--ink) 30%, transparent);
  --hover: color-mix(in srgb, var(--ink) 6%, transparent); --press: color-mix(in srgb, var(--ink) 10%, transparent);
  --accent: #1f6fd1; --accent-text: #ffffff; --focus: #2f81f7;
  --ok: #157a55; --warn: #a96400; --danger: #c4302b; --bad: #d93a3a; --bad-text: #b42318;
  --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 10%, transparent);
  --shadow-m: 0 8px 24px color-mix(in srgb, var(--shade) 16%, transparent);
  --c-string: #6b5ce7; --c-number: #2a86c1; --c-money: #12946f; --c-date: #c07a1c; --c-bool: #c94f86;
  --c-enum: #d4643f; --c-id: #6d7380; --c-list: #7c828c; --c-count: #4f5560; --c-group: #7c828c;
  --j-key: #8a3ffc; --j-str: #1b7a43; --j-num: #2457d6; --j-lit: #b3261e;
}

/* Dark ------------------------------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121316; --surface: #17181c; --raised: #1e1f25; --sunken: #0e0f11;
  --popover: rgb(30 31 37 / .96); --sb-bg: #0f1013;
  --text: #e8e8ec; --text-2: #c3c5cc; --text-3: #9a9da6; --muted: #7d808a; --faint: #62656e; --strong: #ffffff;
  --ink: #ffffff; --shade: #000000;
  --line: color-mix(in srgb, var(--ink) 8%, transparent); --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);
  --hover: color-mix(in srgb, var(--ink) 7%, transparent); --press: color-mix(in srgb, var(--ink) 12%, transparent);
  --accent: #58aad9; --accent-text: #08131b; --focus: #8fd3ff;
  --ok: #45c3a0; --warn: #e2aa5c; --danger: #ff7b7b; --bad: #ff6464; --bad-text: #ff9e9e;
  --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 40%, transparent);
  --shadow-m: 0 12px 34px color-mix(in srgb, var(--shade) 50%, transparent);
  --c-string: #9283f8; --c-number: #58aad9; --c-money: #45c3a0; --c-date: #e2aa5c; --c-bool: #e283aa;
  --c-enum: #ef8b6e; --c-id: #8a8f9c; --c-list: #a3a8b0; --c-count: #c8ccd4; --c-group: #a3a8b0;
  --j-key: #c6a7ff; --j-str: #8fd19e; --j-num: #7aa2ff; --j-lit: #ff8a80;
}

/* No choice made: follow the system. This repeats the dark values above; keep the two in step. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #121316; --surface: #17181c; --raised: #1e1f25; --sunken: #0e0f11;
    --popover: rgb(30 31 37 / .96); --sb-bg: #0f1013;
    --text: #e8e8ec; --text-2: #c3c5cc; --text-3: #9a9da6; --muted: #7d808a; --faint: #62656e; --strong: #ffffff;
    --ink: #ffffff; --shade: #000000;
    --line: color-mix(in srgb, var(--ink) 8%, transparent); --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);
    --hover: color-mix(in srgb, var(--ink) 7%, transparent); --press: color-mix(in srgb, var(--ink) 12%, transparent);
    --accent: #58aad9; --accent-text: #08131b; --focus: #8fd3ff;
    --ok: #45c3a0; --warn: #e2aa5c; --danger: #ff7b7b; --bad: #ff6464; --bad-text: #ff9e9e;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 40%, transparent);
    --shadow-m: 0 12px 34px color-mix(in srgb, var(--shade) 50%, transparent);
    --c-string: #9283f8; --c-number: #58aad9; --c-money: #45c3a0; --c-date: #e2aa5c; --c-bool: #e283aa;
    --c-enum: #ef8b6e; --c-id: #8a8f9c; --c-list: #a3a8b0; --c-count: #c8ccd4; --c-group: #a3a8b0;
    --j-key: #c6a7ff; --j-str: #8fd19e; --j-num: #7aa2ff; --j-lit: #ff8a80;
  }
}

/* Contrast, whatever the theme: data-contrast on <html> ("more", "most"; Hyper.UI.Nav.Contrast). Text darker (or lighter),
   lines and edges stronger, surfaces further apart: for a display that washes the standard palette out. The page sets
   "more" itself where the system asks for more contrast. Each dark block sets every value its light block does, so it
   wins wherever it applies. */
:root[data-contrast="more"] {
    --bg: #eef0f3; --surface: #ffffff; --raised: #ffffff; --sunken: #e7e9ed; --sb-bg: #e7e9ed;
    --text: #121417; --text-2: #262a31; --text-3: #3d4149; --muted: #4b4f58; --faint: #6b6f78; --strong: #000000; --ink: #121417;
    --line: color-mix(in srgb, var(--ink) 18%, transparent); --line-strong: color-mix(in srgb, var(--ink) 42%, transparent);
    --hover: color-mix(in srgb, var(--ink) 8%, transparent); --press: color-mix(in srgb, var(--ink) 13%, transparent);
    --accent: #1a5fb8; --focus: #1f6fe0;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 16%, transparent);
}
:root[data-contrast="most"] {
    --bg: #e6e8ec; --surface: #ffffff; --raised: #ffffff; --sunken: #dde0e5; --sb-bg: #dde0e5;
    --text: #000000; --text-2: #121417; --text-3: #262a31; --muted: #33373e; --faint: #4f535b; --strong: #000000; --ink: #000000;
    --line: color-mix(in srgb, var(--ink) 28%, transparent); --line-strong: color-mix(in srgb, var(--ink) 58%, transparent);
    --hover: color-mix(in srgb, var(--ink) 10%, transparent); --press: color-mix(in srgb, var(--ink) 16%, transparent);
    --accent: #124f9c; --focus: #0b57c9;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 22%, transparent);
}
:root[data-theme="dark"][data-contrast="more"] {
    --bg: #0c0d0f; --surface: #18191e; --raised: #22242a; --sunken: #08090a; --sb-bg: #08090a;
    --text: #f5f5f7; --text-2: #dddfe4; --text-3: #babdc5; --muted: #a3a6b0; --faint: #868993; --strong: #ffffff; --ink: #ffffff;
    --line: color-mix(in srgb, var(--ink) 15%, transparent); --line-strong: color-mix(in srgb, var(--ink) 45%, transparent);
    --hover: color-mix(in srgb, var(--ink) 10%, transparent); --press: color-mix(in srgb, var(--ink) 15%, transparent);
    --accent: #6cbbe6; --focus: #a3dcff;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 50%, transparent);
}
:root[data-theme="dark"][data-contrast="most"] {
    --bg: #000000; --surface: #121316; --raised: #1d1e23; --sunken: #000000; --sb-bg: #000000;
    --text: #ffffff; --text-2: #f0f1f4; --text-3: #d3d5db; --muted: #bdc0c7; --faint: #a1a4ad; --strong: #ffffff; --ink: #ffffff;
    --line: color-mix(in srgb, var(--ink) 24%, transparent); --line-strong: color-mix(in srgb, var(--ink) 60%, transparent);
    --hover: color-mix(in srgb, var(--ink) 13%, transparent); --press: color-mix(in srgb, var(--ink) 19%, transparent);
    --accent: #8dcdf2; --focus: #c2e8ff;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 60%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-contrast="more"] {
    --bg: #0c0d0f; --surface: #18191e; --raised: #22242a; --sunken: #08090a; --sb-bg: #08090a;
    --text: #f5f5f7; --text-2: #dddfe4; --text-3: #babdc5; --muted: #a3a6b0; --faint: #868993; --strong: #ffffff; --ink: #ffffff;
    --line: color-mix(in srgb, var(--ink) 15%, transparent); --line-strong: color-mix(in srgb, var(--ink) 45%, transparent);
    --hover: color-mix(in srgb, var(--ink) 10%, transparent); --press: color-mix(in srgb, var(--ink) 15%, transparent);
    --accent: #6cbbe6; --focus: #a3dcff;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 50%, transparent);
  }
  :root:not([data-theme])[data-contrast="most"] {
    --bg: #000000; --surface: #121316; --raised: #1d1e23; --sunken: #000000; --sb-bg: #000000;
    --text: #ffffff; --text-2: #f0f1f4; --text-3: #d3d5db; --muted: #bdc0c7; --faint: #a1a4ad; --strong: #ffffff; --ink: #ffffff;
    --line: color-mix(in srgb, var(--ink) 24%, transparent); --line-strong: color-mix(in srgb, var(--ink) 60%, transparent);
    --hover: color-mix(in srgb, var(--ink) 13%, transparent); --press: color-mix(in srgb, var(--ink) 19%, transparent);
    --accent: #8dcdf2; --focus: #c2e8ff;
    --shadow-s: 0 1px 2px color-mix(in srgb, var(--shade) 60%, transparent);
  }
}