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

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-normal-300-800.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../assets/fonts/InstrumentSerif-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/SpaceGrotesk-normal-300-700.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks to limit layout shift while fonts load */
@font-face { font-family: "Open Sans Fallback"; src: local("Arial"); size-adjust: 105.5%; ascent-override: 101%; descent-override: 28%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 88%; }
@font-face { font-family: "Label Fallback"; src: local("Arial"); size-adjust: 102%; }

: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: #0a6a9e;       /* 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: #c75000;            /* "Get a Demo" / "Book a Call" burnt orange on the live site */
  --cta-hover: #a84300;
  --on-cta: #ffffff;         /* 4.6: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 ---------- */
  --font-display: "Open Sans", "Open Sans Fallback", system-ui, sans-serif;
  --font-body: "Open Sans", "Open Sans Fallback", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --font-label: "Space Grotesk", "Label Fallback", system-ui, sans-serif;   /* small labels, nav, tags, footer titles */
  --display-stretch: 84%;    /* Open Sans variable width axis: condensed display cut */
  --display-weight: 560;
  --display-track: -0.035em;

  --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: #0a6a9e;
  --paper-2: #0b79b3;
  --ink: #ffffff;            /* 5.9:1 */
  --ink-muted: #dbeaf3;      /* 4.9:1 */
  --line: rgb(255 255 255 / .22);
  --accent-ink: #ffffff;
  --on-accent: #0a6a9e;
}