/**
 * Global design tokens — Story 1.3 (UX-DR1, UX-DR2, UX-DR16; focus prep for Epic 6).
 * Consume via var(--token-name) from module CSS or HubL-linked styles.
 */
:root {
  /* Color — semantic (language-neutral names) */
  --color-bg-page: #f6f4f0;
  --color-surface: #ffffff;
  --color-surface-muted: #efeae4;
  --color-border: #e4e4e7;
  --color-text-primary: #18181b;
  --color-text-muted: #71717a;
  --color-text-inverse: #fafafa;
  /* Indigo accent — distinct from default “product blue” while staying WCAG-conscious on white type */
  --color-accent: #4f46e5;
  --color-accent-strong: #6366f1;
  --color-partner-bg: #18181b;
  --color-partner-fg: #fafafa;
  --color-focus-ring: #4f46e5;
  --color-accent-tint-border: rgb(79 70 229 / 0.35);
  --color-accent-tint-bg: rgb(79 70 229 / 0.08);
  --color-success: #15803d;
  --color-danger: #dc2626;

  /* Typography (Sora per UX-DR2; stack matches UX spec) */
  --font-family-sans: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-extrabold: 800;
  --font-size-display: 2.5rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-body: 1rem;
  --font-size-micro: 0.75rem;
  --line-height-tight: 1.15;
  --line-height-snug: 1.35;
  --line-height-body: 1.5;

  /* Spacing — 4px grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 2rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgb(24 24 27 / 0.06);
  --shadow-md: 0 4px 12px rgb(24 24 27 / 0.08);
  --shadow-elevated: 0 12px 40px rgb(79 70 229 / 0.14);

  /* Motion */
  --duration-fast: 150ms;
  --duration-default: 250ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus — Epic 6 consumes these */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-focus-ring);
}

@media (min-width: 48rem) {
  :root {
    --font-size-display: 3.5rem;
    --font-size-h1: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-default: 0.01ms;
  }
}