/* =========================================================================
   Crosby Productions — Core Tokens
   Colors, typography, spacing, radii, shadows, motion.
   Import this file anywhere you need the brand.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
/* Primary: Fraunces (serif display, masculine, confident) + Inter (body). */
/* If the team swaps to SF Pro Display later, alias the --font-sans var.   */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand color -----------------------------------------------------
     Indigo #041E42 is SC Pantone 282 C — the single hero color. Everything
     else is neutral or a whisper of warm accent.                          */
  --indigo-900: #021528;
  --indigo-800: #041E42;   /* ← primary brand color */
  --indigo-700: #0A2E5C;
  --indigo-600: #1A4480;
  --indigo-100: #E6ECF4;
  --indigo-50:  #F4F7FB;

  /* ---- Refined accents (sit quietly next to deep indigo) -------------- */
  --champagne:   #E8D9B8;   /* soft, for "Most Popular" badge */
  --brass:       #C9A96E;   /* warm metal — small moments only */
  --slate-mist:  #5B7A9A;   /* cool supporting tone */
  --evergreen:   #2E4A3A;   /* deep natural grounding tone */

  /* ---- Neutrals -------------------------------------------------------- */
  --white:      #FFFFFF;
  --near-white: #FAFAFA;
  --fog:        #F5F5F7;   /* card/subtle bg */
  --divider:    #D2D2D7;
  --gray-500:   #86868B;   /* secondary text */
  --gray-700:   #4A4A50;
  --ink:        #1D1D1F;   /* body text (near-black, Apple-ish) */

  /* ---- Semantic surface & text ---------------------------------------- */
  --bg:         var(--white);
  --bg-alt:     var(--near-white);
  --bg-invert:  var(--indigo-800);

  --fg:         var(--ink);
  --fg-muted:   var(--gray-500);
  --fg-strong:  var(--indigo-800);
  --fg-invert:  var(--white);

  --border:     var(--divider);
  --border-strong: #C4C4CC;

  --accent:     var(--indigo-800);
  --accent-hover: var(--indigo-700);
  --accent-press: var(--indigo-900);

  /* ---- Typography -----------------------------------------------------
     Serif (Fraunces) for display — luxury, masculine, a little editorial.
     Sans (Inter) for UI + body — modern, clean, legible.                 */
  --font-serif: 'Fraunces', 'Cormorant Garamond', 'Georgia', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — big hero sizes, 1.6 body line-height */
  --fs-hero:    clamp(3.5rem, 7vw, 6rem);     /* @kind font */ /* 56–96 */
  --fs-display: clamp(2.75rem, 5vw, 4.5rem);  /* @kind font */ /* 44–72 */
  --fs-h1:      clamp(2.25rem, 4vw, 3.5rem);  /* @kind font */ /* 36–56 */
  --fs-h2:      clamp(1.75rem, 2.6vw, 2.25rem); /* @kind font */ /* 28–36 */
  --fs-h3:      1.5rem;     /* @kind font */ /* 24 */
  --fs-h4:      1.25rem;    /* @kind font */ /* 20 */
  --fs-body-lg: 1.1875rem;  /* @kind font */ /* 19 */
  --fs-body:    1.0625rem;  /* @kind font */ /* 17 */
  --fs-small:   0.9375rem;  /* @kind font */ /* 15 */
  --fs-eyebrow: 0.75rem;    /* @kind font */ /* 12, tracked */

  /* Letter-spacing */
  --ls-tight:   -0.02em;    /* @kind font */ /* big display headlines */
  --ls-snug:    -0.01em;    /* @kind font */ /* body headings */
  --ls-normal:  0;          /* @kind font */
  --ls-wide:    0.08em;     /* @kind font */ /* eyebrows, small caps */
  --ls-wider:   0.16em;     /* @kind font */ /* wordmark / CROSBY lettering */

  /* Line-heights */
  --lh-tight:   1.05;       /* @kind font */
  --lh-snug:    1.2;        /* @kind font */
  --lh-body:    1.65;       /* @kind font */ /* brief says 1.6+ */

  /* Weights */
  --fw-light:   300;        /* @kind font */
  --fw-regular: 400;        /* @kind font */
  --fw-medium:  500;        /* @kind font */
  --fw-semibold: 600;       /* @kind font */
  --fw-bold:    700;        /* @kind font */

  /* ---- Spacing (Apple-style roomy) ----------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  120px;       /* section padding floor */
  --space-11:  160px;

  --container: 1200px;      /* @kind spacing */ /* max-width */
  --container-narrow: 880px; /* @kind spacing */

  /* ---- Radii (brand calls for warm 24–28 on interactives) ------------ */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;       /* cards, default */
  --radius-xl:  28px;       /* feature cards, buttons */
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, warm, never harsh black) ----------------------- */
  --shadow-xs:  0 1px 2px rgba(4, 30, 66, 0.04);
  --shadow-sm:  0 2px 8px rgba(4, 30, 66, 0.06);
  --shadow-md:  0 8px 24px rgba(4, 30, 66, 0.08);
  --shadow-lg:  0 20px 48px rgba(4, 30, 66, 0.10);
  --shadow-xl:  0 32px 80px rgba(4, 30, 66, 0.14);
  --shadow-indigo: 0 16px 40px rgba(4, 30, 66, 0.28);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast:   180ms;      /* @kind other */
  --dur-base:   320ms;      /* @kind other */
  --dur-slow:   600ms;      /* @kind other */
  --dur-page:   1200ms;     /* @kind other */ /* Ken Burns, parallax */
}

/* =========================================================================
   Semantic element styles — drop-in defaults
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

/* Headings — serif, tight tracking, generous line-height at scale */
h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: var(--ls-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  letter-spacing: var(--ls-snug);
  margin: 0;
}

.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
}
.hero {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-strong);
}

/* Eyebrow — small, tracked, uppercase */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lede {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--gray-700);
  font-weight: var(--fw-regular);
}

p { margin: 0; }
small, .small { font-size: var(--fs-small); color: var(--fg-muted); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

/* Buttons — the canonical pair */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--accent);
  color: var(--fg-invert);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); opacity: 1; }
.btn-primary:active { background: var(--accent-press); transform: translateY(1px); }

.btn-ghost {
  background: transparent;
  color: var(--fg-strong);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--fog); opacity: 1; }
.btn-ghost:active { background: var(--divider); transform: translateY(1px); }

.btn-invert {
  background: var(--white);
  color: var(--indigo-800);
}
.btn-invert:hover { background: var(--near-white); opacity: 1; }

/* Card — default cosmetic shell */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-apple),
              box-shadow var(--dur-base) var(--ease-apple);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.card-invert {
  background: var(--indigo-800);
  color: var(--fg-invert);
  border-color: var(--indigo-700);
}

/* Divider */
hr, .divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-7) 0;
}

/* Layout helpers */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.section   { padding-block: var(--space-10); }