/* ==========================================================================
   Self-hosted fonts — Crimson Pro (serif) + Kode Mono (monospace)
   ========================================================================== */

@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/CrimsonPro-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Crimson Pro";
  src: url("/fonts/CrimsonPro-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Kode Mono";
  src: url("/fonts/KodeMono-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   ⚙️  DESIGN CONTROL PANEL
   These are the knobs. Change a value here and it updates everywhere it's
   used. This layer overrides the Oat design system's defaults — Oat still
   provides the full --space-1..18 scale, --text-1..8 scale, etc. underneath.
   See DESIGN.md for what each knob drives and how to ask for changes.
   ========================================================================== */

:root {
  /* — Typefaces ————————————————————————————————————————————————————————— */
  --font-sans: "Crimson Pro", Georgia, serif; /* headings + body copy */
  --font-mono: "Kode Mono", ui-monospace, monospace; /* nav, labels, code */

  /* — Heading scale (site-specific; Oat's --text-1..8 is a different ramp).
       Line-heights live in base.css and are unitless, so they scale with
       these automatically — bump a size and the rhythm follows. ——————————— */
  --text-h1: 32px;
  --text-h2: 28px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-h5: 20px;
  --text-h6: 18px;

  /* — Body + small copy ————————————————————————————————————————————————— */
  --text-regular: 18px; /* base paragraph size (Oat reads this name too) */
  --text-small: 14px; /* captions, <small>, fine print */
  --font-semibold: 700;
  --font-bold: 700;

  /* — Vertical rhythm ——————————————————————————————————————————————————— */
  --gap-section: var(--space-10); /* 40px — gap between major page sections */

  /* — Corner radius (Oat components read these; site is a flat 2px) ——————— */
  --radius-small: 2px;
  --radius-medium: 2px;
  --radius-large: 2px;
  --radius-full: 2px;
  /* Form controls are the one place the flat 2px reads as harsh — inputs
     and buttons want a little softness under the cursor. */
  --radius-control: 5px;

  /* — Layout (desktop; overridden per breakpoint in base.css) ———————————— */
  --container-max: 900px;
  --container-pad: 32px;
  --main-pad: 32px; /* horizontal padding on the .main card */

  /* — Hero photo crop (tuned in /lab/photo-crop.html) ————————————————————
     The photo is cropped with `object-fit: cover`. --photo-focus is the point
     of the image that survives every crop: the percentage means "this point of
     the image lands at this point of the box", so anchoring it near the face
     keeps the face in frame at any shape. --photo-aspect is width ÷ height. */
  --photo-focus: 12.9% 6.7%;
  /* Aspect is per breakpoint (overridden in base.css): the shape that suits a
     narrow column beside the text is not the shape that suits a full-width
     banner. This value is the desktop one. */
  --photo-aspect: 1.35;

  /* — Interactive / accent —————————————————————————————————————————————— */
  --primary: var(--blue); /* primary emphasis + focus ring */
  --primary-foreground: var(--text-light);
  --ring: var(--blue);
  /* The warm hover accent for links/nav is --linen (see palette below) —
     change that swatch to re-tint every link and nav hover at once. */

  /* — Motion ———————————————————————————————————————————————————————————— */
  --transition: 200ms cubic-bezier(0.44, 0, 0.56, 1);
  --transition-fast: 120ms cubic-bezier(0.44, 0, 0.56, 1);

  /* — Smoky background (homepage only; read by js/smoke.js) ———————————————
     Tuned in /lab/smoke-background.html. Change a value here and reload —
     the shader reads these on load. Opacity is the main dial: 0 removes the
     smoke entirely, 1 is as strong as the original Framer site. */
  --smoke-base: #fefefe; /* the field the smoke sits on */
  --smoke-color: #d7d8d6; /* the grey of the smoke itself */
  --smoke-opacity: 0.24; /* strength; 0 = off */
  --smoke-scale: 1.3; /* larger = bigger, calmer shapes */
  --smoke-swirl: 0.76;
  --smoke-iterations: 4;
  --smoke-distortion: 0.12;
  --smoke-proportion: 1;
  --smoke-softness: 1;
  --smoke-speed: 15; /* ~42s per cycle; 1 ≈ 10min (the original) */
}

/* ==========================================================================
   🎨  PALETTE — raw swatches (from Figma)
   The actual hues. The semantic layer below points at these; reach for a
   swatch directly only when you need a specific colour.
   ========================================================================== */

:root {
  /* Text */
  --text-light: #f6f6f6;
  --text-dark-active: #242424;
  --text-dark-muted: #8e8e93;

  /* Neutral / borders */
  --border: #bababa;
  --border-light: #ededed;

  /* Background */
  --bg-light: #fefefe;
  --bg-dark: #262626;
  --bg-hover: #f6f6f6;

  /* Accent — --linen is the site's warm hover accent (links + nav) */
  --linen: #7a6751;
  --mint: #7d9184;
  --brown: #915801;
  --blue: #009dff;
  --green: #008a51;
  --orange: #fd8c0c;
  --red: #c7282a;
  --purple: #ad0dfc;

  /* Card variant triads — add --card-4-*, --card-5-*, etc. to extend */
  --card-1-fill: #e9f7f3;
  --card-1-border: #80bdac;
  --card-1-text: #1d5444;
  --card-2-fill: #f0f8fc;
  --card-2-border: #4b7896;
  --card-2-text: #173142;
  --card-3-fill: #fff0f0;
  --card-3-border: #b85858;
  --card-3-text: #c7282a;
}

/* ==========================================================================
   Oat semantic mapping — wires the palette into Oat's component variables.
   Change these to re-skin Oat components; change the palette to shift hues.
   (--primary / --primary-foreground / --ring live in the control panel above.)
   ========================================================================== */

:root {
  --background: var(--bg-light);
  --foreground: var(--text-dark-active);
  --card: var(--bg-hover);
  --card-foreground: var(--text-dark-active);
  --muted: var(--bg-hover);
  --muted-foreground: var(--text-dark-muted);
  --input: var(--border);
  --shadow-small: none;
}