/* ==========================================================================
   Design tokens — Modernist, retuned to the logo's gold
   ==========================================================================
   The system ships with a red accent (#ec3013). The brand mark is gold, so the
   accent role and both accent ramps were resampled to #b19677 and every other
   token kept as the system defines it. Small gold text sits on the darker
   --color-accent-700 step, because gold at full strength does not carry enough
   contrast against the light ground at body sizes.
   ========================================================================== */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #b19677;
  --color-accent-2: #b19677;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — one shared lightness scale, so the same step of any role
     matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #f7f3ee;
  --color-accent-200: #ede4d8;
  --color-accent-300: #dfd0bb;
  --color-accent-400: #c9b297;
  --color-accent-500: #b19677;
  --color-accent-600: #957b5d;
  --color-accent-700: #745f47;
  --color-accent-800: #554536;
  --color-accent-900: #382d23;

  --color-accent-2-100: #f7f3ee;
  --color-accent-2-200: #ede4d8;
  --color-accent-2-300: #dfd0bb;
  --color-accent-2-400: #c9b297;
  --color-accent-2-500: #b19677;
  --color-accent-2-600: #957b5d;
  --color-accent-2-700: #745f47;
  --color-accent-2-800: #554536;
  --color-accent-2-900: #382d23;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Layout rhythm — the inset and radius that give the header, hero, contact
     band and footer their shared "cards on a ground" look. */
  --inset: clamp(12px, 2vw, 24px);
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1200px;
  --card-radius: 24px;
  --rule: 2px solid var(--color-divider);
}

/* ==========================================================================
   Dark theme
   ==========================================================================
   The gold ramp inverts: 100 becomes the darkest step and 900 the lightest, so
   a rule written against --color-accent-700 stays readable in both modes
   without being restated per theme.
   ========================================================================== */

:root[data-theme="dark"] {
  --color-bg: #141312;
  --color-surface: #1e1c1b;
  --color-text: #f1efed;
  --color-divider: color-mix(in srgb, #f1efed 28%, transparent);

  --color-neutral-100: #1a1918;
  --color-neutral-200: #1f1d1c;
  --color-neutral-300: #2b2827;
  --color-neutral-400: #3d3a38;
  --color-neutral-500: #6b6764;
  --color-neutral-600: #8f8a86;
  --color-neutral-700: #b3aeaa;
  --color-neutral-800: #d6d2cf;
  --color-neutral-900: #ece9e6;

  --color-accent-100: #2a231b;
  --color-accent-200: #3a2f23;
  --color-accent-300: #55452f;
  --color-accent-400: #7d6748;
  --color-accent-500: #b19677;
  --color-accent-600: #c4ad91;
  --color-accent-700: #d4c2ab;
  --color-accent-800: #e4d8c8;
  --color-accent-900: #f1ebe2;

  --color-accent-2-100: #2a231b;
  --color-accent-2-200: #3a2f23;
  --color-accent-2-300: #55452f;
  --color-accent-2-400: #7d6748;
  --color-accent-2-500: #b19677;
  --color-accent-2-600: #c4ad91;
  --color-accent-2-700: #d4c2ab;
  --color-accent-2-800: #e4d8c8;
  --color-accent-2-900: #f1ebe2;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}