/* =================================================
   F2F Design System · Colors + Typography
   Single source of truth for brand tokens.
   Philosophy: "The Bespoke Wardrobe" + "The Manuscript
   and the Machine" — every color drawn from a real
   bespoke object, a sharp serif paired with a neutral
   sans, restrained motion.
   ================================================= */

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

:root {
  /* === COLORS — PRIMARY (60·30·7·3 rule) === */
  --color-white:          #FFFFFF;  /* 60% — bespoke shirt white */
  --color-chocolate:      #3D2817;  /* 30% — primary text / dark bg (never pure black) */
  --color-chocolate-deep: #2A1A0E;
  --color-bordeaux:       #6B1F24;  /* 7%  — primary accent, CTA, italic "2" */
  --color-bordeaux-deep:  #4A1418;
  --color-gold:           #C9A961;  /* 3%  — SACRED — logo accent on dark, dividers, foil */
  --color-gold-deep:      #9A7B3F;

  /* === COLORS — SUPPORTING === */
  --color-ivory:          #F4EDE0;  /* warm paper — letterhead, hangtags */
  --color-cream:          #FAFAFA;  /* near-white surface */
  --color-camel:          #B8956A;  /* warm neutral, metadata, overcoat */
  --color-oxblood:        #3E1318;  /* deep accent — Reserve tier, VIP */
  --color-forest:         #2A3D2E;  /* seasonal — tweed winter */
  --color-stone:          #7A6A5A;  /* secondary text, timestamp, helper */
  --color-mist:           #D4C9B8;  /* soft light neutral */

  /* === COLORS — FUNCTIONAL === */
  --color-success: var(--color-forest);
  --color-danger:  var(--color-bordeaux);
  --color-warning: var(--color-gold-deep);
  --color-info:    var(--color-chocolate);

  /* === COLORS — BORDER & SURFACE === */
  --color-border-subtle:  rgba(61, 40, 23, 0.08);
  --color-border-medium:  rgba(61, 40, 23, 0.15);
  --color-border-strong:  rgba(61, 40, 23, 0.35);
  --color-overlay-dark:   rgba(42, 26, 14, 0.6);
  --color-overlay-light:  rgba(255, 255, 255, 0.92);

  /* === SEMANTIC FG/BG === */
  --fg-primary:   var(--color-chocolate);
  --fg-secondary: var(--color-stone);
  --fg-accent:    var(--color-bordeaux);
  --fg-gold:      var(--color-gold);
  --fg-inverse:   var(--color-ivory);
  --bg-page:      var(--color-white);
  --bg-warm:      var(--color-ivory);
  --bg-dark:      var(--color-chocolate);

  /* === TYPOGRAPHY FAMILIES ===
     Brand first choice: Canela (display) + Söhne (sans).
     Substituted below with free Google-Fonts matches —
     flagged to client for license-ready swap. */
  --font-serif:  'Cormorant Garamond', 'Canela', 'GT Super', 'Playfair Display', Georgia, serif;
  --font-sans:   'Inter', 'Söhne', 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;

  /* === TYPOGRAPHY SCALE (desktop baseline) === */
  --fs-display:   clamp(56px, 8vw, 108px);
  --fs-h1:        clamp(44px, 5vw, 72px);
  --fs-h2:        clamp(32px, 3.5vw, 52px);
  --fs-h3:        clamp(24px, 2.5vw, 36px);
  --fs-h4:        clamp(20px, 2vw, 26px);
  --fs-body-lg:   18px;
  --fs-body:      15px;
  --fs-body-sm:   13px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;
  --fs-micro:     10px;

  --lh-tight:   1.05;
  --lh-heading: 1.15;
  --lh-body:    1.7;
  --lh-relaxed: 1.8;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;
  --tracking-widest:  0.3em;

  /* === SPACING (multiples of 4) === */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 140px;

  /* === LAYOUT === */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-pad:    48px;
  --container-pad-sm: 24px;

  /* === BORDER & RADIUS (heritage → minimal rounding) === */
  --border-thin:   1px;
  --border-med:    1.5px;
  --border-thick:  3px;
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-circle: 50%;

  /* === SHADOW (restrained — luxury doesn't float) === */
  --shadow-soft:  0 4px 20px rgba(61, 40, 23, 0.08);
  --shadow-card:  0 10px 30px rgba(61, 40, 23, 0.10), 0 3px 8px rgba(61, 40, 23, 0.06);
  --shadow-lift:  0 20px 60px rgba(61, 40, 23, 0.18), 0 8px 20px rgba(61, 40, 23, 0.10);
  --shadow-press: 0 1px 3px rgba(61, 40, 23, 0.15);

  /* === MOTION === */
  --ease-luxury: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sharp:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-xs: 150ms;
  --duration-sm: 250ms;
  --duration-md: 400ms;
  --duration-lg: 600ms;
  --duration-xl: 900ms;

  /* === IMAGE TREATMENT ===
     Pulls photography into the bordeaux/chocolate/ivory
     palette. Hero = near-mono sepia; card = light desat. */
  --img-filter-hero:      grayscale(0.72) sepia(0.42) brightness(0.88) contrast(1.06);
  --img-filter-editorial: grayscale(0.58) sepia(0.35) brightness(0.91) contrast(1.04);
  --img-filter-card:      saturate(0.82) sepia(0.06) brightness(0.98) contrast(1.02);
  --img-filter-thumb:     saturate(0.60) sepia(0.12) brightness(0.98);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-xs: 0ms; --duration-sm: 0ms; --duration-md: 0ms;
    --duration-lg: 0ms; --duration-xl: 0ms;
  }
}

/* =================================================
   SEMANTIC TYPOGRAPHY
   ================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.display {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

p { margin-bottom: var(--space-md); max-width: 720px; }

em { font-style: italic; color: var(--fg-accent); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
  display: block;
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-secondary);
  letter-spacing: 0.02em;
}

.quote-large {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--fg-accent);
  max-width: 820px;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
}

::selection { background: var(--color-bordeaux); color: var(--color-white); }

:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }