/* nurax design tokens — the single source for colours and type families.
   Served at /dev/_shared/tokens.css (source: services/reader/assets/tokens.css).
   Components use only the semantic tokens; dark mode swaps values, never rules. */
:root {
  /* ---- primitives: one warm-neutral ramp, hue locked at ~40°, saturation falling towards the dark end
     (cleaner whites, no brown shift in the darks). Stored as bare HSL triplets so any token can add alpha:
     hsl(var(--n-950) / .5). Never used directly in components — only through the semantic tokens below. ---- */
  --n-0:    0 0% 100%;
  --n-25:   40 20% 98%;
  --n-50:   40 14% 95.5%;
  --n-100:  38 12% 92.5%;
  --n-200:  37 13% 87%;
  --n-300:  38 9% 79%;
  --n-400:  38 6% 67%;
  --n-500:  38 5% 55%;
  --n-600:  38 5% 42%;
  --n-700:  38 5% 33%;
  --n-800:  38 5% 24%;
  --n-850:  39 5% 17%;
  --n-900:  40 6% 13%;
  --n-950:  40 6% 10%;
  --n-1000: 30 7% 6%;

  /* ---- semantic tokens (light). Dark mode swaps only these values. ---- */
  --bg:             hsl(var(--n-25));         /* page / reading surface */
  --bg-subtle:      hsl(var(--n-50));         /* toolbar, menus, drawer */
  --bg-raised:      hsl(var(--n-0));          /* inputs, buttons, cards on the page */
  --bg-chrome:      hsl(var(--n-0));          /* toolbar: plain white, set off by a hairline only */
  --bg-overlay:     hsl(var(--n-0));          /* menus, popovers, drawer: white + elevation, no tint */
  --fg:             hsl(var(--n-950));        /* body text */
  --fg-subtle:      hsl(var(--n-700));        /* secondary text */
  --fg-muted:       hsl(var(--n-600));        /* labels, Rn, meta */
  --fg-faint:       hsl(var(--n-400));        /* citations in running text */
  --border:         hsl(var(--n-200));
  --border-strong:  hsl(var(--n-300));
  --interactive:    hsl(var(--n-950));        /* primary / active control: near-black, not a brand colour */
  --on-interactive: hsl(var(--n-50));
  --hover:          hsl(40 30% 10% / .05);    /* alpha tints: work on any surface */
  --pressed:        hsl(40 30% 10% / .09);
  /* elevation instead of borders: soft shadow + 1px ring + top highlight. Dark mode swaps only the colours. */
  --elev-shadow:    hsl(var(--n-1000) / .12);
  --elev-ring:      hsl(var(--n-950) / .08);
  --elev-top:       hsl(0 0% 100% / .7);
  --elev-3: 0 8px 20px 0 var(--elev-shadow), 0 0 0 1px var(--elev-ring), 0 -1px 0 0 var(--elev-top);
  /* colour only where it carries meaning */
  --mark: #ffe58a; --mark-active: #ffb347;   /* search hits */
  --sel: #d9e8ff;                             /* text selection */
  --leitsatz: #8a3b12;                        /* Leitsatz rule */
  --meter: #7ba2dd;                           /* Normen data bars */
  --brand: #9e0606;                           /* the U in the logo */
  --pick: hsl(215 100% 96%);                  /* tint of the paragraph picked by double-tap (touch) */
  --collected: #7ba2dd;                       /* bar: paragraph is in the Sammlung */

  --serif: "nx Charis", Georgia, serif;
  --sans: "nx Cabin", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: hsl(var(--n-950)); --bg-subtle: hsl(var(--n-900)); --bg-raised: hsl(var(--n-850));
  --fg: hsl(var(--n-100)); --fg-subtle: hsl(var(--n-300)); --fg-muted: hsl(var(--n-400)); --fg-faint: hsl(var(--n-600));
  --border: hsl(42 60% 97% / .10); --border-strong: hsl(42 60% 97% / .16);
  --interactive: hsl(var(--n-50)); --on-interactive: hsl(var(--n-950));
  --bg-chrome: hsl(var(--n-900)); --bg-overlay: hsl(var(--n-850));
  --hover: hsl(42 60% 97% / .06); --pressed: hsl(42 60% 97% / .10);
  --elev-shadow: hsl(0 0% 0% / .64); --elev-ring: hsl(42 60% 97% / .10); --elev-top: hsl(42 60% 97% / .08);
  --mark: #6b5a12; --mark-active: #a8731c; --sel: #2e3f5c; --leitsatz: #e08a5a; --brand: #e0514a; --pick: hsl(215 35% 20%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: hsl(var(--n-950)); --bg-subtle: hsl(var(--n-900)); --bg-raised: hsl(var(--n-850));
    --fg: hsl(var(--n-100)); --fg-subtle: hsl(var(--n-300)); --fg-muted: hsl(var(--n-400)); --fg-faint: hsl(var(--n-600));
    --border: hsl(42 60% 97% / .10); --border-strong: hsl(42 60% 97% / .16);
    --interactive: hsl(var(--n-50)); --on-interactive: hsl(var(--n-950));
    --bg-chrome: hsl(var(--n-900)); --bg-overlay: hsl(var(--n-850));
    --hover: hsl(42 60% 97% / .06); --pressed: hsl(42 60% 97% / .10);
    --elev-shadow: hsl(0 0% 0% / .64); --elev-ring: hsl(42 60% 97% / .10); --elev-top: hsl(42 60% 97% / .08);
    --mark: #6b5a12; --mark-active: #a8731c; --sel: #2e3f5c; --leitsatz: #e08a5a; --brand: #e0514a; --pick: hsl(215 35% 20%);
  }
}