/* ── Palette ───────────────────────────────────────────────────────────────
   A warm neutral canvas with a single coral accent, in the manner of the
   Claude console: bone-coloured page, white panels floating on it, and near
   enough to black for text without ever reaching it.

   The greys are deliberately warm — every neutral here carries a little red
   and yellow. Mixing a cool grey into this palette is what makes a warm theme
   look accidental, so if you add a neutral, take it from the same family. */
:root {
  --nj-surface: #ffffff;
  /* The page itself. Everything else sits on top of this, so it is the colour
     the eye spends the most time on and the one that carries the warmth. */
  --nj-surface-sunken: #f0eee6;
  --nj-surface-raised: #ffffff;
  --nj-border: #e6e2d9;
  --nj-border-strong: #cdc8bb;

  /* Not #000: a true black on a warm ground reads as a hole in the page. */
  --nj-text: #1f1e1d;
  --nj-text-muted: #6e6b63;
  --nj-text-inverse: #ffffff;

  --nj-primary: #d97757;
  --nj-primary-hover: #c15f3c;
  /* Selection fills for chrome: hover, then the stronger one for the current
     item. Translucent tints of the accent rather than fixed colours, so a
     single definition serves both themes — the tint shades a light surface and
     lifts off a dark one, and follows --nj-primary when the dark block below
     redefines it.

     Lower percentages than a cool accent would need. Coral is a loud hue, and
     a nav rail is chrome: the active item should be findable at a glance, not
     be the brightest thing on the page. */
  --nj-primary-soft: color-mix(in srgb, var(--nj-primary) 9%, transparent);
  --nj-primary-soft-strong: color-mix(in srgb, var(--nj-primary) 16%, transparent);
  /* The accent doubles as the focus ring. One accent means a focused control
     is unmistakably part of this app rather than borrowing the browser's
     blue, which is the one cool colour that would otherwise appear. */
  --nj-focus: #d97757;

  /* Call state drives the palette: amber while it rings, green once it is
     answered, stone when it is over. Warmed to sit on the bone ground — the
     stock Tailwind-ish greens and reds read as cold against it. */
  --nj-ringing: #a35c14;
  --nj-ringing-surface: #f7ead0;
  --nj-answered: #3f7343;
  --nj-answered-surface: #e3efdf;
  --nj-ended: #5c574e;
  --nj-ended-surface: #e8e4da;
  --nj-failed: #b0412f;
  --nj-failed-surface: #f8e2dc;

  --nj-space-1: 0.25rem;
  --nj-space-2: 0.5rem;
  --nj-space-3: 0.75rem;
  --nj-space-4: 1rem;
  --nj-space-6: 1.5rem;
  --nj-space-8: 2rem;

  --nj-radius: 0.625rem;
  --nj-radius-lg: 0.875rem;
  --nj-radius-pill: 999px;

  --nj-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Tabular figures so phone numbers and durations line up down a column. */
  --nj-font-num: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --nj-text-sm: 0.8125rem;
  --nj-text-base: 0.9375rem;
  --nj-text-lg: 1.125rem;
}

/* The dark theme is warm too: charcoal that has been left in the sun, not the
   blue-black a cool palette inverts to. Same rule as above — a neutral added
   here should carry the same red and yellow the light one does. */
@media (prefers-color-scheme: dark) {
  :root {
    --nj-surface: #262624;
    --nj-surface-sunken: #1f1e1d;
    --nj-surface-raised: #262624;
    --nj-border: #3a3835;
    --nj-border-strong: #4e4b46;

    --nj-text: #f0eee6;
    --nj-text-muted: #a8a49b;

    /* Lifted off the light value: #d97757 on a dark ground loses too much
       contrast against the text beside it. */
    --nj-primary: #e08a6b;
    --nj-primary-hover: #eda189;

    --nj-ringing: #e8b563;
    --nj-ringing-surface: #3a2d14;
    --nj-answered: #7fbf84;
    --nj-answered-surface: #1c3021;
    --nj-ended: #a8a49b;
    --nj-ended-surface: #302e2a;
    --nj-failed: #e08a76;
    --nj-failed-surface: #3a201a;
  }
}

/* ── Material Web ──────────────────────────────────────────────────────────
   Material's components read their own --md-sys-* tokens. Pointing those at
   the tokens above rather than at literals means the palette is defined once:
   the dark block earlier in this file redefines --nj-*, and because these are
   var() references resolved at use time, every md-* component follows without
   a second dark theme to keep in step. */
:root {
  --md-sys-color-primary: var(--nj-primary);
  --md-sys-color-on-primary: var(--nj-text-inverse);
  --md-sys-color-surface: var(--nj-surface);
  --md-sys-color-on-surface: var(--nj-text);
  --md-sys-color-on-surface-variant: var(--nj-text-muted);
  --md-sys-color-surface-container-low: var(--nj-surface-raised);
  --md-sys-color-surface-container-highest: var(--nj-surface-sunken);
  --md-sys-color-secondary-container: var(--nj-surface-sunken);
  --md-sys-color-on-secondary-container: var(--nj-text);
  --md-sys-color-outline: var(--nj-border-strong);
  --md-sys-color-outline-variant: var(--nj-border);
  --md-sys-color-error: var(--nj-failed);
  --md-sys-color-on-error-container: var(--nj-failed);
  --md-sys-color-shadow: #000;

  /* Material defaults to Roboto, which the app does not ship. */
  --md-sys-typescale-label-large-font: var(--nj-font);
  --md-sys-typescale-body-large-font: var(--nj-font);
  --md-sys-typescale-body-small-font: var(--nj-font);
}