/* ============================================================
   Solving for Pattern — design tokens (CSS custom properties)
   Derived from tokens/tokens.json. Do not edit values here
   without updating tokens.json and re-running
   scripts/check-contrast.mjs.

   Layers:
   1. Primitives  (--sfp-paper-100 …)  — raw ramp values
   2. Semantics   (--sfp-color-* etc.) — what components consume
   3. Theme scope (.sfp-theme-dark)    — remaps semantics only
   ============================================================ */

:root {
  /* ---------- 1. Color primitives ---------- */
  --sfp-paper-50: #FCFAF4;
  --sfp-paper-100: #F7F2E8;  /* Seed Paper (anchor) */
  --sfp-paper-200: #EFE7D6;
  --sfp-paper-300: #E3D8C2;

  --sfp-mist-100: #F0F5F2;
  --sfp-mist-200: #E8F0EA;   /* Lake Mist (anchor) */
  --sfp-mist-300: #D6E3DA;
  --sfp-mist-400: #BCD0C3;

  --sfp-watershed-500: #3C8171;
  --sfp-watershed-600: #2F6A5C;
  --sfp-watershed-700: #24544A;
  --sfp-watershed-800: #1C443B;
  --sfp-watershed-900: #12312B; /* Deep Watershed (anchor) */
  --sfp-watershed-950: #0A1F1B;

  --sfp-freshwater-100: #E3EEF0;
  --sfp-freshwater-200: #C8DDE2;
  --sfp-freshwater-300: #8FBECA;
  --sfp-freshwater-500: #4A8896;
  --sfp-freshwater-600: #2F6F7E; /* Freshwater Blue (anchor) */
  --sfp-freshwater-700: #285D6A;
  --sfp-freshwater-800: #1F4C57;

  --sfp-loam-100: #EFE8E0;
  --sfp-loam-200: #DCCFC2;
  --sfp-loam-500: #85644B;
  --sfp-loam-600: #6B4F3A;   /* Loam (anchor) */
  --sfp-loam-700: #57402F;

  --sfp-gold-100: #F8EED9;
  --sfp-gold-200: #F1DFB8;
  --sfp-gold-400: #E2B968;
  --sfp-gold-500: #D8A441;   /* Prairie Gold (anchor) */
  --sfp-gold-600: #C08F2F;
  --sfp-gold-700: #8A6318;

  --sfp-sedge-100: #DDEBE2;
  --sfp-sedge-600: #2E6A50;

  --sfp-clay-100: #F3DFD7;
  --sfp-clay-600: #96412D;
  --sfp-clay-700: #7C3323;

  --sfp-shoreline: #DAD3C1;
  --sfp-shoreline-on-dark: rgba(247, 242, 232, 0.18);

  /* ---------- 2. Semantic color roles ---------- */
  --sfp-color-bg-canvas: var(--sfp-paper-100);
  --sfp-color-bg-surface: var(--sfp-paper-50);
  --sfp-color-bg-subtle: var(--sfp-mist-200);
  --sfp-color-bg-subtle-hover: var(--sfp-mist-300);
  --sfp-color-bg-inverse: var(--sfp-watershed-900);
  --sfp-color-bg-inverse-surface: var(--sfp-watershed-800);

  --sfp-color-text-primary: var(--sfp-watershed-900);
  --sfp-color-text-secondary: var(--sfp-loam-600);
  --sfp-color-text-label: var(--sfp-watershed-700);
  --sfp-color-text-inverse: var(--sfp-paper-100);
  --sfp-color-text-inverse-secondary: #C4D5C9;
  --sfp-color-text-link: var(--sfp-freshwater-600);
  --sfp-color-text-link-hover: var(--sfp-freshwater-700);
  --sfp-color-text-on-action: var(--sfp-watershed-900);

  --sfp-color-action-primary: var(--sfp-gold-500);
  --sfp-color-action-primary-hover: var(--sfp-gold-600);
  --sfp-color-action-secondary-outline: var(--sfp-watershed-900);
  --sfp-color-action-secondary-hover-bg: var(--sfp-mist-200);

  --sfp-color-border: var(--sfp-shoreline);
  --sfp-color-border-strong: var(--sfp-watershed-900);
  --sfp-color-border-field: var(--sfp-mist-400);

  --sfp-color-status-info: var(--sfp-freshwater-600);
  --sfp-color-status-info-bg: var(--sfp-freshwater-100);
  --sfp-color-status-success: var(--sfp-sedge-600);
  --sfp-color-status-success-bg: var(--sfp-sedge-100);
  --sfp-color-status-warning: var(--sfp-loam-700);
  --sfp-color-status-warning-accent: var(--sfp-gold-500);
  --sfp-color-status-warning-bg: var(--sfp-gold-100);
  --sfp-color-status-danger: var(--sfp-clay-600);
  --sfp-color-status-danger-bg: var(--sfp-clay-100);

  --sfp-color-focus-ring: var(--sfp-gold-500);
  --sfp-color-focus-offset: var(--sfp-watershed-900);

  /* ---------- Typography ---------- */
  --sfp-font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sfp-font-body: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --sfp-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  --sfp-weight-regular: 400;
  --sfp-weight-medium: 500;
  --sfp-weight-semibold: 600;

  --sfp-text-display: 72px; --sfp-leading-display: 80px;
  --sfp-text-h1: 56px;      --sfp-leading-h1: 64px;
  --sfp-text-h2: 40px;      --sfp-leading-h2: 48px;
  --sfp-text-h3: 28px;      --sfp-leading-h3: 36px;
  --sfp-text-h4: 22px;      --sfp-leading-h4: 30px;
  --sfp-text-body-lg: 20px; --sfp-leading-body-lg: 32px;
  --sfp-text-body: 18px;    --sfp-leading-body: 30px;
  --sfp-text-small: 14px;   --sfp-leading-small: 22px;
  --sfp-text-label: 12px;   --sfp-leading-label: 16px;

  --sfp-tracking-display: -0.01em;
  --sfp-tracking-label: 0.08em;
  --sfp-measure-body: 70ch;

  /* ---------- Space (4px base) ---------- */
  --sfp-space-1: 4px;
  --sfp-space-2: 8px;
  --sfp-space-3: 12px;
  --sfp-space-4: 16px;
  --sfp-space-6: 24px;
  --sfp-space-8: 32px;
  --sfp-space-12: 48px;
  --sfp-space-16: 64px;
  --sfp-space-24: 96px;
  --sfp-space-32: 128px;

  /* ---------- Radius ---------- */
  --sfp-radius-sm: 4px;
  --sfp-radius-md: 8px;
  --sfp-radius-lg: 16px;
  --sfp-radius-xl: 24px;
  --sfp-radius-full: 999px;

  /* ---------- Borders + shadow ---------- */
  --sfp-border-hairline: 1px;
  --sfp-border-emphasis: 2px;
  --sfp-shadow-raised: 0 8px 24px rgba(18, 49, 43, 0.10);

  /* ---------- Z-index ---------- */
  --sfp-z-base: 0;
  --sfp-z-dropdown: 100;
  --sfp-z-sticky: 200;
  --sfp-z-overlay: 300;
  --sfp-z-modal: 400;
  --sfp-z-toast: 500;

  /* ---------- Icon sizes ---------- */
  --sfp-icon-sm: 16px;
  --sfp-icon-md: 20px;
  --sfp-icon-lg: 24px;
  --sfp-icon-xl: 32px;

  /* ---------- Motion ---------- */
  --sfp-duration-fast: 150ms;
  --sfp-duration-base: 200ms;
  --sfp-duration-slow: 240ms;
  --sfp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sfp-hover-lift: 2px;

  /* ---------- Layout ---------- */
  --sfp-container: 1200px;
  --sfp-gutter: 24px;             /* mobile default; widens at --sfp-bp-lg */
  --sfp-section-y: 80px;          /* mobile default; widens at --sfp-bp-lg */
  --sfp-target-min: 44px;

  /* Breakpoints (informational — CSS media queries cannot read
     custom properties; keep in sync with tokens.json) */
  --sfp-bp-sm: 480px;
  --sfp-bp-md: 768px;
  --sfp-bp-lg: 1024px;
  --sfp-bp-xl: 1280px;

  /* ---------- Focus ----------
     3px Prairie Gold ring over a 2px offset in the surface color.
     The dark inner ring is what keeps ≥3:1 on any adjacent surface. */
  --sfp-focus-ring-width: 3px;
  --sfp-focus-offset-width: 2px;
  --sfp-focus-shadow:
    0 0 0 var(--sfp-focus-offset-width) var(--sfp-color-bg-canvas),
    0 0 0 calc(var(--sfp-focus-offset-width) + var(--sfp-focus-ring-width)) var(--sfp-color-focus-ring);
}

@media (min-width: 1024px) {
  :root {
    --sfp-gutter: 90px;
    --sfp-section-y: 120px;
  }
}

/* ============================================================
   3. Dark editorial theme — hero fields, feature panels, footer.
   Remaps semantic tokens only. Never applied to a whole page.
   ============================================================ */
.sfp-theme-dark,
[data-sfp-theme='dark'] {
  --sfp-color-bg-canvas: var(--sfp-watershed-900);
  --sfp-color-bg-surface: var(--sfp-watershed-800);
  --sfp-color-bg-subtle: var(--sfp-watershed-950);
  --sfp-color-bg-subtle-hover: var(--sfp-watershed-800);
  --sfp-color-bg-inverse: var(--sfp-paper-100);
  --sfp-color-bg-inverse-surface: var(--sfp-paper-50);

  --sfp-color-text-primary: var(--sfp-paper-100);
  --sfp-color-text-secondary: var(--sfp-color-text-inverse-secondary);
  --sfp-color-text-label: var(--sfp-gold-400);
  --sfp-color-text-inverse: var(--sfp-watershed-900);
  --sfp-color-text-link: var(--sfp-freshwater-300);
  --sfp-color-text-link-hover: var(--sfp-freshwater-200);

  --sfp-color-border: var(--sfp-shoreline-on-dark);
  --sfp-color-border-strong: var(--sfp-paper-100);
  --sfp-color-border-field: var(--sfp-shoreline-on-dark);

  color: var(--sfp-color-text-primary);
  background-color: var(--sfp-color-bg-canvas);
}