/*
 * Alex Yarosh shared design system v2.
 *
 * This is the single owner of --ay-v2-* tokens. Slice 0 deliberately limits
 * runtime effects to custom properties; component rules are opt-in through
 * data-ay-component and existing V4 family CSS remains the visual fallback.
 */

:root {
  --ay-v2-color-canvas: #f4f1e9;
  --ay-v2-color-surface: #ffffff;
  --ay-v2-color-ink: #0f172a;
  --ay-v2-color-muted: #5f5e58;
  --ay-v2-color-neutral: #64748b;
  --ay-v2-color-soft: #e5e2da;
  --ay-v2-color-evidence-accent: #d9730d;
  --ay-v2-color-evidence-accent-soft: #f7e7d6;
  --ay-v2-color-verified: #22c55e;
  --ay-v2-color-error: #ba1a1a;
  --ay-v2-color-line: rgb(15 23 42 / 10%);
  --ay-v2-color-line-faint: rgb(15 23 42 / 5.5%);
  --ay-v2-color-focus: #0f172a;

  --ay-v2-font-content: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ay-v2-font-ui: Geist, Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  --ay-v2-weight-body: 400;
  --ay-v2-weight-medium: 500;
  --ay-v2-weight-strong: 700;
  --ay-v2-weight-title: 800;
  --ay-v2-leading-body: 1.62;
  --ay-v2-leading-heading: 1.08;
  --ay-v2-tracking-title: -0.045em;
  --ay-v2-tracking-label: 0.1em;

  --ay-v2-size-label: 0.75rem;
  --ay-v2-size-body: 1rem;
  --ay-v2-size-lede: clamp(1.0625rem, 1.35vw, 1.25rem);
  --ay-v2-size-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --ay-v2-size-h2: clamp(1.875rem, 3.2vw, 2.75rem);
  --ay-v2-size-h1: clamp(2.625rem, 5vw, 4.25rem);

  --ay-v2-space-1: 0.25rem;
  --ay-v2-space-2: 0.5rem;
  --ay-v2-space-3: 0.75rem;
  --ay-v2-space-4: 1rem;
  --ay-v2-space-5: 1.25rem;
  --ay-v2-space-6: 1.5rem;
  --ay-v2-space-8: 2rem;
  --ay-v2-space-10: 2.5rem;
  --ay-v2-space-12: 3rem;
  --ay-v2-space-16: 4rem;
  --ay-v2-space-20: 5rem;
  --ay-v2-space-24: 6rem;

  --ay-v2-container: 70rem;
  --ay-v2-reading: 45rem;
  --ay-v2-gutter: clamp(1rem, 4vw, 2.25rem);
  --ay-v2-section-block: clamp(4.5rem, 8vw, 6rem);
  --ay-v2-radius-control: 0.5rem;
  --ay-v2-radius-nested: 0.75rem;
  --ay-v2-radius-row: 1.125rem;
  --ay-v2-radius-card: 1.5rem;
  --ay-v2-radius-panel-mobile: 1.75rem;
  --ay-v2-radius-panel: 2.125rem;
  --ay-v2-radius-pill: 999px;
  --ay-v2-shadow-card: 0 1.125rem 3.375rem rgb(15 23 42 / 4.5%);
  --ay-v2-shadow-raised: 0 1.75rem 5rem rgb(15 23 42 / 12%);
  --ay-v2-motion-fast: 160ms ease;
  --ay-v2-motion-standard: 260ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Compatibility variables only; legacy family sheets loaded afterward retain
 * final ownership until their route family is migrated and visually approved.
 */
body.ay-design-system-v2 {
  --stitch-cream: var(--ay-v2-color-canvas);
  --stitch-paper: var(--ay-v2-color-surface);
  --stitch-ink: var(--ay-v2-color-ink);
  --stitch-muted: var(--ay-v2-color-muted);
  --stitch-soft: var(--ay-v2-color-soft);
  --stitch-line: var(--ay-v2-color-line);
  --stitch-faint: var(--ay-v2-color-line-faint);
  --stitch-radius: var(--ay-v2-radius-card);
  --v2-container: var(--ay-v2-container);
  --v2-cream: var(--ay-v2-color-canvas);
  --v2-ink: var(--ay-v2-color-ink);
  --v2-muted: var(--ay-v2-color-muted);
  --v2-line: var(--ay-v2-color-line);
}