/* WONS BI tokens. Single source for colour, type, shape, space and motion, in both themes. */
:root {
  color-scheme: light;

  /* surfaces */
  --page: #ffffff;
  --stage: #ecebe8;
  --tile: #ffffff;
  --tile-soft: #f5f5f2;
  --charcoal: #434343;
  --charcoal-deep: #2d2d2d;
  --sidebar: #2c2c2c;

  /* text */
  --ink: #111111;
  --ink-2: #5a5a5a;
  --on-charcoal: #f3f2ee;
  --on-charcoal-2: #c9c7bf;
  --line: #e4e4e0;
  --line-strong: #cfcec8;

  /* accent */
  --pos: #26694b;
  --neg: #a94444;
  --neg-soft: #f6e3e3;
  --on-neg: #ffffff;

  /* semantic actions */
  --action: #2d2d2d;
  --action-ink: #ffffff;
  --action-hover: #434343;
  --focus: var(--accent-text);
  --scroll-thumb: #cfcec8;

  /* data palette (charts): eight colours that read on a white card and on the dark card; the server replaces them with the theme's (lib/themes.js) */
  --d1: #0f8f87;
  --d2: #d26304;
  --d3: #5b6fd6;
  --d4: #d4467a;
  --d5: #a58018;
  --d6: #389759;
  --d7: #8a6fd0;
  --d8: #4e86a8;
  --gold: #957530;

  /* type */
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.25rem, 1.5rem + 2.9vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.7vw, 2.25rem);
  --fs-page: 1.625rem;
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1rem, 0.95rem + 0.45vw, 1.1875rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-stat: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);

  /* shape */
  --r-tile: 14px;
  --r-inner: 10px;
  --r-input: 8px;
  --r-chip: 6px;
  --r-control: 8px;
  --r-pill: 999px;

  /* space (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 26px;
  --s-7: 40px;
  --s-8: 52px;
  --s-9: 76px;
  --s-10: 92px;

  /* layout */
  --gutter: clamp(16px, 2.4vw, 32px);
  --stage-pad: clamp(18px, 2.7vw, 38px);
  --nav-h: 64px;
  --sidebar-w: 224px;
  --sidebar-w-min: 68px;
  --content-max: 1240px;
  --portal-max: 1920px;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-slow: 0.6s;

  /* elevation: only for things that float above others */
  --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
  --scrim: rgba(0, 0, 0, 0.42);

  /* portal shell: a flat sidebar, hairline-bordered cards and controls */
  --side-bg: #ffffff;
  --canvas: #f6f5f2;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a5a5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --seg-active: #ffffff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* public pages: lime highlighter. --lime is a fill (marker, CTA tile) with --on-lime text on it;
     --lime-text is the readable lime-family colour for text and strokes on page, stage and tile;
     --lime-soft is a quiet tint. On charcoal use --lime itself. */
  --lime: #d4ef4b;
  --on-lime: #151a05;
  --lime-soft: #e9f2b8;
  --lime-text: #4d6800;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0e0e0d;
    --stage: #1a1a19;
    --tile: #242423;
    --tile-soft: #2d2d2b;
    --charcoal: #313130;
    --charcoal-deep: #0a0a09;
    --sidebar: #161615;
    --ink: #f3f2ee;
    --ink-2: #a9a8a1;
    --on-charcoal: #f3f2ee;
    --on-charcoal-2: #b6b4ab;
    --line: #34342f;
    --line-strong: #4a4a44;
    --pos: #6fcba0;
    --neg: #e08a8a;
    --neg-soft: #3a2a2a;
    --on-neg: #111111;
    --action: #ecebe6;
    --action-ink: #111111;
    --action-hover: #ffffff;
    --focus: var(--accent-text);
    --scroll-thumb: #4a4a44;
    --gold: #d9bc7a;
    --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
    --scrim: rgba(0, 0, 0, 0.62);
    --side-bg: #141413;
    --canvas: #0e0e0d;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9a8a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    --seg-active: #3a3a37;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lime: #c9e64a;
    --on-lime: #151a05;
    --lime-soft: #2a3212;
    --lime-text: #c9e64a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e0e0d;
  --stage: #1a1a19;
  --tile: #242423;
  --tile-soft: #2d2d2b;
  --charcoal: #313130;
  --charcoal-deep: #0a0a09;
  --sidebar: #161615;
  --ink: #f3f2ee;
  --ink-2: #a9a8a1;
  --on-charcoal: #f3f2ee;
  --on-charcoal-2: #b6b4ab;
  --line: #34342f;
  --line-strong: #4a4a44;
  --pos: #6fcba0;
  --neg: #e08a8a;
  --neg-soft: #3a2a2a;
  --on-neg: #111111;
  --action: #ecebe6;
  --action-ink: #111111;
  --action-hover: #ffffff;
  --focus: var(--accent-text);
  --scroll-thumb: #4a4a44;
  --gold: #d9bc7a;
  --shadow-float: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
  --scrim: rgba(0, 0, 0, 0.62);
  --side-bg: #141413;
  --canvas: #0e0e0d;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9a8a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  --seg-active: #3a3a37;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lime: #c9e64a;
  --on-lime: #151a05;
  --lime-soft: #2a3212;
  --lime-text: #c9e64a;
}

/* accent: the app wears the theme the server picked (lib/themes.js), written by the head script from data-accent-vars. What follows is the teal fallback,
   and the eight named colours a timeline can take through [data-swatch] (generated with lib/theme.js derive()). */
:root, [data-swatch="teal"] {
  --accent: light-dark(#0f766e, #68b5ac);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#03665f, #75c2b9);
  --accent-soft: light-dark(#e7f1f1, #303e3c);
  --accent-text: light-dark(#0f766e, #68b5ac);
  --accent-on-dark: light-dark(#72bfb5, #72bfb5);
}
[data-swatch="blue"] {
  --accent: light-dark(#2563eb, #73a2ff);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#1652da, #89b0fb);
  --accent-soft: light-dark(#e9effd, #323b4b);
  --accent-text: light-dark(#2260e7, #7aa6fc);
  --accent-on-dark: light-dark(#89b0fb, #89b0fb);
}
[data-swatch="indigo"] {
  --accent: light-dark(#4f46e5, #8e9afd);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#4433d3, #9eaafa);
  --accent-soft: light-dark(#ededfc, #37394a);
  --accent-text: light-dark(#4f46e5, #929efa);
  --accent-on-dark: light-dark(#9eaafa, #9eaafa);
}
[data-swatch="violet"] {
  --accent: light-dark(#7c3aed, #a990fc);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#6f24db, #b5a0fe);
  --accent-soft: light-dark(#f2ebfd, #3c374a);
  --accent-text: light-dark(#7c3aed, #ac95fa);
  --accent-on-dark: light-dark(#b7a5fd, #b7a5fd);
}
[data-swatch="rose"] {
  --accent: light-dark(#e11d48, #fe707c);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#c9133e, #fd8a90);
  --accent-soft: light-dark(#fce8ed, #4b3233);
  --accent-text: light-dark(#cd1a41, #fc7882);
  --accent-on-dark: light-dark(#fc9096, #fc9096);
}
[data-swatch="amber"] {
  --accent: light-dark(#b15f00, #e58c3e);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#9a5510, #f3984c);
  --accent-soft: light-dark(#f7efe6, #473728);
  --accent-text: light-dark(#a05600, #e88f42);
  --accent-on-dark: light-dark(#f69c4f, #f69c4f);
}
[data-swatch="slate"] {
  --accent: light-dark(#64748b, #96a6bc);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#56667c, #a3b2c9);
  --accent-soft: light-dark(#f0f1f3, #393b3f);
  --accent-text: light-dark(#5c6b82, #96a6bc);
  --accent-on-dark: light-dark(#a2b3c9, #a2b3c9);
}
[data-swatch="graphite"] {
  --accent: light-dark(#4b5563, #9ba5b4);
  --accent-ink: light-dark(#ffffff, #111111);
  --accent-hover: light-dark(#3e4755, #a7b2c0);
  --accent-soft: light-dark(#edeeef, #393b3d);
  --accent-text: light-dark(#4b5563, #9ba5b4);
  --accent-on-dark: light-dark(#a7b1c1, #a7b1c1);
}