/*
 * SAR-ING design-system foundations.
 * Global visual decisions are defined here as reusable custom properties.
 */

:root {
  /* Color */
  --color-background: #fafaf9;
  --color-surface: #fffefa;
  --color-surface-muted: #eceff1;
  --color-text-primary: #20252b;
  --color-text-secondary: #46515c;
  --color-text-muted: #66717b;
  --color-text-inverse: #f9fafb;
  --color-accent: #244a6b;
  --color-accent-hover: #193b59;
  --color-accent-active: #123047;
  --color-accent-soft: #e4edf3;
  --color-border: #d7dadd;
  --color-border-strong: #adb4ba;
  --color-focus-ring: #2e6f9e;

  /* Typography */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: clamp(2rem, 3vw, 2.75rem);
  --font-size-4xl: clamp(2.5rem, 4vw, 3.5rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* Spacing */
  --space-0: 0;
  --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;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Sizing and containers */
  --container-max-width: 75rem;
  --container-padding-inline: clamp(1rem, 4vw, 3rem);
  --content-max-width: 40rem;
  --portrait-max-width: 32rem;
  --header-height-min: 4.5rem;
  --touch-target-min: 2.75rem;

  /* Borders and radii */
  --border-width: 1px;
  --border-style: solid;
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;

  /* Shadows */
  --shadow-sm: 0 0.125rem 0.5rem rgb(32 37 43 / 8%);
  --shadow-md: 0 0.5rem 1.5rem rgb(32 37 43 / 12%);

  /* Transitions */
  --transition-fast: 120ms;
  --transition-base: 200ms;
  --transition-slow: 320ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
}

/*
 * Breakpoint documentation
 *
 * Mobile: below 48rem
 * Tablet: 48rem to below 64rem
 * Desktop: 64rem and above
 * Wide desktop enhancement: 80rem and above
 *
 * These values require explicit approval before modification. Media queries
 * belong in responsive.css and must respect prefers-reduced-motion.
 */