/* Design tokens for ocuscreen.app. Brand colors mirror
   OcuScreen/DesignSystem/Colors.swift in the iOS app — keep them in sync. */

:root {
  /* Brand palette */
  --color-primary: #007AD9;
  --color-accent: #F2A61A;
  --color-success: #2E9C5E;
  --color-caution: #E08000;
  --color-danger: #D9352E;

  /* #007AD9 only clears 4.0:1 on paper, so text and controls use the deeper
     tone and the sky blue stays on linework, fills and focus rings. */
  --color-primary-deep: #00518F;
  --color-primary-darker: #003F70;
  --color-primary-wash: #EDF4FB;
  --color-accent-wash: #FDF4E2;

  /* Neutrals */
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-text: #14181C;
  --color-text-muted: #47505C;
  --color-border: #E3E6EA;
  --color-rule: #CDD3DA;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* The hero headline steps down like the rows of a wall chart. */
  --fs-row-1: clamp(2.35rem, 8vw, 5.25rem);
  --fs-row-2: clamp(1.85rem, 6.2vw, 4.05rem);
  --fs-row-3: clamp(1.45rem, 4.8vw, 3.15rem);

  --fs-h2: clamp(1.75rem, 3.4vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.7vw, 1.3125rem);
  --fs-micro: 0.75rem;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --measure: 34rem;
  --wrap: 68rem;
  --shadow-soft: 0 1px 2px rgba(20, 24, 28, 0.04), 0 8px 24px rgba(20, 24, 28, 0.05);
}