/* =============================================================
   ConvoLogic — Colors & Type
   Boutique consulting aesthetic. Soft, professional, trustworthy.
   ============================================================= */

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

/* =============================================================
   Logo font — Eurostile
   The brand wordmark is set in Eurostile Bold (commercial, Linotype).
   Drop a licensed file into fonts/eurostile-bold.woff2 (or .otf/.ttf)
   and this @font-face activates everywhere via --font-wordmark.
   ============================================================= */
@font-face {
  font-family: 'Eurostile';
  src: url('fonts/eurostile-bold.woff2') format('woff2'),
       url('fonts/eurostile-bold.woff')  format('woff'),
       url('fonts/eurostile-bold.otf')   format('opentype'),
       url('fonts/eurostile-bold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  --brand-purple:        #6b21a8;  /* royal purple — primary */
  --brand-purple-deep:   #581c87;  /* hover/active */
  --brand-purple-soft:   #f5edff;  /* tinted backgrounds, chips */
  --brand-violet:        #a855f7;  /* secondary, highlights */
  --brand-violet-soft:   #ede9fe;
  --brand-rose:          #c9847a;  /* rose-gold accent */
  --brand-rose-deep:     #b06d63;  /* rose hover */
  --brand-rose-soft:     #f7ece9;  /* tinted blocks, dividers */

  /* ---------- Neutrals ---------- */
  --paper:               #ffffff;  /* page background */
  --paper-warm:          #fbf9f7;  /* warm document tint, alt sections */
  --paper-cool:          #f9fafb;  /* cool section break */
  --ink:                 #1a1a1a;  /* primary text */
  --ink-soft:            #2d2235;  /* warmed black for body */
  --ink-muted:           #6b7280;  /* secondary text, captions */
  --ink-faint:           #9ca3af;  /* tertiary text */
  --rule:                #e5e7eb;  /* default border */
  --rule-soft:           #efeaf2;  /* purple-tinted divider */

  /* ---------- Semantic ---------- */
  --fg-1:                var(--ink);
  --fg-2:                var(--ink-soft);
  --fg-3:                var(--ink-muted);
  --fg-4:                var(--ink-faint);
  --fg-inverse:          #ffffff;
  --bg-1:                var(--paper);
  --bg-2:                var(--paper-warm);
  --bg-3:                var(--paper-cool);
  --bg-brand:            var(--brand-purple);
  --bg-brand-soft:       var(--brand-purple-soft);
  --accent:              var(--brand-rose);
  --link:                var(--brand-purple);
  --link-hover:          var(--brand-purple-deep);
  --border:              var(--rule);
  --border-soft:         var(--rule-soft);

  --success:             #2f7d57;
  --warning:             #b8741a;
  --error:               #b3261e;

  /* ---------- Type Families ---------- */
  --font-display:        'Cormorant Garamond', 'Georgia', serif;
  --font-body:           'Inter', system-ui, -apple-system, sans-serif;
  --font-wordmark:       'Eurostile', 'Audiowide', 'Bahnschrift', sans-serif;
  --font-mono:           ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type Scale (mobile-first, scales fine to 1100px) ---------- */
  --t-display:           clamp(2.5rem, 5.5vw, 4rem);     /* hero h1 */
  --t-h1:                clamp(2rem, 3.5vw, 2.75rem);
  --t-h2:                clamp(1.625rem, 2.5vw, 2.125rem);
  --t-h3:                1.25rem;
  --t-h4:                1.0625rem;
  --t-lede:              1.1875rem;     /* intro/subtitle */
  --t-body:              1rem;          /* 16px */
  --t-small:             0.9375rem;     /* 15px */
  --t-caption:           0.8125rem;     /* 13px */
  --t-eyebrow:           0.75rem;       /* uppercase labels */

  /* ---------- Spacing (4pt grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;     /* default — buttons, inputs */
  --r-lg: 12px;    /* cards */
  --r-xl: 16px;    /* larger panels */
  --r-pill: 999px;

  /* ---------- Shadows (soft, never harsh) ---------- */
  --shadow-sm:  0 1px 2px rgba(45, 34, 53, 0.05);
  --shadow-md:  0 1px 4px rgba(45, 34, 53, 0.08);
  --shadow-lg:  0 6px 24px rgba(45, 34, 53, 0.08);
  --shadow-xl:  0 12px 40px rgba(45, 34, 53, 0.10);
  --shadow-brand: 0 8px 28px rgba(107, 33, 168, 0.18);

  /* ---------- Motion ---------- */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      320ms;

  /* ---------- Layout ---------- */
  --max-w:       1100px;
  --max-w-doc:   720px;   /* document/long-form readable measure */
}

/* =============================================================
   Semantic typography
   ============================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.4;
  color: var(--fg-1);
  letter-spacing: -0.005em;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--fg-3);
}

p {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--t-caption);
  color: var(--fg-3);
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-purple);
}

.eyebrow-rose { color: var(--brand-rose-deep); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, var(--link) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-soft), text-decoration-color var(--t-fast) var(--ease-soft);
}
a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}

/* Wordmark — text fallback for the logo image. Uses Eurostile if present
   in fonts/, otherwise falls back to Audiowide (Google Fonts) — the closest
   free rounded-rectangular Eurostile-cousin. */
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400; /* Audiowide is single-weight; reads as bold */
  letter-spacing: 0;
  font-size: 1.25rem;
  line-height: 1;
}
.wordmark .convo { color: var(--brand-purple); }
.wordmark .logic { color: var(--brand-rose); }

/* Italic display flourish — for pull quotes, document headers */
.flourish {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--brand-rose-deep);
}