/* Vista design tokens — the single source of truth.
   The product commits to one look: a warm printed-catalogue light theme with a
   deliberately dark neutral backdrop reserved for the 3D stage (a model viewer
   needs a low, even value behind it). See BRAND.md. */

:root {
  /* colour — role, not appearance */
  --color-brand-primary: #8f3f2f;          /* oxblood — links, rules, the single accent */
  --color-brand-primary-strong: #7a3427;
  --color-brand-secondary: #2f4a4a;        /* slate green — used only for the stage vignette */

  --color-text-heading: #1c1a17;
  --color-text-body: #35322c;
  --color-text-muted: #7c766c;
  --color-text-on-primary: #f4efe6;
  --color-text-link: var(--color-brand-primary);

  --color-surface-page: #f4efe6;           /* paper */
  --color-surface-raised: #efe8db;
  --color-surface-sunken: #e7ded877;
  --color-surface-stage: #16181a;          /* the 3D backdrop */
  --color-surface-overlay: rgba(18, 20, 22, 0.82);

  --color-border-default: #1c1a17;         /* hairlines are ink, not grey */
  --color-border-hair: rgba(28, 26, 23, 0.16);
  --color-border-focus: var(--color-brand-primary);

  --color-status-positive: #3f6b4a;
  --color-status-negative: #8f3f2f;
  --color-status-warning: #9a7423;
  --color-status-info: #2f4a4a;

  /* type */
  --font-family-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-family-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', 'Menlo', monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2.125rem;
  --font-size-display: clamp(2.4rem, 5.5vw, 4rem);

  --line-tight: 1.08;
  --line-normal: 1.4;
  --line-relaxed: 1.6;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.16em;

  /* shape — near-square; corners are a structural choice, not decoration */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;

  /* space — 4-based */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 104px;

  /* the design avoids shadows for separation; one soft level exists only for
     the floating stage plate, which genuinely hovers over 3D content */
  --shadow-plate: 0 2px 20px -6px rgba(0, 0, 0, 0.5);

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.4, 0.14, 0.3, 1);

  --z-base: 0;
  --z-plate: 20;
  --z-loader: 30;

  --layout-max: 1080px;
  --layout-measure: 62ch;
  --layout-gutter: clamp(20px, 5vw, 72px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}