/* ══════════════════════════════════════════════════════════════════
   CAIRN ADVISORY — DESIGN TOKENS
   The single source of truth for color, type, spacing, and motion.
   Mirror the brand book exactly. Do not invent new values.
══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  /* ── COLOR ──────────────────────────────────────────────────────
     Pulled directly from the mark — cool slate of river stones,
     warm amber of sandstone, deep ironwood of shadow. */

  /* Darks */
  --cairn-obsidian:    #0E0B07;  /* deepest shadow */
  --cairn-ironwood:    #2C1E10;  /* primary text · headings */
  --cairn-dark-bg:     #1E1C17;  /* dark sections · cover */

  /* Slates (cool accents) */
  --cairn-slate:       #6B8A9A;  /* accent · ADVISORY label */
  --cairn-slate-lt:    #8B9EA8;  /* secondary text · subtext */

  /* Warms */
  --cairn-amber:       #C4A87A;  /* rules · warm accents (sandstone) */
  --cairn-umber:       #8B6A48;  /* body text on light · captions */
  --cairn-parchment:   #E8D8B8;  /* reversed type on dark */

  /* Surfaces */
  --cairn-linen:       #F8F5F0;  /* primary background */
  --cairn-white:       #FDFAF6;  /* card surface (warm white) */

  /* Functional aliases — use these in components */
  --color-bg:           var(--cairn-linen);
  --color-bg-card:      var(--cairn-white);
  --color-bg-dark:      var(--cairn-dark-bg);

  --color-text:         var(--cairn-ironwood);
  --color-text-muted:   var(--cairn-umber);
  --color-text-subtle:  var(--cairn-slate-lt);
  --color-text-onDark:  var(--cairn-parchment);

  --color-rule:         #D8C8A8;          /* the canonical hairline */
  --color-rule-dark:    #2A2018;
  --color-accent:       var(--cairn-amber);
  --color-accent-cool:  var(--cairn-slate);

  /* States — earned, not loud */
  --color-positive:     #6A9A70;
  --color-negative:     #C47A7A;

  /* ── TYPOGRAPHY ─────────────────────────────────────────────────
     Figtree for display & logo work — Swiss grotesque neutrality.
     DM Sans for body — warm and legible at small sizes. */
  --font-display: 'Figtree', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Display weights — CAIRN is ALWAYS Figtree 300. Never heavier. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Type scale (px) */
  --fs-display:    96px;  /* hero headline (clamp recommended) */
  --fs-h1:         64px;
  --fs-h2:         42px;  /* section pull-quotes */
  --fs-h3:         28px;  /* card titles */
  --fs-h4:         20px;
  --fs-body-lg:    19px;  /* hero subhead */
  --fs-body:       17px;  /* default */
  --fs-body-sm:    15px;
  --fs-caption:    13px;
  --fs-label:      12px;  /* uppercase labels — 12px floor */
  --fs-eyebrow:    13px;  /* uppercase eyebrows — primary nav cue */

  /* Line heights */
  --lh-tight:   1.04;   /* hero */
  --lh-snug:    1.3;    /* card titles */
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;
  --lh-loose:   1.85;   /* body */

  /* Letter spacing */
  --ls-display:  -0.02em;  /* hero — tighten heavily */
  --ls-h:        -0.01em;
  --ls-normal:   0;
  --ls-eyebrow:  0.22em;   /* hero eyebrow */
  --ls-label:    0.14em;   /* nav, button, label */
  --ls-tag:      0.24em;   /* section eyebrows */
  --ls-credential: 0.14em;

  /* ── SPACING ────────────────────────────────────────────────────
     8-point base. Use generous vertical rhythm — Cairn whispers. */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-9:   40px;
  --sp-10:  48px;
  --sp-12:  64px;
  --sp-14:  80px;
  --sp-16:  96px;     /* section side padding */
  --sp-18:  120px;    /* section vertical padding */

  /* Page rhythm */
  --section-py:   120px;
  --section-px:   96px;
  --section-px-mobile: 32px;

  /* ── RADIUS ────────────────────────────────────────────────────
     Soft, never sharp. Never pill. */
  --r-sm:   3px;    /* buttons */
  --r-md:   8px;    /* email mock, business card */
  --r-lg:   12px;   /* stat & color cards */
  --r-xl:   14px;   /* primary cards & containers */

  /* ── BORDERS ───────────────────────────────────────────────────
     Hairlines — 0.5px is the canonical Cairn rule weight. */
  --border-hair:        0.5px solid var(--color-rule);
  --border-hair-dark:   0.5px solid var(--color-rule-dark);
  --border-hair-amber:  0.5px solid var(--cairn-amber);

  /* ── SHADOWS ───────────────────────────────────────────────────
     Used sparingly, only for elevation cues on print-like surfaces. */
  --shadow-card:    0 4px 20px rgba(44,30,16,0.07);
  --shadow-elevated:0 6px 24px rgba(44,30,16,0.12);
  --shadow-deep:    0 8px 32px rgba(44,30,16,0.18);

  /* ── MOTION ────────────────────────────────────────────────────
     Quiet confidence. No bouncy transitions. */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    400ms;

  /* ── LAYOUT ────────────────────────────────────────────────────*/
  --content-max:   1200px;
  --measure:       640px;     /* prose width — never wider */

  /* ── WATERCOLOR ────────────────────────────────────────────────
     The mark's pigments, abstracted into reusable accent paints.
     Always at low opacity. Always companion, never headline. */
  --wc-slate-rgb:    107, 138, 154;   /* the cool stones */
  --wc-amber-rgb:    196, 168, 122;   /* the warm sandstone */
  --wc-sienna-rgb:   140, 88, 56;     /* deepest warm */

  /* Opacity stops — do not exceed 0.20 in body content. */
  --wc-whisper:      0.06;            /* texture overlays */
  --wc-subtle:       0.12;            /* default for accents */
  --wc-confident:    0.20;            /* signoffs, drop caps */

  /* Canonical wash gradients — use as background-image. */
  --wc-wash-amber:   radial-gradient(ellipse at 30% 40%, rgba(var(--wc-amber-rgb), 0.32), transparent 60%);
  --wc-wash-slate:   radial-gradient(ellipse at 70% 60%, rgba(var(--wc-slate-rgb), 0.26), transparent 65%);
  --wc-wash-mixed:   radial-gradient(ellipse at 25% 35%, rgba(var(--wc-amber-rgb), 0.28), transparent 55%),
                     radial-gradient(ellipse at 75% 70%, rgba(var(--wc-slate-rgb), 0.22), transparent 60%);
}

/* Base reset for using the system */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.cairn {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}