/* AWG design tokens (docs/design/DESIGN_MANIFEST.md). Primitives first, then semantic roles.
   Components use only the semantic roles below; no raw colour values outside this file. */
:root {
  /* primitives: light */
  --p-paper: #F3F1EA;
  --p-paper-raised: #FBFAF6;
  --p-paper-sunken: #E9E6DC;
  --p-hair: #CFCABC;
  --p-ink: #15140F;
  --p-ink-muted: #55524A;
  --p-lime: #C8F031;
  --p-green: #1C6A39;   --p-green-tint: #DCEADB;
  --p-slate: #384E7C;   --p-slate-tint: #DFE3EC;
  --p-amber: #875200;   --p-amber-tint: #F2E3C3;
  --p-vermilion: #B1261B; --p-vermilion-tint: #F5DBD4;
  --p-neutral-tint: #E3E0D6;

  /* semantic roles */
  --canvas: var(--p-paper);
  --surface: var(--p-paper-raised);
  --surface-sunken: var(--p-paper-sunken);
  --rule: var(--p-hair);
  --rule-strong: var(--p-ink);
  --ink: var(--p-ink);
  --ink-muted: var(--p-ink-muted);
  --inverse-surface: var(--p-ink);
  --inverse-ink: var(--p-paper);
  --signal: var(--p-lime);
  --on-signal: var(--p-ink);
  --action: var(--p-ink);
  --on-action: var(--p-paper);
  --link: var(--p-ink);
  --focus: var(--p-ink);
  --status-ok: var(--p-green);         --status-ok-tint: var(--p-green-tint);
  --status-info: var(--p-slate);       --status-info-tint: var(--p-slate-tint);
  --status-warn: var(--p-amber);       --status-warn-tint: var(--p-amber-tint);
  --status-danger: var(--p-vermilion); --status-danger-tint: var(--p-vermilion-tint);
  --status-neutral: var(--p-ink-muted); --status-neutral-tint: var(--p-neutral-tint);

  /* type roles */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --type-display: 600 30px/1.05 var(--font-mono);
  --type-title: 650 21px/1.25 var(--font-ui);
  --type-section: 600 10.5px/1.3 var(--font-mono);
  --type-body: 400 13.5px/1.45 var(--font-ui);
  --type-label: 550 12.5px/1.35 var(--font-ui);
  --type-caption: 400 12px/1.4 var(--font-ui);
  --type-mono: 500 11.5px/1.35 var(--font-mono);
  --tracking-section: 0.09em;

  /* shape, space, rules, motion, elevation */
  --radius-control: 2px;
  --radius-panel: 0;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --hairline: 1px solid var(--rule);
  --section-rule: 2px solid var(--rule-strong);
  --rail-width: 4px;
  --target-min: 28px;
  --motion-fast: 120ms;
  --elev-overlay: -16px 0 32px -12px rgba(21, 20, 15, 0.28);
  --scrim: rgba(21, 20, 15, 0.42);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --p-paper: #11110F;
    --p-paper-raised: #191916;
    --p-paper-sunken: #23221E;
    --p-hair: #3A3832;
    --p-ink: #EDEAE0;
    --p-ink-muted: #ABA697;
    --p-green: #86D39A;   --p-green-tint: #1C2A1F;
    --p-slate: #A4B6DE;   --p-slate-tint: #1D2331;
    --p-amber: #EBB95C;   --p-amber-tint: #30260F;
    --p-vermilion: #FF8B76; --p-vermilion-tint: #3A1A15;
    --p-neutral-tint: #2A2925;
    --on-signal: #15140F;
    --inverse-surface: #EDEAE0;
    --inverse-ink: #11110F;
    --focus: var(--p-lime);
    --elev-overlay: -16px 0 32px -12px rgba(0, 0, 0, 0.6);
    --scrim: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}