/* ========================================================================
   Simplifai — colors_and_type.css
   "AI without the rat race." — warm-earth palette · type-led · anti-corporate
   Source: uploads/snips-digital-claude-design-brief-2026-05-02.md
   ======================================================================== */

/* --- Fonts (Google Fonts CDN — no self-hosted woff2 yet) --- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Permanent+Marker&display=swap');

:root {
  /* ── COLOR · BRAND ─────────────────────────────────────────────────── */
  --ink:        #1A1A1A;  /* primary text, hero blocks                    */
  --cream:      #FFF8F0;  /* page background — Aussie cream, hint yellow  */
  --bone:       #FAF1E2;  /* secondary surface (cards, callouts)          */
  --clay:       #C44A1A;  /* primary accent · CTA · wordmark              */
  --clay-deep:  #9F3A12;  /* hover/active for clay                        */
  --clay-soft:  #E8B79D;  /* tint of clay for backgrounds                 */
  --bush:       #3D5A3D;  /* secondary accent · success · trust surfaces  */
  --bush-deep:  #2A4029;  /* hover/active for bush                        */
  --rule:       #E8DFD0;  /* borders, dividers, low-emphasis              */

  /* ── COLOR · NEUTRAL 10-STEP (warm-earth, never grey) ──────────────── */
  --neutral-50:  #FFFCF7;
  --neutral-100: #FFF8F0;
  --neutral-200: #FAF1E2;
  --neutral-300: #E8DFD0;
  --neutral-400: #C9BFAE;
  --neutral-500: #9C9281;
  --neutral-600: #6B6357;
  --neutral-700: #4A443B;
  --neutral-800: #2D2924;
  --neutral-900: #1A1A1A;

  /* ── COLOR · SEMANTIC ──────────────────────────────────────────────── */
  --success: #3D5A3D;   /* bush — also used for trust surfaces            */
  --warn:    #B8680A;   /* warm amber, sits next to clay without clashing */
  --error:   #B84A1E;   /* deeper red-clay, NOT fire-engine                */
  --info:    #4A6B7A;   /* muted blue-slate (rare — used for low-emphasis) */

  /* ── COLOR · TEXT (semantic) ───────────────────────────────────────── */
  --fg-1: var(--ink);             /* primary text                          */
  --fg-2: var(--neutral-700);     /* body / secondary text                 */
  --fg-3: var(--neutral-600);     /* muted / meta / spec lines             */
  --fg-on-ink:  var(--cream);     /* text on dark surfaces                 */
  --fg-on-clay: var(--cream);     /* text on clay (CTA)                    */
  --fg-link:    var(--clay);
  --fg-link-hover: var(--clay-deep);

  /* ── COLOR · SURFACE (semantic) ────────────────────────────────────── */
  --bg-page:       var(--bone);  /* Bible v2 §07.01 Option B (Bone-dominant) — joint pick 2026-05-06 */
  --bg-card:       #FFFFFF;
  --bg-callout:    var(--bone);
  --bg-hero-dark:  var(--ink);
  --bg-tint-clay:  rgba(196, 74, 26, 0.06);
  --bg-tint-bush:  rgba(61, 90, 61, 0.06);

  /* ── COLOR · BORDER ────────────────────────────────────────────────── */
  --border-default: var(--rule);
  --border-strong:  var(--neutral-400);
  --border-accent:  var(--clay);

  /* ── TYPE · FAMILIES ───────────────────────────────────────────────── */
  --font-display: "Anton", Impact, "Helvetica Neue Condensed", sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-marker:  "Permanent Marker", "Caveat", cursive;

  /* ── TYPE · SCALE (12 steps, mobile-first) ─────────────────────────── */
  --fs-hero:    clamp(2.4rem, 6vw, 4.6rem);   /* hero · Anton              */
  --fs-display: clamp(2rem, 4.5vw, 3.2rem);   /* page H1 · Anton           */
  --fs-h1:      clamp(1.8rem, 3.6vw, 2.4rem); /* H1 · Anton                */
  --fs-h2:      clamp(1.4rem, 3vw, 1.8rem);   /* H2 · Anton                */
  --fs-h3:      1.05rem;                      /* H3 · Anton                */
  --fs-h4:      0.85rem;                      /* H4 · Anton, all caps      */
  --fs-lead:    1.05rem;                      /* lead body                 */
  --fs-body:    1rem;                         /* body                      */
  --fs-small:   0.92rem;                      /* small / UI                */
  --fs-meta:    0.85rem;                      /* meta · Space Mono         */
  --fs-micro:   0.72rem;                      /* labels / pills · Mono     */
  --fs-marker:  1.4rem;                       /* hand-notes                */

  /* ── TYPE · WEIGHTS ────────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;

  /* ── TYPE · LINE-HEIGHT ────────────────────────────────────────────── */
  --lh-tight:   1.05;   /* display                                         */
  --lh-snug:    1.2;    /* H1–H3                                           */
  --lh-normal:  1.55;   /* body                                            */
  --lh-relaxed: 1.7;    /* long-form / story block                         */

  /* ── TYPE · TRACKING ───────────────────────────────────────────────── */
  --tracking-display: 0.5px;    /* Anton needs a touch                     */
  --tracking-meta:    0.06em;   /* Space Mono labels                       */
  --tracking-micro:   0.12em;   /* tiny all-caps eyebrow labels            */

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

  /* ── RADII ─────────────────────────────────────────────────────────── */
  --radius-input:  4px;
  --radius-pill:   999px;
  --radius-button: 10px;
  --radius-card:   12px;
  --radius-hero:   16px;

  /* ── ELEVATION (two-step only) ─────────────────────────────────────── */
  --shadow-surface: 0 1px 0 rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08);
  --shadow-lift:    0 2px 0 rgba(0,0,0,0.06), 0 14px 40px rgba(0,0,0,0.10);

  /* ── MOTION ────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --dur-quick:  120ms;
  --dur-base:   180ms;
  --dur-slow:   220ms;

  /* ── LAYOUT ────────────────────────────────────────────────────────── */
  --container-narrow: 720px;
  --container:        1180px;
  --container-wide:   1400px;
  --side-pad:         5vw;
}

/* ──────────────────────────────────────────────────────────────────────
   SEMANTIC TYPE — apply via class or extend on element selectors
   ────────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--fw-regular) var(--fs-body)/var(--lh-normal) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bible v2 NO ALL CAPS correction (2026-05-06) — display headings render mixed-case in customer copy.
   ALL CAPS reserved for .eyebrow / .mono-label / .tag classes only. Anton retained as display weight. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0 0 0.4em;
  color: var(--fg-1);
}
h1, .h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); color: var(--clay); letter-spacing: var(--tracking-micro); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lead    { font-size: var(--fs-lead); color: var(--fg-2); max-width: 75ch; }
.body    { font-size: var(--fs-body); color: var(--fg-1); }
.small   { font-size: var(--fs-small); color: var(--fg-2); }
.meta    {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-3);
  letter-spacing: var(--tracking-meta);
}

code, .mono, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-input);
}

.handnote {
  font-family: var(--font-marker);
  font-size: var(--fs-marker);
  color: var(--clay);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* Wordmark accent — the "fai" moment */
.brand-mark em.fai,
.brand em.fai {
  color: var(--clay);
  font-style: normal;
}

/* ──────────────────────────────────────────────────────────────────────
   MOTION — reduced-motion contract
   ────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}