/* Metric-matched fallback so the swap to Inter doesn't shift layout (CLS) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* ==========================================================================
   Crestmont Services LLC — Design tokens
   All colour, type, spacing, motion and layout values live here.
   ========================================================================== */

:root {
  /* ---- Colour: core palette ------------------------------------------- */
  --c-ink: #0b191b;          /* Crestmont deep teal-black (from brand)      */
  --c-ink-2: #14282b;        /* Raised dark panel (from brand)              */
  --c-ink-3: #25474a;        /* Brand teal — tertiary dark / accents        */
  --c-charcoal: #1b2a2c;     /* Deep teal charcoal — text on light          */
  --c-paper: #f5f1e8;        /* Warm cream — primary light surface (brand)  */
  --c-paper-2: #ebe5d7;      /* Recessed light surface                      */
  --c-white: #ffffff;
  --c-slate: #5a6b6b;        /* Muted text on light (4.97:1 on cream)       */
  --c-slate-light: #9fb2b1;  /* Muted text on dark (8.1:1 on ink)          */

  /* Accent — Crestmont gold (sampled from brand #cdb175).
     Gold is used as a surface/fill and as text on dark only.
     "strong" is the bronze used for gold-family text on light (5.5:1). */
  --c-accent: #cdb175;
  --c-accent-strong: #7a5c22;
  --c-accent-soft: #d9c08a;
  --c-accent-wash: rgba(205, 177, 117, 0.18);
  --c-teal: #25474a;
  --c-teal-soft: #8fb3ae;

  --c-success: #1e7a52;
  --c-error: #c0362c;
  --c-error-dark: #ff8a80;
  --c-warning-bg: #fff4d6;
  --c-warning-ink: #6b4a00;
  --c-warning-line: #e8c56a;

  /* ---- Colour: semantic (light theme defaults) ------------------------ */
  --bg: var(--c-paper);
  --fg: var(--c-charcoal);
  --fg-muted: var(--c-slate);
  --line: rgba(27, 42, 44, 0.12);
  --line-strong: rgba(27, 42, 44, 0.24);
  --link: var(--c-accent-strong);
  --focus: var(--c-accent-strong);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", "Inter Display", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Inter Display", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "DejaVu Sans Mono", monospace;

  /* Fluid type scale (320px → 1440px) */
  --fs-mega: clamp(2.75rem, 1.2rem + 7.6vw, 8.25rem);
  --fs-display: clamp(2.5rem, 1.35rem + 5.4vw, 6.25rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.9vw, 4.75rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 2.8vw, 3.75rem);
  --fs-h3: clamp(1.4rem, 1.15rem + 1.1vw, 2.125rem);
  --fs-h4: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-h5: 1.0625rem;
  --fs-h6: 0.9375rem;
  --fs-lead: clamp(1.125rem, 1.03rem + 0.45vw, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --lh-tight: 0.98;
  --lh-heading: 1.06;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-display: -0.045em;
  --ls-heading: -0.03em;
  --ls-tight: -0.015em;
  --ls-eyebrow: 0.12em;

  /* ---- Spacing (4/8 based, fluid section rhythm) ----------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(2.5rem, 2.5rem + 2vw, 11rem);
  --sp-section-sm: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout ---------------------------------------------------------- */
  --container: 1440px;
  --container-narrow: 960px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --grid-gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 76px;

  /* ---- Shape & depth --------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 25, 27, 0.06), 0 2px 8px rgba(11, 25, 27, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 25, 27, 0.08), 0 2px 6px rgba(11, 25, 27, 0.05);
  --shadow-lg: 0 30px 80px rgba(11, 25, 27, 0.18), 0 8px 24px rgba(11, 25, 27, 0.08);

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-xslow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo-out */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Breakpoints (reference only — CSS vars can't drive @media) ------
     --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;     */

  --z-header: 50;
  --z-menu: 60;
  --z-cursor: 90;
  --z-transition: 100;
}

/* Dark surface theme — applied to sections with .theme-dark */
.theme-dark {
  --bg: var(--c-ink);
  --fg: #eef2ef;
  --fg-muted: var(--c-slate-light);
  --line: rgba(238, 242, 239, 0.12);
  --line-strong: rgba(238, 242, 239, 0.26);
  --link: var(--c-accent-soft);
  --focus: var(--c-accent-soft);
}