/* ==========================================================================
   SilvaCoda design tokens — single source
   Visual and composition standard: v3 (ADR 0011).
   Lexend, olive ramp, cream paper and Material You roles.
   See docs/architecture/design-tokens.md.
   Load this file before any surface stylesheet.
   ========================================================================== */

:root {
  /* Brand olive ramp */
  --olive-50: #F5F7EF;
  --olive-100: #E9EEDC;
  --olive-200: #D4DEC0;
  --olive-300: #B6C69B;
  --olive-400: #8E9E70;
  --olive-500: #697B4B;
  --olive-600: #526237;
  --olive-700: #43512B;
  --olive-800: #384623;
  --olive-900: #2E381C;
  --olive-950: #1D2411;

  /* Paper and ink */
  --paper: #FBF9F4;
  --paper-2: #F4F1E8;
  --surface: #FFFFFF;
  --ink: #1D1C16;
  --ink-2: #4B4A40;
  --muted: #6E6C60;
  --line: #E2DDD0;
  --line-strong: #CFC8B8;

  /* Type */
  --font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --font-ui: var(--font);
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Shape */
  --r-card: 16px;
  --r-control: 10px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;

  /* Surface alias layer used by the rebuilt surfaces */
  --sc-paper: var(--paper);
  --sc-surface: var(--surface);
  --sc-ink: var(--ink);
  --sc-muted: var(--ink-2);
  --sc-line: var(--line);
  --sc-olive: var(--olive-600);
  --sc-olive-deep: var(--olive-900);
  --sc-olive-wash: var(--olive-100);
  --sc-on-olive: var(--olive-50);
  --sc-font-display: var(--font-display);
  --sc-font-ui: var(--font-ui);
  --sc-radius: var(--r-card);

  /* Material You roles mapped onto the olive brand */
  --md-primary: var(--olive-800);
  --md-on-primary: var(--olive-50);
  --md-primary-container: var(--olive-100);
  --md-on-primary-container: var(--olive-950);

  --md-secondary: var(--olive-600);
  --md-on-secondary: var(--paper);
  --md-secondary-container: var(--olive-200);
  --md-on-secondary-container: var(--olive-950);

  --md-tertiary: var(--olive-500);
  --md-on-tertiary: var(--olive-50);
  --md-tertiary-container: var(--olive-100);
  --md-on-tertiary-container: var(--olive-950);

  --md-surface: var(--surface);
  --md-surface-container-lowest: var(--paper-2);
  --md-surface-container-low: var(--paper-2);
  --md-surface-container: var(--surface);
  --md-surface-container-high: var(--surface);
  --md-surface-container-highest: var(--surface);
  --md-on-surface: var(--ink);
  --md-on-surface-variant: var(--ink-2);

  --md-outline: var(--line-strong);
  --md-outline-variant: var(--line);
  --md-scrim: rgba(29, 36, 17, 0.38);
  --md-error: #B3261E;
  --md-on-error: #FFFFFF;
  --md-error-container: #F9DEDC;
  --md-on-error-container: #410E0B;
  --md-success: #146C2E;
  --md-attention: #8F4C00;

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px 1px rgba(0, 0, 0, .15);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 6px 2px rgba(0, 0, 0, .15);

  /* Material 3--style aliases used by the Citadel */
  --md-sys-color-primary: var(--md-primary);
  --md-sys-color-on-primary: var(--md-on-primary);
  --md-sys-color-primary-container: var(--md-primary-container);
  --md-sys-color-on-primary-container: var(--md-on-primary-container);
  --md-sys-color-surface: var(--sc-paper);
  --md-sys-color-surface-container: var(--sc-surface);
  --md-sys-color-on-surface: var(--sc-ink);
  --md-sys-color-on-surface-variant: var(--sc-muted);
  --md-sys-color-outline: var(--sc-line);
  --md-sys-color-error: #7A4B00;
  --md-sys-color-error-container: #FBF2E3;
  --md-sys-color-on-error-container: #5C3900;
  --brand-primary-strong: var(--sc-olive-deep);

  /* Dynamic colour: the default seed is the brand olive. */
  --md-dynamic-primary: var(--md-primary);
  --md-dynamic-on-primary: var(--md-on-primary);
  --md-dynamic-primary-container: color-mix(in oklab, var(--md-dynamic-primary) 14%, var(--md-surface));
  --md-dynamic-on-primary-container: var(--md-on-primary-container);
}

::selection {
  background: var(--olive-200);
  color: var(--olive-950);
}