/* ============================================================
   Exposed Focus — Colors & Type
   A refined, editorial system for a Brisbane family photographer.
   Warm bone neutrals, deep ink text, dusty sage + soft terracotta.
   ============================================================ */

@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/Cormorant-VariableFont_wght.ttf") format("truetype-variations"),
       url("/assets/fonts/Cormorant-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Cormorant";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/Cormorant-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("/assets/fonts/Cormorant-Italic-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterTight-VariableFont_wght.ttf") format("truetype-variations"),
       url("/assets/fonts/InterTight-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Inter Tight";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("/assets/fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype");
}
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

:root {
  --ef-bone-50:  #FBF7F2;
  --ef-bone-100: #F5EFE6;
  --ef-bone-200: #ECE3D5;
  --ef-bone-300: #DCCFBB;
  --ef-bone-400: #B8A88E;

  --ef-ink-900: #1F1B16;
  --ef-ink-700: #3A332B;
  --ef-ink-500: #6B6055;
  --ef-ink-300: #9C9085;

  --ef-sage-50:  #EEF1EB;
  --ef-sage-200: #C9D2BD;
  --ef-sage-500: #8A9B7A;
  --ef-sage-700: #5C6E50;

  --ef-clay-50:  #F6E9DF;
  --ef-clay-200: #E8C9B2;
  --ef-clay-500: #C68561;
  --ef-clay-700: #8E5938;

  --ef-paper:    #FFFFFF;
  --ef-shadow:   17 13 8;

  --bg:           var(--ef-bone-50);
  --bg-soft:      var(--ef-bone-100);
  --bg-strong:    var(--ef-bone-200);
  --surface:      var(--ef-paper);
  --surface-alt:  var(--ef-bone-100);

  --fg:           var(--ef-ink-900);
  --fg-muted:     var(--ef-ink-500);
  --fg-subtle:    var(--ef-ink-300);
  --fg-on-dark:   var(--ef-bone-50);

  --border:       var(--ef-bone-300);
  --border-soft:  var(--ef-bone-200);
  --border-strong:var(--ef-ink-900);

  --accent:       var(--ef-clay-500);
  --accent-soft:  var(--ef-clay-50);
  --accent-deep:  var(--ef-clay-700);

  --quiet:        var(--ef-sage-500);
  --quiet-soft:   var(--ef-sage-50);

  --font-display: "Cormorant", "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 12px; --r-pill: 999px;

  --shadow-xs: 0 1px 2px rgb(var(--ef-shadow) / 0.05);
  --shadow-sm: 0 2px 8px rgb(var(--ef-shadow) / 0.06), 0 1px 2px rgb(var(--ef-shadow) / 0.04);
  --shadow-md: 0 8px 24px rgb(var(--ef-shadow) / 0.08), 0 2px 4px rgb(var(--ef-shadow) / 0.04);
  --shadow-lg: 0 24px 48px rgb(var(--ef-shadow) / 0.10), 0 8px 16px rgb(var(--ef-shadow) / 0.06);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

.ef-eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-muted); }
.ef-display { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.02em; color: var(--fg); }
.ef-display em { font-style: italic; font-weight: 400; }
.ef-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -0.015em; color: var(--fg); }
.ef-h1 em { font-style: italic; }
.ef-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg); }
.ef-h3 { font-family: var(--font-sans); font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.005em; color: var(--fg); }
.ef-lede { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.45; color: var(--fg-muted); }
.ef-body { font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--fg); }
.ef-body-sm { font-family: var(--font-sans); font-weight: 400; font-size: 14px; line-height: 1.55; color: var(--fg); }
.ef-caption { font-family: var(--font-sans); font-weight: 400; font-size: 12px; line-height: 1.45; letter-spacing: 0.01em; color: var(--fg-muted); }
.ef-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.01em; color: var(--fg-muted); }
.ef-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 28px; line-height: 1.35; color: var(--fg); }