/* ============================================================
   SECOND FOUNDATION — Foundations: Color + Type
   Brand fonts: Playfair Display (display) + Inter (body/UI).
   Both are open-source; loaded here from Google Fonts.
   ============================================================ */

/* Brand typefaces — self-hosted from the uploaded variable fonts.
   Paths are relative to this stylesheet at the project root. */

/* Playfair Display (display serif) */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Inter (body/UI) */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand palette (from the Master Template "Simple Light" scheme) ---- */
  --sf-ink:        #1A1F2E;  /* primary text + darkest surface  */
  --sf-navy:       #252D40;  /* secondary dark surface / cards-on-dark */
  --sf-blue:       #2E6CE6;  /* primary accent — links, CTAs, emphasis */
  --sf-lavender:   #D4DCF0;  /* light tint — fills, dividers, chips */
  --sf-mist:       #F3F5FA;  /* default page background (off-white) */
  --sf-white:      #FFFFFF;
  --sf-amber:      #FF9900;  /* secondary accent — use sparingly (highlights, warnings) */
  --sf-red:        #FF0000;  /* accent — alerts / negative / emphasis */

  /* ---- Derived tints/shades (oklch-harmonized with the palette) ---- */
  --sf-blue-700:   #2257c2;  /* hover/pressed blue */
  --sf-blue-100:   #e3ecfc;  /* faint blue wash */
  --sf-lavender-60: #e7ecf7; /* lighter lavender */
  --sf-line:       #dde3f0;  /* hairline borders on light */
  --sf-line-strong:#c3cce0;
  --sf-navy-line:  #313a52;  /* hairline borders on dark */

  /* ---- Semantic foreground ---- */
  --sf-fg:         var(--sf-ink);      /* body text on light */
  --sf-fg-muted:   #5b6478;            /* secondary text on light */
  --sf-fg-subtle:  #8b93a6;            /* tertiary / captions on light */
  --sf-fg-on-dark: #FFFFFF;            /* text on ink/navy */
  --sf-fg-on-dark-muted: #aab2c7;      /* secondary text on dark */

  /* ---- Semantic surfaces ---- */
  --sf-bg:         var(--sf-mist);
  --sf-surface:    var(--sf-white);
  --sf-surface-dark: var(--sf-ink);

  /* ---- Type families ---- */
  --sf-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sf-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (Inter UI / Playfair display) ---- */
  --sf-text-xs:   12px;
  --sf-text-sm:   14px;
  --sf-text-base: 16px;
  --sf-text-md:   18px;
  --sf-text-lg:   22px;
  --sf-display-sm: 30px;
  --sf-display-md: 40px;
  --sf-display-lg: 56px;
  --sf-display-xl: 76px;

  /* ---- Radius ---- */
  --sf-radius-sm: 6px;
  --sf-radius:    10px;
  --sf-radius-lg: 16px;
  --sf-radius-pill: 999px;

  /* ---- Spacing (4px base) ---- */
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;
  --sf-space-7: 48px;
  --sf-space-8: 64px;
  --sf-space-9: 96px;

  /* ---- Elevation ---- */
  --sf-shadow-sm: 0 1px 2px rgba(26,31,46,.06), 0 1px 3px rgba(26,31,46,.05);
  --sf-shadow:    0 4px 14px rgba(26,31,46,.08), 0 1px 3px rgba(26,31,46,.05);
  --sf-shadow-lg: 0 18px 48px rgba(26,31,46,.14), 0 4px 12px rgba(26,31,46,.06);
  --sf-shadow-blue: 0 8px 24px rgba(46,108,230,.28);

  /* ---- Motion ---- */
  --sf-ease: cubic-bezier(.22,.61,.36,1);  /* gentle, confident ease-out */
  --sf-dur:  .22s;
}

/* ============================================================
   Base element styling — semantic typographic defaults
   ============================================================ */
body {
  font-family: var(--sf-font-body);
  color: var(--sf-fg);
  background: var(--sf-bg);
  font-size: var(--sf-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .sf-display {
  font-family: var(--sf-font-display);
  color: var(--sf-ink);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--sf-display-lg); }
h2 { font-size: var(--sf-display-md); }
h3 { font-size: var(--sf-display-sm); font-weight: 500; }

/* Eyebrow / kicker — Inter, uppercase, tracked */
.sf-eyebrow {
  font-family: var(--sf-font-body);
  font-weight: 600;
  font-size: var(--sf-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sf-blue);
}

h4, h5, h6, .sf-heading {
  font-family: var(--sf-font-body);
  font-weight: 600;
  color: var(--sf-ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}
h4 { font-size: var(--sf-text-lg); }
h5 { font-size: var(--sf-text-md); }
h6 { font-size: var(--sf-text-base); }

p { margin: 0 0 1em; text-wrap: pretty; }
.sf-lead { font-size: var(--sf-text-md); line-height: 1.65; color: var(--sf-fg-muted); }
small, .sf-caption { font-size: var(--sf-text-sm); color: var(--sf-fg-subtle); }

a { color: var(--sf-blue); text-decoration: none; }
a:hover { color: var(--sf-blue-700); }

code, .sf-mono {
  font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: .9em;
  background: var(--sf-lavender-60);
  padding: .12em .4em;
  border-radius: var(--sf-radius-sm);
  color: var(--sf-navy);
}