/* Offstack — graphic light, vermillion accent */
:root,
html {
  color-scheme: light;
  --flow-bg: #eceef2;
  --flow-surface: #fbfbfc;
  --flow-surface-2: #e6e8ee;
  --flow-accent: #e12d1c;
  --flow-accent-2: #e12d1c;
  --flow-accent-3: #e12d1c;
  --flow-accent-4: #e12d1c;
  --flow-orb-1: transparent;
  --flow-orb-2: transparent;
  --flow-orb-3: transparent;
  --flow-hero-1: #e12d1c;
  --flow-hero-2: #e12d1c;

  --tone-mint: #e12d1c;
  --tone-sky: #e12d1c;
  --tone-coral: #e12d1c;

  --bg: var(--flow-bg);
  --surface: var(--flow-surface);
  --surface-2: var(--flow-surface-2);
  --surface-3: #ffffff;
  --border: #d0d3dc;
  --text: #12141a;
  --muted: #5c6170;
  --accent: var(--flow-accent);
  --accent-hover: #c42416;
  --accent-2: var(--flow-accent);
  --accent-3: var(--flow-accent);
  --accent-dim: color-mix(in srgb, var(--flow-accent) 14%, transparent);
  --glow: transparent;
  --btn-on-accent: #fff7f5;
  --header-bg: color-mix(in srgb, var(--flow-bg) 88%, transparent);
  --nav-mobile-bg: #eceef2;
  --backdrop: rgb(18 20 26 / 0.45);
  --grid-line: transparent;
  --orb-1: transparent;
  --orb-2: transparent;
  --orb-3: transparent;
  --sheen: transparent;
  --shadow-panel: rgb(18 20 26 / 0.04);
  --shadow-card: rgb(18 20 26 / 0.08);
  --ghost-bg: color-mix(in srgb, var(--flow-accent) 8%, transparent);
  --hover-tab: color-mix(in srgb, var(--flow-accent) 8%, transparent);
  --deploy-cloud-border: #d0d3dc;
  --deploy-local-border: color-mix(in srgb, var(--flow-accent) 40%, #d0d3dc);
  --deploy-cloud-glow: transparent;
  --deploy-local-glow: transparent;
  --form-ring-1: color-mix(in srgb, var(--flow-accent) 40%, transparent);
  --form-ring-2: color-mix(in srgb, var(--flow-accent) 18%, transparent);
  --hero-radial-1: transparent;
  --hero-radial-2: transparent;
  --ink-panel: #14161c;
  --ink-muted: #a8abb6;
}

[data-theme="dark"] {
  color-scheme: dark;
  --flow-bg: #12141a;
  --flow-surface: #1a1c24;
  --flow-surface-2: #22252e;
  --flow-accent: #ff5a45;
  --text: #f2f0ea;
  --muted: #9aa0ae;
  --border: #2c303a;
  --bg: var(--flow-bg);
  --surface: var(--flow-surface);
  --surface-2: var(--flow-surface-2);
  --surface-3: #101218;
  --btn-on-accent: #1a0a08;
  --header-bg: color-mix(in srgb, var(--flow-bg) 88%, transparent);
  --nav-mobile-bg: #12141a;
  --ink-panel: #0e1014;
  --ink-muted: #9aa0ae;
  --accent: var(--flow-accent);
  --accent-dim: color-mix(in srgb, var(--flow-accent) 16%, transparent);
}