/* ─────────────────────────────────────────────────────────────
   BJO Automation — Colors & Type
   Central Coast California · warm, editorial, trustworthy
   Structure inspired by the Aurova template, adjusted for a
   cream/forest/clay palette with serif display + sans body.
   ───────────────────────────────────────────────────────────── */

/* Fraunces + Inter Tight served from Google Fonts. If offline/prod,
   self-host the ttf files (see fonts/README.md — placeholder note). */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter+Tight:wght@300;400;500;600&display=swap');

:root {
  /* ─── Core palette ─── */
  --bg-cream:      #F8F4ED; /* primary background */
  --bg-bone:       #EFE9DC; /* secondary background, cards, fields */
  --bg-forest:     #2E3D2A; /* dark sections, primary buttons */
  --bg-forest-ink: #24301F; /* deeper forest, footer */

  --accent-clay:   #C49A6C; /* stat cards, eyebrows, accents */
  --accent-clay-soft: #E6CFB4; /* tinted clay cards */
  --accent-olive:  #6B7A4F; /* secondary accent, hover */

  --text-charcoal: #2A2724; /* primary text (never pure black) */
  --text-muted:    #6E6962; /* secondary text, captions */
  --text-cream:    #F8F4ED; /* text on forest */
  --text-cream-muted: #D8D1C2;

  --border-hair:   #E3DDD0; /* hairlines on cream */
  --border-bone:   #D8D0BE; /* field borders */
  --border-forest: #3B4A36; /* forest hairlines */

  /* Semantic aliases */
  --bg:            var(--bg-cream);
  --bg-alt:        var(--bg-bone);
  --bg-inverse:    var(--bg-forest);
  --fg:            var(--text-charcoal);
  --fg-muted:      var(--text-muted);
  --fg-inverse:    var(--text-cream);
  --accent:        var(--accent-clay);

  /* ─── Typography families ─── */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Tight', 'Söhne', 'GT America', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ─── Type scale (px) ─── */
  /* Display — Fraunces, weight 400–500, sentence case */
  --fs-display-xl: 80px;  --lh-display-xl: 88px;   /* hero, desktop */
  --fs-display-lg: 64px;  --lh-display-lg: 72px;   /* section headline */
  --fs-display-md: 52px;  --lh-display-md: 60px;   /* page title */
  --fs-display-sm: 40px;  --lh-display-sm: 48px;   /* card title H3 */
  --fs-display-xs: 28px;  --lh-display-xs: 36px;   /* service name */

  /* Body — Inter Tight */
  --fs-lead: 22px; --lh-lead: 33px;   /* hero subhead */
  --fs-body: 18px; --lh-body: 29px;   /* default body (1.6) */
  --fs-sm:   16px; --lh-sm:   24px;
  --fs-xs:   14px; --lh-xs:   20px;

  /* Eyebrow / label — body font, uppercase, tracking */
  --fs-eyebrow: 12px; --lh-eyebrow: 16px; --tracking-eyebrow: 0.12em;

  /* ─── Spacing scale ─── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;
  --sp-10: 120px;
  --sp-11: 160px;
  --sp-12: 200px;

  /* ─── Radii ─── */
  --r-sm: 6px;
  --r-md: 8px;   /* buttons, form fields */
  --r-lg: 16px;  /* stat cards, service cards */
  --r-xl: 20px;  /* featured callout, "The math" */
  --r-2xl: 28px;

  /* ─── Shadows ─── */
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(42,39,36,0.04), 0 8px 24px rgba(42,39,36,0.06);
  --shadow-lift: 0 2px 4px rgba(42,39,36,0.06), 0 16px 40px rgba(42,39,36,0.10);
  --shadow-photo: 0 24px 60px rgba(42,39,36,0.18);

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-page: 700ms;

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-pad: 52px; /* from Figma: section left/right 52px */
  --prose-max: 720px;
  --essay-max: 680px;
}

/* ─── Base ─── */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-cream);
  color: var(--text-charcoal);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Semantic element defaults ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* editorial — avoid heavy display weights */
  color: var(--text-charcoal);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); }
h4 { font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); }
h5 { font-size: 22px; line-height: 30px; }
h6 { font-size: 18px; line-height: 26px; }

p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-charcoal); font-weight: 400; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-clay);
}

.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--text-charcoal);
  text-wrap: balance;
  letter-spacing: -0.015em;
}

small, .caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-muted);
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklab, var(--accent-clay) 60%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--accent-olive); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 14px;
}

::selection { background: var(--accent-clay-soft); color: var(--text-charcoal); }