/* =========================================================
   Streamline · Kinetic Editorial design tokens
   Re-skin the site by editing this file + content/site.js
   ========================================================= */

/* ---------- Fonts (self-hosted, latin subset) ----------
   Brand type (Streamline, 2026-10-21): Montserrat Bold for H1s, SemiBold for all other titles, Regular for text.
   Built from the brand TTFs with pyftsubset (latin, woff2). */
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback to limit layout shift while the fonts load */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"); size-adjust: 113.4%; ascent-override: 85.4%; descent-override: 22.2%; line-gap-override: 0%; }

:root {
  /* ---------- Brand palette (measured from live streamlinevrs.com, Sept 2026) ----------
     Orange #f79520 is Inhabit IQ's signature color: it stays inside the logo files only. */
  --brand: #0f3c52;          /* Streamline navy: headings, dark sections */
  --brand-logo: #15445a;     /* logo navy */
  --brand-2: #0b79b3;        /* Streamline blue: secondary buttons, focus */
  --blue-ink: #20607f;       /* blue links / CTA band */
  --accent: #8cc540;         /* Streamline green: highlights, icons, glows */
  --green-ink: #477901;      /* green as text on white (nav links on the live site) */
  --cta: #f79520;            /* "Get a Demo" / "Book a Call" orange (brand orange, from 2026-10-21) */
  --cta-hover: #e07f0c;
  --on-cta: #ffffff;         /* 2.3:1 on #f79520 (below WCAG AA's 4.5:1) */

  /* OKLCH-derived scales */
  --brand-50:  oklch(96% 0.012 230);
  --brand-100: oklch(91% 0.025 230);
  --brand-300: oklch(70% 0.06 230);
  --brand-500: oklch(45% 0.075 230);
  --brand-700: oklch(34% 0.065 230);
  --brand-900: oklch(18% 0.035 230);
  --brand-950: oklch(13% 0.025 230);
  --accent-100: oklch(95% 0.05 128);
  --accent-300: oklch(86% 0.12 128);
  --accent-500: oklch(76% 0.16 128);
  --accent-700: oklch(52% 0.14 128);

  /* ---------- Semantic roles: light (default) ---------- */
  --paper: #ffffff;
  --paper-2: #f1f5f9;        /* live site's alternating slate sections */
  --ink: #0f3c52;            /* Streamline navy        11.6:1 on white */
  --ink-muted: #444444;      /* live site body copy     9.7:1 */
  --line: rgb(15 60 82 / .12);
  --surface-glass: color-mix(in oklch, var(--paper) 68%, transparent);
  --glass-border: rgb(15 60 82 / .08);
  --accent-ink: #477901;     /* green as text on light  5.3:1 */
  --glow: rgb(140 197 64 / .45);
  --on-accent: #0f3c52;      /* navy on green 5.7:1 */
  --scrim: rgb(8 34 47 / .6);

  /* ---------- Type ---------- */
  /* One brand family; the four roles are kept so each can be re-pointed later */
  --font-display: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-body: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;
  --font-serif: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;   /* accent role (was a serif) */
  --font-label: "Montserrat", "Montserrat Fallback", system-ui, sans-serif;   /* small labels, nav, tags, footer titles */
  --display-stretch: 100%;   /* Montserrat has no width axis */
  --display-weight: 600;     /* SemiBold: every title but the H1 */
  --h1-weight: 700;          /* Bold: H1s */
  --display-track: -0.02em;

  --fs-mega: clamp(3.5rem, 12vw, 13rem);
  --fs-h1: clamp(3rem, 8vw, 8.5rem);
  --fs-h2: clamp(2.25rem, 5.5vw, 5.5rem);
  --fs-h3: clamp(1.5rem, 2.6vw, 2.5rem);
  --fs-lead: clamp(1.25rem, 1.8vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---------- Layout ---------- */
  --max: clamp(1440px, 80vw, 1680px);   /* widens on very large screens */
  --pad: clamp(16px, 4vw, 56px);
  --gutter: 24px;
  --section-y: clamp(96px, 14vh, 200px);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* ---------- Shape ---------- */
  --r-chip: 4px;
  --r-card: 12px;
  --r-media: 24px;
  --r-pill: 999px;
  --shadow-long: 0 30px 60px -30px rgb(15 60 82 / .28);

  /* ---------- Motion ---------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --d-micro: 160ms;
  --d-hover: 300ms;
  --d-ui: 450ms;
  --d-reveal: 900ms;
  --d-page: 700ms;
}

/* ---------- Dark role flip (sections, nav, cards) ---------- */
[data-theme="dark"] {
  --paper: #0f3c52;          /* Streamline navy (live site's dark sections) */
  --paper-2: #0b3144;
  --ink: #ffffff;            /* 11.6:1 */
  --ink-muted: #b9cfdb;      /*  7.1:1 */
  --line: rgb(255 255 255 / .14);
  --surface-glass: color-mix(in oklch, #0f3c52 55%, transparent);
  --glass-border: rgb(255 255 255 / .12);
  --accent-ink: #8cc540;     /*  5.7:1 */
  --glow: rgb(140 197 64 / .45);
}

/* Accent band: white text on Streamline blue */
[data-theme="accent"] {
  --paper: #20607f;
  --paper-2: #0b79b3;
  --ink: #ffffff;            /* 6.9:1 */
  --ink-muted: #dbeaf3;      /* 5.6:1 */
  --line: rgb(255 255 255 / .22);
  --accent-ink: #ffffff;
  --on-accent: #20607f;
}