/* Matthew Daniel Design System | v0.2 | Typeface families selected; scale and semantic roles under review.
   Source palette: Matthew Daniel Brand Concept document.
   No retro, halftone, paper grain, or neo-commercial realism treatment. */
:root {
  /* Raw brand values. Do not change in individual components. */
  --md-color-navy: #01233f;
  --md-color-cream: #fcf6e9;
  --md-color-red: #cd3a40;
  --md-color-navy-teal: #1d5272;
  --md-color-blue: #77adba;
  --md-color-teal: #83b69a;
  --md-color-peach: #ead7c6;
  --md-color-white: #ffffff;

  /* Deep Navy ramp. 500 preserves original brand hex. */
  --md-ramp-navy-100: #ccd3d9;
  --md-ramp-navy-300: #738695;
  --md-ramp-navy-500: #01233f;
  --md-ramp-navy-700: #011c32;
  --md-ramp-navy-900: #011425;

  /* Soft Cream ramp. 500 preserves original brand hex. */
  --md-ramp-cream-100: #fefdfb;
  --md-ramp-cream-300: #fdfaf3;
  --md-ramp-cream-500: #fcf6e9;
  --md-ramp-cream-700: #cac5ba;
  --md-ramp-cream-900: #928f87;

  /* Deep Red ramp. 500 preserves original brand hex. */
  --md-ramp-red-100: #f5d8d9;
  --md-ramp-red-300: #e49396;
  --md-ramp-red-500: #cd3a40;
  --md-ramp-red-700: #a42e33;
  --md-ramp-red-900: #772225;

  /* Navy Teal ramp. 500 preserves original brand hex. */
  --md-ramp-navy-teal-100: #d2dce3;
  --md-ramp-navy-teal-300: #83a0b1;
  --md-ramp-navy-teal-500: #1d5272;
  --md-ramp-navy-teal-700: #17425b;
  --md-ramp-navy-teal-900: #113042;

  /* Cool Blue ramp. 500 preserves original brand hex. */
  --md-ramp-cool-blue-100: #e4eff1;
  --md-ramp-cool-blue-300: #b4d2d9;
  --md-ramp-cool-blue-500: #77adba;
  --md-ramp-cool-blue-700: #5f8a95;
  --md-ramp-cool-blue-900: #45646c;

  /* Muted Teal ramp. 500 preserves original brand hex. */
  --md-ramp-muted-teal-100: #e6f0eb;
  --md-ramp-muted-teal-300: #bbd7c7;
  --md-ramp-muted-teal-500: #83b69a;
  --md-ramp-muted-teal-700: #69927b;
  --md-ramp-muted-teal-900: #4c6a59;

  /* Light Peach ramp. 500 preserves original brand hex. */
  --md-ramp-peach-100: #fbf7f4;
  --md-ramp-peach-300: #f3e9e0;
  --md-ramp-peach-500: #ead7c6;
  --md-ramp-peach-700: #bbac9e;
  --md-ramp-peach-900: #887d73;

  /* Semantic colors: approved use cases, not decoration. */
  --md-surface: var(--md-color-cream);
  --md-surface-raised: var(--md-color-white);
  --md-surface-inverse: var(--md-color-navy);
  --md-ink: var(--md-color-navy);
  --md-ink-muted: var(--md-color-navy-teal);
  --md-ink-inverse: var(--md-color-cream);
  --md-accent: var(--md-color-red);
  --md-interactive: var(--md-color-navy);
  --md-outline: color-mix(in srgb, var(--md-color-navy) 19%, transparent);
  --md-outline-strong: color-mix(in srgb, var(--md-color-navy) 35%, transparent);
  --md-focus: var(--md-color-red);

  /* Brand typefaces match the live site's chosen families. */
  --md-font-display: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --md-font-body: 'Roboto', Arial, Helvetica, sans-serif;

  /* Fluid type scale (desktop max values in brackets). */
  --md-type-xs: 0.75rem;             /* 12px */
  --md-type-sm: 0.875rem;            /* 14px */
  --md-type-base: 1rem;              /* 16px */
  --md-type-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.25rem);
  --md-type-h4: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  --md-type-h3: clamp(1.75rem, 1.3rem + 2vw, 2.65rem);
  --md-type-h2: clamp(2.4rem, 1.5rem + 3.7vw, 4.5rem);
  --md-type-h1: clamp(3.7rem, 1.8rem + 7vw, 8rem);

  /* Four-point spacing rhythm. */
  --md-space-1: 0.25rem;
  --md-space-2: 0.5rem;
  --md-space-3: 0.75rem;
  --md-space-4: 1rem;
  --md-space-5: 1.25rem;
  --md-space-6: 1.5rem;
  --md-space-8: 2rem;
  --md-space-10: 2.5rem;
  --md-space-12: 3rem;
  --md-space-16: 4rem;
  --md-space-20: 5rem;
  --md-space-24: 6rem;
  --md-space-32: 8rem;

  --md-container: 80rem;
  --md-page-gutter: clamp(1.25rem, 4vw, 4rem);
  --md-section-space: clamp(4.5rem, 8vw, 8rem);
  --md-grid-gap: clamp(1rem, 2vw, 1.5rem);

  --md-radius-sm: 0.375rem;
  --md-radius-md: 0.75rem;
  --md-radius-lg: 1.25rem;
  --md-radius-pill: 999px;
  --md-border: 1px solid var(--md-outline);
  --md-shadow-soft: 0 20px 80px -56px rgb(1 35 63 / 24%);
  --md-ease: cubic-bezier(.2,.75,.2,1);
  --md-speed: 180ms;
}