/*
 * Design tokens - Keshev (docs/design/keshev/README.md "Design tokens"; docs/design.md points there).
 * Imported from main.tsx after fonts.css and before index.css. Colour is meaning, never decoration:
 * amber (--hand) is the only call for attention, oxblood (--risk) is for clinical risk only.
 *
 * Theme: light by default; dark follows prefers-color-scheme unless the user picked one in Settings,
 * which sets <html data-theme="light|dark"> (src/lib/theme.ts).
 */

:root {
  color-scheme: light;

  /* Colour - light */
  --bg: #F3F0E9;          /* page background ("bone") */
  --surface: #FBF9F5;     /* raised panels, active nav pill, row hover */
  --surface2: #EAE6DD;    /* nav pill track, inset fields */
  --line: #D8D3C8;        /* borders, ring tracks */
  --hair: #E6E2D9;        /* row separators */
  --ink: #1B1B1D;         /* primary text, primary buttons */
  --ink2: #4A4947;        /* secondary text */
  --ink3: #737068;        /* tertiary text, labels, placeholders (>= 13 px only) */
  --ceramic: #1A1A1C;     /* the Now hero panel */
  --ceramic2: #2B2B2E;
  --on-ceramic: #F1EDE4;
  --on-ceramic2: #A9A49A;
  --live: #F4EEE1;        /* listening ring on ceramic */
  --live-on: #1B1B1D;     /* listening ring on light surfaces */
  --hand: #9C6410;        /* waiting for your hand (amber) */
  --hand-soft: #F1E5CC;
  --seal: #7E6232;        /* sealed (bronze); ICD codes, note section headings */
  --seal-soft: #EBE2D0;
  --ready: #3E7A5A;       /* draft ready, active medication, no-risk dot */
  --ready-soft: #DFEBE2;
  --risk: #8E2F2A;        /* clinical risk only */
  --risk-soft: #F0DEDC;

  /* Type: two voices */
  --serif: 'Bellefair', 'Newsreader', 'Noto Naskh Arabic', Georgia, serif;   /* the human voice */
  --serif-scale: 1.06;                                                      /* Bellefair is small on the body */
  --sans: 'Assistant', 'Noto Naskh Arabic', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;   /* the system voice */
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shape */
  --r-frame: 26px;
  --r-hero: 28px;
  --r-panel: 22px;
  --r-drop: 18px;
  --r-alert: 14px;
  --r-row: 12px;
  --r-field: 10px;
  --r-pill: 999px;

  /* Depth: almost none. The only shadow is the active nav pill. */
  --shadow-pill: 0 1px 3px rgba(0, 0, 0, .08);

  /* Rings */
  --ring-track: 1.5px;
  --ring-value: 2.5px;
  --ring-live: 3px;
  --breathe: keshev-breathe 3.2s ease-in-out infinite;

  /* Spacing (4 px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}

/* Colour - dark: by system preference unless a theme was chosen, or by choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #141415; --surface: #1C1C1E; --surface2: #262628; --line: #343436; --hair: #2A2A2C;
    --ink: #F1EDE4; --ink2: #C9C4B9; --ink3: #8F8B82;
    --ceramic: #0E0E0F; --ceramic2: #1F1F21; --on-ceramic: #F1EDE4; --on-ceramic2: #9A958B;
    --live: #F6F0E3; --live-on: #F6F0E3;
    --hand: #E0B265; --hand-soft: #33291A;
    --seal: #C9A66B; --seal-soft: #2E2718;
    --ready: #8FC7A6; --ready-soft: #1C2E24;
    --risk: #E09083; --risk-soft: #36201D;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #141415; --surface: #1C1C1E; --surface2: #262628; --line: #343436; --hair: #2A2A2C;
  --ink: #F1EDE4; --ink2: #C9C4B9; --ink3: #8F8B82;
  --ceramic: #0E0E0F; --ceramic2: #1F1F21; --on-ceramic: #F1EDE4; --on-ceramic2: #9A958B;
  --live: #F6F0E3; --live-on: #F6F0E3;
  --hand: #E0B265; --hand-soft: #33291A;
  --seal: #C9A66B; --seal-soft: #2E2718;
  --ready: #8FC7A6; --ready-soft: #1C2E24;
  --risk: #E09083; --risk-soft: #36201D;
}

/* Listening only: the ring breathes. */
@keyframes keshev-breathe {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 2px rgba(246, 240, 227, .4)); }
  50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(246, 240, 227, .9)); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --breathe: none; }
}