/**
 * LogikPal primitives CSS mirror — values from ../w3c.tokens.json
 *
 * --accent is marketing taupe (labels/focus). Product XDS --color-accent is ink.
 * Motion here is the marketing scale (--deep-duration-*). Product Astryx emits
 * its own --duration-* (slow = 300ms overlays). Never alias --duration-slow here.
 * Interaction craft rules: DESIGN.md §7.
 */

:root {
  /* Color */
  --deep-ink: #141210;
  --deep-ink-soft: #2c2824;
  --deep-muted: #5c5854;
  --deep-line: #e4e0da;
  --deep-line-strong: #d4cfc6;
  --deep-paper: #faf9f7;
  --deep-off: #f3f0eb;
  --deep-warm: #ebe6df;
  --deep-label: #6b5b4f;
  --deep-label-soft: #8a7a6c;
  --deep-on-ink: #faf9f7;

  /* Marketing aliases */
  --ink: var(--deep-ink);
  --ink-soft: var(--deep-ink-soft);
  --muted: var(--deep-muted);
  --line: var(--deep-line);
  --line-strong: var(--deep-line-strong);
  --paper: var(--deep-paper);
  --off: var(--deep-off);
  --warm: var(--deep-warm);
  --accent: var(--deep-label);
  --accent-soft: var(--deep-label-soft);

  /* Product data semantics — same values as logikpal-ds tokens.json */
  --ds-output-text: #5c5854;
  --ds-output-bg: #ebe6df;
  --ds-output-border: #d4cfc6;
  --ds-outcome-text: #5c3d66;
  --ds-outcome-bg: #ebe0ef;
  --ds-outcome-border: #d4c0dc;
  --ds-validated-text: #3d5a40;
  --ds-validated-bg: #d4e0d5;
  --ds-validated-border: #b8cbb9;
  --ds-review-text: #745b00;
  --ds-review-bg: #f3e6c8;
  --ds-review-border: #e0d0a0;
  --ds-missing-text: #8b3a3a;
  --ds-missing-bg: #f0d6d4;
  --ds-missing-border: #e0b8b6;

  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Space (4px 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;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --container-max: 1120px;
  --container-pad: 24px;
  --container-pad-lg: 32px;
  --header-h: 56px;
  --header-h-lg: 64px;
  --content-prose: 42rem;
  --touch-min: 44px;
  --touch-min-capture: 56px;

  /* Radius */
  --radius-none: 0px;
  --radius-element: 0px;
  --radius-container: 0px;
  --radius-page: 0px;

  /* Motion (marketing) */
  --deep-duration-press: 160ms;
  --deep-duration-fast: 150ms;
  --deep-duration-base: 200ms;
  --deep-duration-slow: 250ms;
  --deep-duration-marquee: 35s;
  --deep-card-lift: -2px;
  --deep-press-scale: 0.97;
  --deep-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --deep-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --duration-fast: var(--deep-duration-fast);
  --duration-base: var(--deep-duration-base);
  --duration-marquee: var(--deep-duration-marquee);
  --card-lift: var(--deep-card-lift);

  /* Focus */
  --focus-width: 1.5px;
  --focus-offset: 3px;
  --focus-color: var(--deep-label);

  /* Elevation */
  --shadow-header: 0 4px 20px -12px rgba(20, 18, 16, 0.2);
  --shadow-none: none;
}