/* SaMo Scoop design tokens — Direction A: Marine Layer. v1.0
   Mobile-first. Fluid type interpolates between 360px and 1024px viewports.
   Contrast ratios are WCAG 2.x, computed against the noted background. */

:root {
  /* Palette (raw) */
  --palette-fog: #ECEAE5;
  --palette-marine-layer: #9AA3A8;
  --palette-slate: #3E4C55;
  --palette-night-ink: #1C2327;
  --palette-golden-hour: #E8A33D;
  --palette-last-light: #D9674A;

  /* Semantic colors */
  --color-bg: #ECEAE5; /* Fog. Page background. */
  --color-surface: #F7F6F3; /* Cards, facts block, header on scroll. */
  --color-surface-sunken: #E4E1DA; 
  --color-text: #1C2327; /* Night ink. 13.24:1 on bg, 14.73:1 on surface. AAA. */
  --color-text-muted: #56616A; /* Darkened from #5E6A71 for margin. 5.27:1 on bg, 5.86:1 on surface, 5.56:1 on sponsor-bg. AA at all sizes. */
  --color-text-inverse: #ECEAE5; /* Fog on night-ink: 13.24:1. */
  --color-border: #D3D1CB; /* Hairline dividers. Decorative only (not for input or control outlines). */
  --color-border-strong: #7A858B; /* Ghost-button and input outlines. 3.14:1 on bg, 3.5:1 on surface (meets 3:1 non-text). */
  --color-accent: #E8A33D; /* Golden hour. Primary button fill. Label must be --color-text (7.38:1). Never use gold as text on bg (1.79:1). */
  --color-accent-hover: #DB9530; /* Hover fill. Text on it 6.33:1. */
  --color-accent-active: #D18E26; /* Pressed fill. Text on it 5.77:1. */
  --color-accent-warm-text: #A8432A; /* Text-safe Last light (4.99:1 on bg, 5.55:1 on surface). The raw #D9674A is 2.92:1 and is decorative only. */
  --color-link: #3E4C55; /* Slate, always underlined. 7.37:1 on bg, 8.2:1 on surface. */
  --color-link-hover: #1C2327; /* Night ink. */
  --color-focus-ring: #3E4C55; /* 2px outline with 2px offset, drawn on the page bg (7.37:1 vs bg, passes 3:1). */
  --color-sponsor-bg: #F2F0EB; /* Sponsor slot fill. Ink 13.98:1, muted 5.56:1. */
  --color-sponsor-border: #7A858B; /* Dashed 1px. */
  --color-disabled-bg: #E0DED8; /* Disabled controls (exempt from contrast rules, still legible). */
  --color-disabled-text: #7A858B;
  --color-success: #2F6B4F; /* 5.23:1 on bg. */
  --color-error: #B3261E; /* 5.44:1 on bg. */

  /* Fonts (self-hosted; see fonts.md) */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale: size / line-height / letter-spacing */
  --fs-display: clamp(2.25rem, 1.708rem + 2.41vw, 3.25rem); /* 36px → 52px */
  --lh-display: 1.05;
  --ls-display: -0.015em;
  --fs-h1: clamp(1.875rem, 1.468rem + 1.807vw, 2.625rem); /* 30px → 42px */
  --lh-h1: 1.1;
  --ls-h1: -0.01em;
  --fs-h2: clamp(1.5rem, 1.297rem + 0.9036vw, 1.875rem); /* 24px → 30px */
  --lh-h2: 1.2;
  --ls-h2: -0.005em;
  --fs-h3: clamp(1.188rem, 1.086rem + 0.4518vw, 1.375rem); /* 19px → 22px */
  --lh-h3: 1.3;
  --ls-h3: 0;
  --fs-verdict: clamp(1.125rem, 1.057rem + 0.3012vw, 1.25rem); /* 18px → 20px */
  --lh-verdict: 1.45;
  --ls-verdict: 0;
  --fs-body: clamp(1rem, 0.9661rem + 0.1506vw, 1.062rem); /* 16px → 17px */
  --lh-body: 1.6;
  --ls-body: 0;
  --fs-small: 0.875rem; /* 14px → 14px */
  --lh-small: 1.5;
  --ls-small: 0;
  --fs-xs: 0.75rem; /* 12px → 12px */
  --lh-xs: 1.4;
  --ls-xs: 0.01em;
  --fs-kicker: clamp(0.6875rem, 0.6536rem + 0.1506vw, 0.75rem); /* 11px → 12px */
  --lh-kicker: 1.3;
  --ls-kicker: 0.12em;

  /* Spacing: 4px base */
  --space-0: 0rem; /* 0px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 2rem; /* 32px */
  --space-8: 2.5rem; /* 40px */
  --space-9: 3rem; /* 48px */
  --space-10: 4rem; /* 64px */
  --space-11: 5rem; /* 80px */

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows (use sparingly; the look is mostly flat) */
  --shadow-sm: 0 1px 2px rgba(28,35,39,0.06);
  --shadow-md: 0 4px 12px rgba(28,35,39,0.08);
  --shadow-lg: 0 12px 32px rgba(28,35,39,0.12);

  /* Layout */
  --width-content: 40rem;
  --width-page: 72rem;
  --width-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --tap-min: 44px;

  /* Breakpoints (reference only: custom properties don't work inside @media).
     Use min-width queries: 480px (sm), 768px (md), 1024px (lg). */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}