/* Lurion — Retool-grade tokens (charcoal dark default) */

:root,
.dark {
  color-scheme: dark;

  --bg-a: #151515;
  --bg-b: #151514;
  --bg-c: #141515;
  --bg-d: #151415;

  --page-bg: var(--bg-a);
  --surface-1: var(--bg-b);
  --surface-2: var(--bg-c);
  --surface-3: var(--bg-d);
  --surface-elevated: #181818;
  --surface-inset: var(--bg-c);
  --phone-screen-bg: var(--bg-c);

  --text-primary: #f0efe8;
  --text-front: #eaebdf;
  --text-secondary: #9a9a94;
  --text-tertiary: #6a6a64;
  --text-muted: #52524e;

  --accent: #6b8afd;
  --accent-light: #9cb4ff;
  --accent-dark: #4f6fe8;
  --accent-soft: rgba(107, 138, 253, 0.1);
  --accent-glow: rgba(107, 138, 253, 0.16);
  --accent-border: rgba(107, 138, 253, 0.32);

  --warm: #e8845a;
  --warm-soft: rgba(232, 132, 90, 0.1);
  --warm-glow: rgba(232, 132, 90, 0.12);
  --warm-border: rgba(232, 132, 90, 0.38);

  --burgundy: #660033;
  --magenta: #e0309a;
  --burgundy-text: #df4f97;
  --burgundy-ring: rgba(224, 48, 154, 0.2);

  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.08);

  --green: #4ade80;
  --red: #f87171;
  --threat-surface: rgba(248, 113, 113, 0.08);
  --threat-border: rgba(248, 113, 113, 0.18);

  --edge: rgba(255, 255, 255, 0.08);
  --edge-hover: rgba(255, 255, 255, 0.13);
  --edge-strong: rgba(255, 255, 255, 0.18);

  --shadow-card: none;
  --shadow-float: 0 24px 64px -32px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 80px -24px var(--accent-glow);

  --btn-primary-bg: #ececea;
  --btn-primary-text: #151515;
  --btn-primary-hover: #f5f5f3;
  --btn-secondary-border: rgba(255, 255, 255, 0.2);
  --btn-secondary-text: #f0efe8;

  --nav-bg: rgba(21, 21, 21, 0.84);
  --nav-border: rgba(255, 255, 255, 0.06);
  --dropdown-bg: #181818;
  --dropdown-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);

  --card-sheen: none;
  --card-hairline: rgba(255, 255, 255, 0.06);
  --scroll-step-active: rgba(255, 255, 255, 0.02);

  --tier-business: #5c5c58;
  --tier-pro: #8a6068;
  --tier-enterprise: #506080;

  /* Marquee demo (wave canvas + phone UI) */
  --accent-rgb: 107, 138, 253;
  --accent-2-rgb: 232, 132, 90;
  --ink-rgb: 234, 235, 223;
  --white-rgb: 255, 255, 255;
  --danger-rgb: 248, 113, 113;
  --mint-rgb: 74, 222, 128;
  --gold-rgb: 251, 191, 36;
  --orange-rgb: 251, 146, 60;
  --demo-mint: #4ade80;
  --demo-gold: #fbbf24;
  --demo-orange: #fb923c;
  --demo-danger: #f87171;
  --demo-safe: var(--green);
  --demo-caution: var(--demo-gold);
  --demo-warn: var(--red);
  --hero-phone-glow-low: 124, 58, 237;
  --hero-phone-glow-high: 34, 211, 238;

  /*
   * Hero marquee phone — fixed 1:1 dimensions across all viewports.
   * Do not use vw/%/clamp/min() on .demo-phone or .demo-phone-screen.
   */
  --hero-phone-bezel: 7px;
  --hero-phone-screen-width: 328px;
  --hero-phone-screen-height: 640px;
  --hero-phone-outer-width: calc(var(--hero-phone-screen-width) + var(--hero-phone-bezel) * 2);
  --hero-phone-outer-height: calc(var(--hero-phone-screen-height) + var(--hero-phone-bezel) * 2);
  --hero-phone-marquee-min-height: calc(var(--hero-phone-outer-height) + 72px);

  /* Hero product stage — light island on dark atmosphere */
  --hero-stage-surface: #f7f6f1;
  --hero-stage-surface-soft: #f0efe8;
  --hero-stage-edge: rgba(20, 20, 20, 0.09);
  --hero-stage-shadow: 0 28px 72px rgba(0, 0, 0, 0.32);
  --hero-phone-ui-bg: #f4f3ee;
  --hero-phone-ui-ink: #141414;
  --hero-phone-ui-muted: #6a6a64;
  --hero-phone-ui-soft: #8a8a84;
  --hero-phone-ui-line: rgba(20, 20, 20, 0.08);
  --hero-phone-ui-threat-bg: rgba(248, 113, 113, 0.09);
  --hero-phone-ui-threat-border: rgba(248, 113, 113, 0.24);
  --hero-phone-ui-score-track: #e3e1d9;

  --demo-track: rgba(255, 255, 255, 0.08);
  --demo-phone-bg: #f4f3ee;
  --demo-phone-ink: #141414;
  --demo-phone-muted: #6a6a64;
  --demo-phone-soft: #8a8a84;
  --demo-phone-line: rgba(20, 20, 20, 0.08);
  --demo-bezel-1: #1a1a1a;
  --demo-bezel-2: #2a2a2a;
  --demo-bezel-3: #3a3a3a;
  --demo-bezel-4: #4a4a4a;

  /* Platform bento — per-slot Higgsfield atmosphere (RGB triplets for overlays + generation brief) */
  --slot-assist-glow: 74, 222, 128;
  --slot-runtime-glow: 124, 58, 237;
  --slot-console-glow: 232, 132, 90;
  --slot-cyan-glow: 34, 211, 238;
  --slot-violet-glow: 167, 139, 250;
  --slot-gold-glow: 251, 191, 36;
}

.light {
  color-scheme: light;

  --page-bg: #f0efe8;
  --surface-1: #f7f6f1;
  --surface-2: #eceae3;
  --surface-3: #e3e1d9;
  --surface-elevated: #faf9f5;
  --surface-inset: #e8e6df;
  --phone-screen-bg: #fafafa;

  --text-primary: #141414;
  --text-front: #5c5c58;
  --text-secondary: #5c5c58;
  --text-tertiary: #8a8a84;
  --text-muted: #b0b0a8;

  --accent: #4f6fe8;
  --accent-light: #6b8afd;
  --accent-dark: #3d57c4;
  --accent-soft: rgba(79, 111, 232, 0.08);
  --accent-glow: rgba(79, 111, 232, 0.12);
  --accent-border: rgba(79, 111, 232, 0.28);

  --warm: #d96f42;
  --warm-soft: rgba(217, 111, 66, 0.1);
  --warm-glow: rgba(217, 111, 66, 0.14);
  --warm-border: rgba(217, 111, 66, 0.38);

  --burgundy: #660033;
  --magenta: #d6359b;
  --burgundy-text: #8a1f57;
  --burgundy-ring: rgba(102, 0, 51, 0.16);

  --edge: rgba(20, 20, 20, 0.08);
  --edge-hover: rgba(20, 20, 20, 0.14);
  --edge-strong: rgba(20, 20, 20, 0.18);

  --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow-float: 0 24px 64px -32px rgba(20, 20, 20, 0.12);

  --btn-primary-bg: #141414;
  --btn-primary-text: #faf9f5;
  --btn-primary-hover: #2a2a2a;
  --btn-secondary-border: rgba(20, 20, 20, 0.18);
  --btn-secondary-text: #141414;

  --nav-bg: rgba(240, 239, 232, 0.82);
  --nav-border: rgba(20, 20, 20, 0.06);
  --dropdown-bg: #faf9f5;
  --dropdown-shadow: 0 20px 50px rgba(20, 20, 20, 0.08);

  --scroll-step-active: rgba(20, 20, 20, 0.02);

  --tier-business: #d4d4ce;
  --tier-pro: #f0c8cc;
  --tier-enterprise: #d0d8f0;
}

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-med: 320ms;

  --max-width: 1120px;
  --platform-bento-max: 1160px;
  --nav-height: 56px;

  --text-display: clamp(2rem, 4.2vw, 3.125rem);
  --text-h2: clamp(1.375rem, 2.2vw, 1.75rem);
  --text-h3: 1.0625rem;
  --text-lead: 1rem;
  --text-body: 0.9375rem;
  --text-sm: 0.8125rem;
  --text-xs: 0.75rem;
  --text-micro: 0.6875rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
}