/* SageArchive — Design System tokens
 * Direction: The Index
 * Every colour pair below meets WCAG 2.1 AA at its documented size.
 * Ratios are stated in comments as (text on the surface it sits on).
 */

/* ─────────────────────────────────────────────────────────────
   Typefaces — all SIL Open Font License. Bundle them; do not
   fetch at runtime. The app must render identically offline.
   ───────────────────────────────────────────────────────────── */

:root {
  --sa-font-ui: 'Archivo', system-ui, -apple-system, sans-serif;
  --sa-font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --sa-font-read: 'Literata', Georgia, serif;
  --sa-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─────────────────────────────────────────────────────────────
   Light theme (default)
   ───────────────────────────────────────────────────────────── */

:root,
[data-theme='light'] {
  color-scheme: light;

  /* Surfaces — four levels, no shadows. Depth comes from value. */
  --sa-bg: #ffffff;
  --sa-canvas: #f7f7f6;         /* sidebar, secondary panes */
  --sa-surface: #ffffff;        /* raised: fields, cards, popovers */
  --sa-sunken: #f1f1f0;         /* inset: segmented controls, wells */

  /* Borders — decorative, exempt from AA. Deliberately faint. */
  --sa-border: #e6e6e4;         /* 1.25 on --sa-bg */
  --sa-border-strong: #d2d2cf;  /* 1.58 on --sa-bg */

  /* Text hierarchy */
  --sa-text-1: #17181a;         /* 17.77 — body, titles */
  --sa-text-2: #5c5f63;         /* 6.42  — secondary, long-form */
  --sa-text-3: #6e7276;         /* 4.85  — captions, labels, meta */

  /* Accent — marks what responds to a click. Nothing else. */
  --sa-accent: #0f6e5e;         /* 6.15 */
  --sa-accent-quiet: #e6f1ee;   /* background only, never text */
  --sa-accent-on: #ffffff;      /* 6.15 on --sa-accent */

  /* Semantic */
  --sa-success: #17694a;        /* 6.65 */
  --sa-warning: #8a6a0b;        /* 5.06 */
  --sa-error: #a02724;          /* 7.47 */
  --sa-progress: #2a5ea8;       /* 6.43 */

  /* Speaker labels — Okabe-Ito derived, colour-blind safe.
     Never the only signal: always print the name too. */
  --sa-speaker-1: #1d6fa6;      /* 5.42 */
  --sa-speaker-2: #b25218;      /* 5.11 */
  --sa-speaker-3: #0f7a55;      /* 5.34 */
  --sa-speaker-4: #96407f;      /* 6.29 */
  --sa-speaker-5: #6e5432;      /* 7.05 */
  --sa-speaker-6: #4b5563;      /* 7.56 */
}

/* ─────────────────────────────────────────────────────────────
   Dark theme — designed, not inverted.
   ───────────────────────────────────────────────────────────── */

[data-theme='dark'] {
  color-scheme: dark;

  --sa-bg: #101112;
  --sa-canvas: #171819;
  --sa-surface: #1e1f21;
  --sa-sunken: #191a1b;

  --sa-border: #2a2c2e;         /* 1.32 on --sa-bg */
  --sa-border-strong: #3a3d40;  /* 1.94 on --sa-bg */

  --sa-text-1: #f0f1f2;         /* 16.71 */
  --sa-text-2: #a0a4a8;         /* 7.53  */
  --sa-text-3: #7f8387;         /* 4.95  */

  --sa-accent: #3fbfa3;         /* 8.27 */
  --sa-accent-quiet: #0f2723;
  --sa-accent-on: #101112;      /* 8.27 on --sa-accent */

  --sa-success: #4fc48f;        /* 8.66 */
  --sa-warning: #d8b04a;        /* 9.21 */
  --sa-error: #ef7e72;          /* 7.11 */
  --sa-progress: #6e9fe0;       /* 6.93 */

  --sa-speaker-1: #6bb6e4;      /* 8.49 */
  --sa-speaker-2: #e8945a;      /* 7.93 */
  --sa-speaker-3: #5cc49a;      /* 8.84 */
  --sa-speaker-4: #de87c4;      /* 7.53 */
  --sa-speaker-5: #c4a882;      /* 8.34 */
  --sa-speaker-6: #a3aebc;      /* 8.56 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --sa-bg: #101112;
    --sa-canvas: #171819;
    --sa-surface: #1e1f21;
    --sa-sunken: #191a1b;
    --sa-border: #2a2c2e;
    --sa-border-strong: #3a3d40;
    --sa-text-1: #f0f1f2;
    --sa-text-2: #a0a4a8;
    --sa-text-3: #7f8387;
    --sa-accent: #3fbfa3;
    --sa-accent-quiet: #0f2723;
    --sa-accent-on: #101112;
    --sa-success: #4fc48f;
    --sa-warning: #d8b04a;
    --sa-error: #ef7e72;
    --sa-progress: #6e9fe0;
    --sa-speaker-1: #6bb6e4;
    --sa-speaker-2: #e8945a;
    --sa-speaker-3: #5cc49a;
    --sa-speaker-4: #de87c4;
    --sa-speaker-5: #c4a882;
    --sa-speaker-6: #a3aebc;
  }
}

/* ─────────────────────────────────────────────────────────────
   Geometry, spacing, motion
   ───────────────────────────────────────────────────────────── */

:root {
  /* Radii. 6 px is the default; 2 px is the floor. */
  --sa-radius-sm: 2px;
  --sa-radius: 6px;
  --sa-radius-lg: 9px;
  --sa-radius-pill: 999px;

  /* 4 px base scale */
  --sa-space-1: 2px;
  --sa-space-2: 4px;
  --sa-space-3: 8px;
  --sa-space-4: 12px;
  --sa-space-5: 16px;
  --sa-space-6: 20px;
  --sa-space-7: 24px;
  --sa-space-8: 32px;
  --sa-space-9: 40px;

  /* Fixed chrome dimensions */
  --sa-sidebar-width: 250px;
  --sa-titlebar-height: 46px;
  --sa-row-height: 47px;
  /* The heading above a device group in the library. Read by LibraryList so
     the virtualiser is told a grouped row's true height. */
  --sa-group-header-height: 30px;
  --sa-sidebar-row-height: 28px;
  --sa-nav-row-height: 29px;
  --sa-hit-min: 28px;

  /* Reading measures — never let text fill a widened window */
  --sa-measure-read: 880px;
  --sa-measure-answer: 840px;

  /* Motion. Nothing moves in space: opacity and scroll only. */
  --sa-dur-hover: 80ms;
  --sa-dur-view: 100ms;
  --sa-dur-disclose: 140ms;
  --sa-dur-citation: 150ms;
  --sa-dur-follow: 220ms;
  --sa-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Icon stroke */
  --sa-icon-stroke: 1.5px;
  --sa-icon-stroke-small: 1.75px; /* below 20 px */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sa-dur-hover: 0ms;
    --sa-dur-view: 0ms;
    --sa-dur-disclose: 0ms;
    --sa-dur-citation: 0ms;
    --sa-dur-follow: 0ms;
  }
}