/* ============================================================
   McMullen's Sourcing Group — Design Tokens
   Ported verbatim from the brand design system
   (colors, typography, spacing, radii, shadows, motion, base).
   Warm-only palette; no cool colour, no pure white, no true black.
   ============================================================ */

/* ---- Webfonts: Cormorant Garamond (display) + Montserrat (sans) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand core (verbatim from the brand sheet) ---- */
  --ivory:      #F3F0EB;
  --warm-taupe: #D6C9B8;
  --stone:      #B8ADA0;
  --chocolate:  #4B3E34;
  --charcoal:   #1E1E1E;
  --brass:      #B08D57;

  /* ---- Warm neutral ramp (Sand) ---- */
  --sand-50:  #FBFAF7;
  --sand-100: #F3F0EB;
  --sand-200: #E9E3D9;
  --sand-300: #D6C9B8;
  --sand-400: #B8ADA0;
  --sand-500: #8C8072;
  --sand-600: #6A5B4D;
  --sand-700: #4B3E34;
  --sand-800: #2E251E;
  --sand-900: #1E1E1E;

  /* ---- Brass ramp (metallic accent) ---- */
  --brass-100: #F1E7D7;
  --brass-200: #E1CBA9;
  --brass-300: #C9AA7E;
  --brass-400: #B08D57;
  --brass-500: #9A784A;
  --brass-600: #7E6238;
  --brass-700: #5F4A2B;

  /* ---- Status (derived, warm-harmonised) ---- */
  --success:         #5F6B4E;
  --success-surface: #EAEBE0;
  --danger:          #9B4A3A;
  --danger-surface:  #F3E4DF;
  --warning:         #B0854A;
  --warning-surface: #F4EAD8;
  --info:            #5B6B70;
  --info-surface:    #E6EBEB;

  /* ---- Alpha inks (shadows / overlays / rings) ---- */
  --ink-04: rgba(30, 30, 30, 0.04);
  --ink-08: rgba(30, 30, 30, 0.08);
  --ink-12: rgba(30, 30, 30, 0.12);
  --choco-06: rgba(75, 62, 52, 0.06);
  --choco-10: rgba(75, 62, 52, 0.10);
  --choco-16: rgba(75, 62, 52, 0.16);
  --brass-ring: rgba(176, 141, 87, 0.28);
  --scrim: rgba(30, 30, 30, 0.48);

  /* ---- Semantic surfaces ---- */
  --surface-page:    var(--ivory);
  --surface-card:    var(--sand-50);
  --surface-sunken:  var(--sand-200);
  --surface-inverse: var(--chocolate);
  --surface-ink:     var(--charcoal);
  --surface-hover:   var(--sand-200);

  /* ---- Semantic text ---- */
  --text-heading:       var(--charcoal);
  --text-body:          var(--sand-700);
  --text-secondary:     var(--sand-600);
  --text-muted:         var(--sand-500);
  --text-accent:        var(--brass-500);
  --text-on-dark:       var(--ivory);
  --text-on-dark-muted: var(--stone);
  --text-on-brass:      var(--ivory);

  /* ---- Borders & dividers ---- */
  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);
  --border-strong:  var(--sand-400);
  --border-inverse: rgba(243, 240, 235, 0.16);

  /* ---- Accent / interactive ---- */
  --accent:         var(--brass-400);
  --accent-hover:   var(--brass-500);
  --accent-pressed: var(--brass-600);
  --accent-wash:    var(--brass-100);
  --focus-ring:     var(--brass-ring);

  /* ---- Links ---- */
  --link:       var(--brass-500);
  --link-hover: var(--brass-600);

  /* ---- Type families ---- */
  --font-display: 'Cormorant Garamond', 'Cormorant', 'Times New Roman', Georgia, serif;
  --font-sans:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Type scale ---- */
  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;
  --text-6xl:  5.25rem;
  --text-7xl:  7rem;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.72;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.28em;

  /* ---- Spacing (4px grid) ---- */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --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;
  --space-32:  8rem;
  --space-40:  10rem;

  /* ---- Radii ---- */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     3px;
  --radius-md:     5px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    18px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* ---- Shadows (warm, chocolate-tinted) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(30, 30, 30, 0.05);
  --shadow-sm: 0 2px 8px rgba(75, 62, 52, 0.06);
  --shadow-md: 0 6px 20px rgba(75, 62, 52, 0.08);
  --shadow-lg: 0 16px 40px rgba(75, 62, 52, 0.10);
  --shadow-xl: 0 28px 64px rgba(75, 62, 52, 0.13);
  --shadow-inset: inset 0 1px 2px rgba(75, 62, 52, 0.08);
  --ring-focus: 0 0 0 3px var(--focus-ring);
  --ring-focus-tight: 0 0 0 2px var(--focus-ring);

  /* ---- Motion ---- */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --duration-slower:  640ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:   linear;
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);
}

/* ============================================================
   BASE RESET — brand defaults on the document
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: var(--transition-colors);
}
a:hover { color: var(--link-hover); }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--brass-200); color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}