/* The iOBM — Colors & Type Foundation
 * European operational authority with human proximity.
 */

/* Display family — Playfair Display still loaded from Google Fonts (no local file supplied yet). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&display=swap');

/* Body / UI family — DM Sans loaded from local variable font files supplied by the brand. */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* Corinthia — RARE editorial accent only. Email signatures, Flodesk newsletter,
 * and blog editorial frontispieces / sign-offs ONLY. Never on website chrome.
 * One flourish per surface, max. See guardrails. */
@font-face {
  font-family: 'Corinthia';
  src: url('fonts/Corinthia-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Corinthia';
  src: url('fonts/Corinthia-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== COLOR — RAW PALETTE ===== */
  --c-near-black:    #1A1A1A; /* authority anchor: headlines, primary body, CTA, primary logo mark */
  --c-evolved-brick: #A03535; /* brand accent: chapter heads, active/hover, Stream 1 CTAs */
  --c-urban-moss:    #827F78; /* dividers, dot motif, disabled states. Text uses --fg-muted (AA). */
  --c-dust-rose:     #D1A49F; /* borders, dot motif, table accents, soft highlights */
  --c-warm-ivory:    #F9F0EF; /* PRIMARY page background — never pure white */
  --c-soft-cream:    #F3EDE8; /* alternate section background, pull-quote bg */
  --c-white:         #FFFFFF; /* card / form / panel surfaces */

  /* ===== COLOR — SEMANTIC ===== */
  --bg-page:        var(--c-warm-ivory);
  --bg-alt:         var(--c-soft-cream);
  --bg-surface:     var(--c-white);
  --bg-dark:        var(--c-near-black);

  --fg-primary:     var(--c-near-black);
  --fg-on-dark:     var(--c-white);
  --fg-muted:       #6F6C66; /* AA-compliant muted text per RFC 2026-06-14; --c-urban-moss palette kept for dividers/dots/disabled */
  --fg-accent:      var(--c-evolved-brick);

  --border-soft:    var(--c-dust-rose);
  --border-strong:  var(--c-near-black);
  --border-focus:   var(--c-evolved-brick);

  --dot:            var(--c-dust-rose);
  --dot-emphasis:   var(--c-evolved-brick);

  /* ===== TYPE — FAMILIES ===== */
  --ff-display: 'Playfair Display', 'Bodoni 72', 'Didot', Georgia, serif;
  --ff-body:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-accent:  'Corinthia', 'Snell Roundhand', cursive; /* RARE editorial accent only */

  /* ===== TYPE — SCALE (desktop / mobile) ===== */
  --fs-hero-h1:   68px; --fs-hero-h1-m:   42px;  /* Playfair Bold */
  --fs-page-h1:   52px; --fs-page-h1-m:   38px;  /* Playfair Bold */
  --fs-h2:        38px; --fs-h2-m:        28px;  /* Playfair Bold */
  --fs-h3-label:  15px; --fs-h3-label-m:  14px;  /* DM Sans SemiBold, CAPS, 0.08em */
  --fs-body:      17px; --fs-body-m:      16px;  /* DM Sans Regular */
  --fs-caption:   13px;                          /* DM Sans Regular */
  --fs-cta:       14px;                          /* DM Sans SemiBold, CAPS, 0.05em */
  --fs-pull:      24px;                          /* Playfair Italic */

  /* ===== TYPE — SHARED ===== */
  --lh-display: 1.08;
  --lh-body:    1.65;
  --lh-tight:   1.25;

  --tracking-label:   0.08em;
  --tracking-cta:     0.05em;
  --tracking-display: -0.01em;

  /* ===== SPACING ===== */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ===== RADIUS — restrained, never pill ===== */
  --r-none: 0px;
  --r-sm:   2px;
  --r-md:   4px;          /* MAX — never exceed for buttons */

  /* ===== ELEVATION — almost none; flat editorial ===== */
  --shadow-none:  none;
  --shadow-card:  0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-hover: 0 8px 24px rgba(26, 26, 26, 0.08);

  /* ===== MOTION ===== */
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 240ms;
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ===== LAYOUT ===== */
  --content-max: 1280px;
  --gutter:      80px;
}

/* ===== BASE ELEMENT STYLES (opt-in via .iobm scope or global) ===== */
.iobm, .iobm * { box-sizing: border-box; }

.iobm {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typography utility classes — semantic */
.t-hero-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-hero-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
  text-wrap: pretty;
}
.t-page-h1 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-page-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.t-h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
}
.t-h3-label {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-h3-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-accent);
}
.t-body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 65ch;
}
.t-caption {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.t-cta {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-cta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
}
.t-pull {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-pull);
  line-height: 1.4;
  color: var(--fg-accent);
}

/* Corinthia accent — use SPARINGLY: one signature flourish per surface.
 * Never for headlines, body, UI, navigation, CTAs, or labels. */
.t-flourish {
  font-family: var(--ff-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 56px;
  line-height: 1;
  color: var(--c-evolved-brick);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  font-family: var(--ff-body); font-weight: 600;
  font-size: var(--fs-cta); text-transform: uppercase;
  letter-spacing: var(--tracking-cta);
  border-radius: var(--r-md); border: 1.5px solid transparent;
  cursor: pointer; transition: background var(--dur-base) var(--ease),
                              color var(--dur-base) var(--ease),
                              border-color var(--dur-base) var(--ease);
  text-decoration: none; box-shadow: none;
}
.btn--primary { background: var(--c-near-black); color: var(--c-white); border-color: var(--c-near-black); }
.btn--primary:hover { background: var(--c-evolved-brick); border-color: var(--c-evolved-brick); }
.btn--primary:disabled { background: var(--c-urban-moss); border-color: var(--c-urban-moss); cursor: not-allowed; opacity: 0.6; }

.btn--ghost { background: transparent; color: var(--c-near-black); border-color: var(--c-near-black); }
.btn--ghost:hover { background: var(--c-near-black); color: var(--c-white); }
.btn--ghost:disabled { color: var(--c-urban-moss); border-color: var(--c-urban-moss); cursor: not-allowed; }

.btn--accent { background: var(--c-evolved-brick); color: var(--c-white); border-color: var(--c-evolved-brick); }
.btn--accent:hover { background: var(--c-near-black); border-color: var(--c-near-black); }
.btn--accent:disabled { background: var(--c-dust-rose); border-color: var(--c-dust-rose); cursor: not-allowed; }

.btn--reversed { background: var(--c-white); color: var(--c-near-black); border-color: var(--c-white); }
.btn--reversed:hover { background: var(--c-evolved-brick); color: var(--c-white); border-color: var(--c-evolved-brick); }
.btn--reversed:disabled { background: var(--c-urban-moss); color: var(--c-white); border-color: var(--c-urban-moss); cursor: not-allowed; opacity: 0.6; }

/* ===== DOT MOTIF ===== */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); vertical-align: middle; }
.dot--brick { background: var(--c-evolved-brick); }
.dot--moss  { background: var(--c-urban-moss); }
.dot--lg    { width: 12px; height: 12px; }
.dot--xl    { width: 24px; height: 24px; }

/* Section divider: hairline · dot · hairline */
.section-divider {
  display: flex; align-items: center; gap: 16px;
  color: var(--c-dust-rose);
}
.section-divider::before, .section-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--c-dust-rose);
}