/* Sybqa Proof v3 (QC tag). The only source for visual values shared by product surfaces. */
:root {
  color-scheme: light;
  --color-canvas: #f3efe6;
  --color-surface: #fffdf8;
  --color-ink: #151515;
  --color-muted: #57534b;
  --color-border: #d9d2c3;
  --color-border-strong: #857e6e;
  --color-action: #b5390b;
  --color-action-hover: #8a2a06;
  --color-on-action: #ffffff;
  --color-pencil: #ff4d1a;
  --color-highlight: #ffe14d;
  --color-stamp: #a11812;
  --color-signal: #ff4d1a;
  --color-on-signal: #151515;
  --color-tag: #ead39b;
  --color-tag-edge: #c9ae6c;
  --color-success: #1d6b3a;
  --color-success-surface: #e9f4ec;
  --color-success-border: #b9d6c2;
  --color-warning: #7f5300;
  --color-warning-surface: #fdf1d8;
  --color-danger: #b3261e;
  --color-danger-surface: #fbe9e7;
  --color-review: #5236b8;
  --color-review-surface: #efebfb;
  --color-field: #fffdf8;
  --color-code: #ebe5d8;
  --color-placeholder: #6b665c;
  --color-header: #f3efe6;
  --color-media: #151515;
  --color-mark-reverse: #ff4d1a;
  --color-night: #151515;
  --color-night-raised: #232220;
  --color-night-line: #3b3934;
  --color-on-night: #f3efe6;
  --color-on-night-muted: #b8b1a3;
  --color-action-reverse: #ff7a4d;
  --color-backdrop: #12121266;
  --color-sheet-edge: #e6dfd0;

  --font-body: Geist, "Segoe UI", system-ui, sans-serif;
  --font-display: Archivo, "Arial Black", Impact, sans-serif;
  --font-wordmark: Archivo, "Arial Black", Impact, sans-serif;
  --font-note: Newsreader, "Sitka Text", Georgia, serif;
  --font-code: "Geist Mono", "Cascadia Code", Consolas, monospace;
  --font-poster: Archivo, "Arial Black", Impact, sans-serif;
  --stretch-display: 125%;
  --text-caption: 0.6875rem;
  --text-small: 0.8125rem;
  --text-body: 0.9375rem;
  --text-section: 1.1875rem;
  --text-note: 1.375rem;
  --text-title: clamp(2rem, 3.7vw, 3.75rem);
  --leading-body: 1.55;
  --leading-note: 1.2;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-heading: 650;
  --weight-display: 900;
  --tracking-display: -.025em;

  --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;
  --radius-control: 6px;
  --radius-button: 8px;
  --radius-panel: 8px;
  --radius-soft: 10px;
  --radius-sheet: 4px;
  --border-width: 1px;
  --rule-width: 2px;
  --control-height: 44px;
  --control-height-primary: 48px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --motion-fast: 160ms;
  --motion-normal: 200ms;
  --ease-standard: ease;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --opacity-disabled: .55;
  /* Proof v3 has no hard or soft drop shadows. These names stay as aliases of none so older rules keep working;
     frame a surface with an ink border and .ds-crop crop marks instead. */
  --shadow-tab: none;
  --shadow-note: none;
  --shadow-dialog: none;
  --shadow-sheet: none;
  --bar-h: 56px;
  --ease-glide: cubic-bezier(.2, .8, .2, 1);
  --ease-stamp: cubic-bezier(.3, 1.4, .5, 1);
  --cursor-glide: 420ms;
  --tape-height: 28px;
  --mat-grid: 24px;
  --radius-tag: 3px 8px 8px 3px;
  --stage-ratio: 1.6;
  --eyelet-size: 14px;
  --z-sticky: 10;
  --z-overlay: 20;
  --z-tour: 30;
  --z-consent: 40;
  --content-width: 1360px;
  --reading-width: 70ch;

  /* Specimen palette: the made-up "Fernly" customer site shown in the homepage example run. It is a stand-in for
     somebody else's site (purple gradient, glass card, pale button). Never use it for Sybqa UI; only hero-stage.css
     may reference --specimen-* (scripts/check-design-system.ts). The pill and button colors stay opaque so measured
     contrast reads them: white on pill 7.1:1, button text on button 1.5:1. */
  --specimen-sky-a: #6d28d9; --specimen-sky-b: #4338ca; --specimen-sky-c: #0e7490;
  --specimen-glow-a: #a78bfa; --specimen-glow-b: #22d3ee;
  --specimen-text: #ffffff; --specimen-muted: #ffffffd1;
  --specimen-glass: #ffffff1f; --specimen-glass-edge: #ffffff40; --specimen-field: #ffffff26;
  --specimen-pill: #6d28d9; --specimen-cta: #c4b5fd; --specimen-cta-text: #e0e7ff;
  --specimen-error: #fecdd3; --specimen-error-edge: #fb7185; --specimen-toast: #0f172acc;
  --font-specimen: "Segoe UI", system-ui, sans-serif;

  /* Compatibility aliases for existing page layouts. New code uses semantic names. */
  --paper: var(--color-canvas); --sheet: var(--color-surface);
  --ink: var(--color-ink); --muted: var(--color-muted);
  --line: var(--color-border); --line-strong: var(--color-border-strong);
  --accent: var(--color-action); --accent-hover: var(--color-action-hover);
  --lavender: var(--color-highlight); --warning: var(--color-warning);
  --danger: var(--color-danger); --green: var(--color-success);
  --sans: var(--font-body); --hand: var(--font-note); --mono: var(--font-code);
}