/* Design tokens — the single source of truth for the app, the demo, and the
   marketing pages. See docs/design/12-design-system.md.

   This file lives in site/ because site/ is the server's static root
   (server/app.ts), so the marketing pages get it at /tokens.css with no build
   step and no copy that can go stale. The app reaches the same file on disk
   through the @import at the top of workbench/style.css, which Vite inlines
   into the bundle.

   Theming is three-state. Bare :root carries the complete light palette; the
   prefers-color-scheme block is guarded by :root:not([data-theme='light']) so
   an explicit light choice wins over a dark OS; the [data-theme='dark'] block
   repeats the dark values so an explicit dark choice wins over a light OS.
   Every colour token is defined on bare :root — never only inside a media or
   attribute block.

   Control conventions: secondary actions sit on --chip-bg so they read
   against both the page (--paper) and cards (--card); primary actions use
   --accent. Radii: --radius-lg surfaces, --radius-sm controls, --radius-xs
   badges. */

:root {
  /* ---- surfaces and ink ---- */
  --paper: #FAF9F5;
  --card: #FFFEFB;
  --ink: #1C1B18;
  --muted: #6E6A60;
  --faint: #98937F;
  --line: #DDD9CE;
  --rail: #B8AE99;
  --chip-bg: #F1EFE8;
  /* Translucent rather than solid: a hover lands on both --paper and --card
     and must not repaint either one's tint. */
  --hover-bg: rgba(28, 27, 24, 0.05);
  --shadow-card: 0 1px 2px rgba(28, 27, 24, 0.05), 0 8px 24px -16px rgba(28, 27, 24, 0.18);
  /* Popovers and share panels float higher than cards and need a heavier
     shadow to separate from the surface they cover. */
  --shadow-popover: 0 10px 30px rgba(28, 27, 24, 0.14);
  --scrim: rgba(28, 27, 24, 0.35);

  /* ---- semantic colour ---- */
  --accent: #38618F;
  --accent-soft: #E7EEF6;
  --add: #2F7D46;
  --add-bg: #E8F3EB;
  --del: #B0402F;
  --del-bg: #F8ECE9;
  /* A merge is not a warning and a refusal is not an error, so neither
     borrows --accent or --del. --merge shares lane 1's purple: a merge row
     and the lane it lands on should read as related. */
  --merge: #7A4E9B;
  --warn: #A8621A;

  /* ---- fixed in both themes ---- */
  /* Engraved notation is black ink on white paper whatever the chrome does,
     so the score surface and the marks inside it never take dark values. */
  --engrave-paper: #FFFFFF;
  --note-select: #38618F;
  --note-add: #2F7D46;
  --note-del: #B0402F;
  /* Text on a generated identity colour (.id-avatar's hsl() hue), which is
     always mid-lightness in both themes. */
  --ink-on-hue: #FFFFFF;

  /* ---- history graph lanes ----
     Colour answers "which thread is this commit on" at a glance; with one
     colour you trace every curve by eye. Hues stay spread rather than
     sequential so adjacent lanes never look related. Lane 0 is --accent and
     lane 5 is --muted in both themes, which ties the graph to the palette. */
  --lane-0: #38618F;
  --lane-1: #7A4E9B;
  --lane-2: #1C7A70;
  --lane-3: #B07A1F;
  --lane-4: #A8446B;
  --lane-5: #6E6A60;

  /* Text sitting on a themed fill — a lane avatar, a --del danger button, an
     --accent primary. Flips per theme: light-theme fills are deep and carry
     white, dark-theme fills are light and need dark text. */
  --ink-on-fill: #FFFFFF;

  /* ---- type scale ----
     Eight steps. Anything not on the scale is drift; stylelint enforces it. */
  --text-2xs: 0.65rem;
  --text-xs: 0.72rem;
  --text-sm: 0.8rem;
  --text-base: 0.85rem;
  --text-md: 0.95rem;
  --text-lg: 1.05rem;
  --text-xl: 1.2rem;
  --text-2xl: 1.6rem;

  /* ---- space scale ----
     Nine steps for padding, gap, and margin. Hairlines and fixed geometry
     (1px borders, the 6px staffline, 22px avatars) stay in px: they are not
     spacing and do not belong on this scale. */
  --space-1: 0.1rem;
  --space-2: 0.2rem;
  --space-3: 0.35rem;
  --space-4: 0.5rem;
  --space-5: 0.7rem;
  --space-6: 0.9rem;
  --space-7: 1.2rem;
  --space-8: 1.6rem;
  --space-9: 2.2rem;
  --space-10: 3rem;
  --space-11: 4rem;

  /* ---- radii ----
     50% stays a literal where it appears: a circle is geometry, not a step. */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #16181C;
    --card: #1D2026;
    --ink: #E9E6DE;
    --muted: #9B978C;
    --faint: #7C7870;
    --line: #32363D;
    --rail: #6E6A60;
    --chip-bg: #262A31;
    --hover-bg: rgba(233, 230, 222, 0.07);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
    --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.5);
    --scrim: rgba(0, 0, 0, 0.5);

    --accent: #8FB4E3;
    --accent-soft: #22303F;
    --add: #6FBF8A;
    --add-bg: #1E2F25;
    --del: #E08A76;
    --del-bg: #362220;
    --merge: #C0A0E0;
    --warn: #E0A667;

    --lane-0: #8FB4E3;
    --lane-1: #C0A0E0;
    --lane-2: #6FC4B8;
    --lane-3: #E0B564;
    --lane-4: #E28FAE;
    --lane-5: #9B978C;
    --ink-on-fill: #16181C;
  }
}

:root[data-theme='dark'] {
  --paper: #16181C;
  --card: #1D2026;
  --ink: #E9E6DE;
  --muted: #9B978C;
  --faint: #7C7870;
  --line: #32363D;
  --rail: #6E6A60;
  --chip-bg: #262A31;
  --hover-bg: rgba(233, 230, 222, 0.07);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  --shadow-popover: 0 10px 30px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.5);

  --accent: #8FB4E3;
  --accent-soft: #22303F;
  --add: #6FBF8A;
  --add-bg: #1E2F25;
  --del: #E08A76;
  --del-bg: #362220;
  --merge: #C0A0E0;
  --warn: #E0A667;

  --lane-0: #8FB4E3;
  --lane-1: #C0A0E0;
  --lane-2: #6FC4B8;
  --lane-3: #E0B564;
  --lane-4: #E28FAE;
  --lane-5: #9B978C;
  --ink-on-fill: #16181C;
}