/* thermal-insulation-contractor · design tokens.
 * Every colour, font, space, size, radius and easing in site.css comes from here.
 * The two brand colours come from the manifest fields brand_primary / brand_accent
 * (assets/uphex-fields.css, generated by the compiler); the fallbacks are the original values. */
:root {
  /* paper and ink (snow paper, cool ink: never pure white or pure black) */
  --c-paper: oklch(97.2% 0.005 235);
  --c-paper-2: oklch(94.2% 0.008 235);
  --c-paper-3: oklch(90.5% 0.01 235);
  --c-paper-glass: oklch(97.2% 0.005 235 / 0.82);
  --c-ink: oklch(19% 0.014 255);
  --c-ink-2: oklch(38% 0.016 255);
  --c-ink-3: oklch(48% 0.014 255);
  --c-rule: oklch(86% 0.01 240);
  --c-rule-strong: oklch(72% 0.012 245);

  /* the one loud accent: the brand red (field brand_primary), used as heat and as the action colour */
  --c-heat: var(--uphex-field-brand_primary, oklch(54% 0.215 27));
  --c-heat-hover: color-mix(in oklch, var(--c-heat), black 12%);
  --c-on-heat: oklch(98.5% 0.004 27);
  --c-error: oklch(50% 0.2 27);
  --c-error-bg: oklch(95.5% 0.025 27);

  /* sealed state: the colour of the client's real foam (field brand_accent); shades are mixed from it */
  --c-foam: var(--uphex-field-brand_accent, oklch(80% 0.085 192));
  --c-foam-edge: color-mix(in oklch, var(--c-foam), black 14%);
  --c-foam-cell: color-mix(in oklch, var(--c-foam), white 30%);
  --c-foam-ink: color-mix(in oklch, var(--c-foam), black 47%);

  /* night bands */
  --c-night: oklch(17% 0.022 255);
  --c-night-2: oklch(23% 0.024 255);
  --c-night-overlay: oklch(15% 0.022 255 / 0.74);
  --c-on-night: oklch(96% 0.006 235);
  --c-on-night-2: oklch(78% 0.012 240);
  --c-on-night-dim: oklch(96% 0.006 235 / 0.3);

  /* illustration palette (thermal, posterised: flat bands, no gradients) */
  --c-art-bg: oklch(16% 0.02 255);
  --c-heat-1: oklch(86% 0.16 85);
  --c-heat-2: oklch(70% 0.19 45);
  --c-heat-3: oklch(52% 0.2 25);
  --c-iron-0: oklch(25% 0.09 285);
  --c-iron-1: oklch(40% 0.17 330);
  --c-iron-2: oklch(56% 0.21 25);
  --c-iron-3: oklch(72% 0.18 50);
  --c-iron-4: oklch(90% 0.15 92);
  --c-gap: oklch(9% 0.012 255);
  --c-wood: oklch(76% 0.07 72);
  --c-wood-edge: oklch(56% 0.06 62);
  --c-draft: oklch(90% 0.06 220);
  --c-batt: oklch(62% 0.01 250);
  --c-snow: oklch(95% 0.008 235);
  --c-soil: oklch(32% 0.035 60);
  --c-soil-2: oklch(40% 0.04 60);
  --c-soil-light: oklch(80% 0.03 70);
  --c-concrete: oklch(74% 0.008 250);
  --c-concrete-edge: oklch(58% 0.01 250);
  --c-water: oklch(70% 0.09 230);

  --c-focus: oklch(50% 0.17 255);
  --c-focus-on-night: oklch(84% 0.1 225);

  /* type: system fonts only (managed funnels allow no web fonts). Display = a condensed grotesque
   * (Helvetica Neue Condensed on Apple, Arial Narrow or Bahnschrift Condensed on Windows, Roboto
   * Condensed on Android) standing in for Archivo at 72% width; body = the system UI sans; readouts =
   * the system mono standing in for Geist Mono. */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Helvetica Neue", "Arial Narrow", Bahnschrift, "Roboto Condensed", "sans-serif-condensed", system-ui, sans-serif;
  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  --stretch-display: condensed;
  --stretch-body: 100%;

  /* Tailwind type scale, size + paired line height */
  --t-xs: 12px; --lh-xs: 16px;
  --t-sm: 14px; --lh-sm: 20px;
  --t-base: 16px; --lh-base: 24px;
  --t-lg: 18px; --lh-lg: 28px;
  --t-xl: 20px; --lh-xl: 28px;
  --t-2xl: 24px; --lh-2xl: 32px;
  --t-3xl: 30px; --lh-3xl: 36px;
  --t-4xl: 36px; --lh-4xl: 40px;
  --t-5xl: 48px;
  --t-6xl: 60px;
  --t-7xl: 72px;
  --lh-tight: 1;

  /* spacing (landing-page-design B2 only) */
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px;
  --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px; --s-800: 80px; --s-900: 96px;

  /* radius (Tailwind steps) */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 500ms;
  --dur-short: 300ms;
  --dur-reveal: 700ms;

  /* layers */
  --z-base: 1; --z-raised: 2; --z-sticky: 30; --z-nav: 40; --z-skip: 50;

  --wrap: 1440px;
}