/* Site v2 design tokens: the round 4 homepage (exp_round4_home) look.
   This is the only v2 file allowed to contain colour literals. Light: white
   surfaces, zinc neutrals, one purple, a purple-to-cyan glow under the
   exp_ns2_revamp header (ns2.css). Dark: the same roles on the experiment's
   navy (see "Dark theme" below). .v2-night scopes the few dark plates (artwork
   drawn for dark backgrounds). Text pairs pass WCAG AA in both themes: filled
   buttons use --btn (#814ee8, the header's Sign Up purple) and links
   --accent-ink (#7e45ef, round 4's hover shade; #b9a1ff on navy); #8c54ff
   itself is decoration. */

:root {
  /* Surfaces (zinc) */
  --paper: #ffffff;
  --paper-2: #fafafa;
  --paper-3: #f4f4f5;
  --rule: #e4e4e7;
  --rule-strong: #d4d4d8;
  /* The exp_ns2_revamp pages' flat page colour (behind white cards) */
  --page-tint: #f6f6fb;

  /* Text */
  --ink: #09090b;
  --ink-2: #27272a;
  --muted: #71717a;
  --subtle: #71717a;

  /* Purple */
  --accent: #8c54ff;
  --accent-ink: #7e45ef;
  --accent-hover: #6d3ce0;
  --accent-soft: #f5efff;
  --on-accent: #ffffff;
  --glow-a: #8c54ff;
  --glow-b: #09eaeb;
  /* Along the purple-to-cyan glow: its midpoint (the middle step of purple / blue / cyan colour coding), a
     deeper cyan that white text can sit on, and the two as text colours (both pass AA on white). */
  --glow-mid: color-mix(in srgb, var(--glow-a), var(--glow-b));
  --glow-mid-ink: color-mix(in srgb, var(--glow-mid) 70%, var(--ink));
  --glow-b-deep: color-mix(in srgb, var(--glow-b) 70%, var(--ink));
  --glow-b-ink: color-mix(in srgb, var(--glow-b) 50%, var(--ink));
  /* The page-top glow (base.css .v2-glow): the experiment homepage's pastels (ns2.css --ns2-glow-a / -b, its
     lilac and sky ellipses) rather than the brand purple and cyan, which blurred at 30% read as a heavy purple
     wash; on navy it takes that homepage's indigo-to-blue. */
  --glow-disc: linear-gradient(90deg, #cdc2ff, #bfe0ff);
  --glow-disc-opacity: 0.85;
  --tint: linear-gradient(90deg, rgb(140 84 255 / 0.05), rgb(9 234 235 / 0.05));
  --tint-strong: linear-gradient(
    135deg,
    rgb(140 84 255 / 0.1),
    rgb(9 234 235 / 0.1)
  );

  /* Buttons */
  --btn: #814ee8;
  --btn-hover: #7040d0;
  --on-btn: #ffffff;

  --danger: #dc2626;
  --success: #16a34a;

  --ring: inset 0 0 0 1px var(--rule);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-pop: 0 8px 30px rgb(9 9 11 / 0.09);
  --shadow-float:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --scrim: rgb(9 9 11 / 0.5);
  /* Behind a video before its first frame: dark in both themes. */
  --media-bg: #09090b;
  --logo-filter: grayscale(1);
  --logo-opacity: 0.7;

  /* Type: Inter for headings, body and UI (weights 400/500/600); Geist Mono
     for labels. Fallbacks are metric-matched in _head_assets.html. */
  --font-sans:
    "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", "PingFang SC", "Hiragino Sans", "Noto Sans", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(36px, 4vw, 48px);
  --fs-h1: clamp(34px, 3.4vw, 48px);
  --fs-h2: clamp(26px, 2.5vw, 32px);
  --fs-h3: 18px;
  --fs-h4: 16px;
  --fs-lead: clamp(16px, 1.3vw, 18px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-caption: 13px;
  --fs-label: 12px;

  /* Layout: round 4's 1120px container */
  --max: 1120px;
  --read: 680px;
  --gutter: clamp(20px, 4vw, 32px);
  --col-gap: clamp(16px, 2vw, 24px);
  --section: clamp(56px, 7vw, 96px);
  --header-h: 72px; /* the ns2 header's height: sticky offsets and anchor padding */

  --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;

  /* The old homepage's footer (base.css .v2-old-footer): its text, link and hover colours from general.css. */
  --old-footer-ink: #ffffff;
  --old-footer-muted: #84858a;
  --old-footer-hover: #3391ed;
  /* The old site's top banner (base.css .v2-old-chrome #purple-banner, .v2-mob-banner): its 95% purple as it reads over that site's dark page top. The phone banner takes the same purple instead of the old mobile shell's blue gradient. */
  --old-banner-bg: #7b4bde;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  /* Entrances (base.css Motion): a long, soft settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms;
  --dur-fast: 140ms;

  color-scheme: light;
}

/* In the old site's chrome (base.html v2.old_chrome: the navy pill nav under the purple banner) the purple-to-cyan
   brand gradient becomes purple-to-blue: the cyan, which neither the nav nor the banner carries, gives way to the
   old site's own blue (general.css's link colour, the middle stop of its brand gradient). Purple stays the lead
   (buttons, links, labels, the animations); only --glow-b and the tints drawn from it move, so the headline
   gradients and the mixes follow (a custom property resolves where it is declared, so the mixes are declared
   again here to pick up this --glow-b). The page-top glow is the pastel one above, the same in both chromes.
   Light only, like the chrome. */
.v2-old-chrome {
  --glow-b: #3391ed;
  --glow-mid: color-mix(in srgb, var(--glow-a), var(--glow-b));
  --glow-mid-ink: color-mix(in srgb, var(--glow-mid) 70%, var(--ink));
  --glow-b-deep: color-mix(in srgb, var(--glow-b) 70%, var(--ink));
  --glow-b-ink: color-mix(in srgb, var(--glow-b) 50%, var(--ink));
  --tint: linear-gradient(
    90deg,
    rgb(140 84 255 / 0.05),
    rgb(51 145 237 / 0.05)
  );
  --tint-strong: linear-gradient(
    135deg,
    rgb(140 84 255 / 0.1),
    rgb(51 145 237 / 0.1)
  );
}

/* Dark theme: the exp_ns2_revamp toggle's. The header's theme button (ns2Script) sets
   html[data-ns2-theme] and stores the choice in localStorage 'ns2-theme'; without a stored
   choice the system setting decides, exactly as on the experiment's homepage. The colours are
   ns2.css's dark set (navy #0f0f2e page, #edeef6 text, white-alpha hairlines) mapped onto v2's
   roles; the two blocks below are the same list, one per way of getting there. */
:root[data-ns2-theme="dark"] {
  --paper: #0f0f2e;
  --paper-2: #14153a;
  --paper-3: #1b1c46;
  --rule: #2a2b4c;
  --rule-strong: #3b3c5e;
  --page-tint: #0f0f2e;
  --ink: #edeef6;
  --ink-2: #c9ccdd;
  --muted: #9a9eb8;
  --subtle: #9a9eb8;
  --accent-ink: #b9a1ff;
  --accent-hover: #d2c4ff;
  --accent-soft: #221d52;
  --glow-b-deep: color-mix(in srgb, #09eaeb 70%, #09090b);
  --glow-disc: linear-gradient(90deg, #635bff, #3884ff);
  --glow-disc-opacity: 0.5;
  --tint: linear-gradient(90deg, rgb(140 84 255 / 0.1), rgb(9 234 235 / 0.08));
  --tint-strong: linear-gradient(
    135deg,
    rgb(140 84 255 / 0.2),
    rgb(9 234 235 / 0.14)
  );
  --danger: #f87171;
  --success: #4ade80;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.45);
  --shadow-float:
    0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45);
  --scrim: rgb(5 5 20 / 0.72);
  --logo-filter: grayscale(1) invert(1);
  --logo-opacity: 0.75;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) {
    --paper: #0f0f2e;
    --paper-2: #14153a;
    --paper-3: #1b1c46;
    --rule: #2a2b4c;
    --rule-strong: #3b3c5e;
    --page-tint: #0f0f2e;
    --ink: #edeef6;
    --ink-2: #c9ccdd;
    --muted: #9a9eb8;
    --subtle: #9a9eb8;
    --accent-ink: #b9a1ff;
    --accent-hover: #d2c4ff;
    --accent-soft: #221d52;
    --glow-b-deep: color-mix(in srgb, #09eaeb 70%, #09090b);
    --glow-disc: linear-gradient(90deg, #635bff, #3884ff);
    --glow-disc-opacity: 0.5;
    --tint: linear-gradient(
      90deg,
      rgb(140 84 255 / 0.1),
      rgb(9 234 235 / 0.08)
    );
    --tint-strong: linear-gradient(
      135deg,
      rgb(140 84 255 / 0.2),
      rgb(9 234 235 / 0.14)
    );
    --danger: #f87171;
    --success: #4ade80;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-pop: 0 16px 40px rgb(0 0 0 / 0.45);
    --shadow-float:
      0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    --scrim: rgb(5 5 20 / 0.72);
    --logo-filter: grayscale(1) invert(1);
    --logo-opacity: 0.75;
    color-scheme: dark;
  }
}

/* Dark plates for artwork drawn on dark backgrounds: the header's navy. */
.v2-night {
  --paper: #1d283a;
  --paper-2: #243149;
  --paper-3: #30476c;
  --rule: #3a4a66;
  --rule-strong: #4a5d80;
  --ink: #ffffff;
  --ink-2: #e2e8f0;
  --muted: #cbd5e1;
  --subtle: #cbd5e1;
  --accent-ink: #b9a1ff;
  --logo-filter: grayscale(1) invert(1);
  color-scheme: dark;
}

/* /enterprise platform animations (templates/enterprise/_anim_*.html): the palette they were drawn in,
   kept as is in light. Scoped to the animations; the rest of the page uses the theme above. In dark
   (after this block) the tints turn into navy tints and the text greys into the dark set's. */
.ent-anim {
  --ent-accent-a0: #8c54ff00;
  --ent-accent-a12: #8c54ff1f;
  --ent-accent-a15: #8c54ff26;
  --ent-accent-a18: #8c54ff2e;
  --ent-accent-a20: #8c54ff33;
  --ent-accent-a25: #8c54ff40;
  --ent-accent-a6: #8c54ff10;
  --ent-accent-a9: #8c54ff17;
  --ent-amber-100: #fef3c7;
  --ent-amber-500: #f59e0b;
  --ent-amber-700: #92400e;
  --ent-black-a5: #0000000d;
  --ent-cyan-600: #09b6c9;
  --ent-green-150: #c9ead7;
  --ent-green-400: #4ade80;
  --ent-green-50: #e7f7ee;
  --ent-green-550: #22c55e;
  --ent-green-550-a20: #22c55e33;
  --ent-green-700: #1e7a4c;
  --ent-green-800: #14532d;
  --ent-ink-a12: #09090b1f;
  --ent-ink-a15: #09090b26;
  --ent-ink-a20: #09090b33;
  --ent-ink-a6: #09090b0f;
  --ent-ink-a8: #09090b14;
  --ent-red-500: #e11d48;
  --ent-red-600: #b42318;
  --ent-sky-400: #38bdf8;
  --ent-sky-50: #e0f2fe;
  --ent-sky-500: #0ea5e9;
  --ent-sky-700: #0369a1;
  --ent-violet-100: #f4efff;
  --ent-violet-120: #d9ccfd;
  --ent-violet-150: #c4b5fd;
  --ent-violet-160: #c9b6fd;
  --ent-violet-170: #cbb8fd;
  --ent-violet-200: #b9a2fb;
  --ent-violet-25: #f7f3ff;
  --ent-violet-250: #9f7afc;
  --ent-violet-400: #6a48f5;
  --ent-violet-50: #ebe3ff;
  --ent-violet-60: #ece6fd;
  --ent-violet-80: #f0e9ff;
  --ent-violet-90: #f3eeff;
  --ent-zinc-25: #fcfcfd;
  --ent-zinc-350: #a1a1aa;
  --ent-zinc-50: #ececf0;
  --ent-zinc-60: #f1f1f4;
  --ent-zinc-650: #52525b;
  --ent-zinc-70: #f5f5fb;
  --ent-zinc-750: #3f3f46;
  --ent-zinc-80: #f7f7f8;
  --ent-zinc-900: #18181b;
}

:root[data-ns2-theme="dark"] .ent-anim {
  --ent-amber-100: #3a2e0e;
  --ent-amber-700: #fbbf24;
  --ent-green-150: #1a4a38;
  --ent-green-50: #10342a;
  --ent-green-700: #5fd49a;
  --ent-green-800: #86efac;
  --ent-ink-a12: #00000059;
  --ent-ink-a15: #00000066;
  --ent-ink-a20: #00000073;
  --ent-ink-a6: #00000040;
  --ent-ink-a8: #0000004d;
  --ent-red-600: #f87171;
  --ent-sky-50: #0c2d48;
  --ent-sky-700: #7dd3fc;
  --ent-violet-100: #221d52;
  --ent-violet-120: #3d3280;
  --ent-violet-160: #4a3a99;
  --ent-violet-170: #4a3a99;
  --ent-violet-200: #5b48b8;
  --ent-violet-25: #1c1946;
  --ent-violet-250: #7a5cf0;
  --ent-violet-400: #a894ff;
  --ent-violet-50: #2a2360;
  --ent-violet-60: #2a2462;
  --ent-violet-80: #251f58;
  --ent-violet-90: #201c4e;
  --ent-zinc-25: #14153a;
  --ent-zinc-350: #8488a8;
  --ent-zinc-50: #2a2b4c;
  --ent-zinc-60: #1f2047;
  --ent-zinc-650: #b3b6cc;
  --ent-zinc-70: #17183f;
  --ent-zinc-750: #c9ccdd;
  --ent-zinc-80: #191a42;
  --ent-zinc-900: #08081f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) .ent-anim {
    --ent-amber-100: #3a2e0e;
    --ent-amber-700: #fbbf24;
    --ent-green-150: #1a4a38;
    --ent-green-50: #10342a;
    --ent-green-700: #5fd49a;
    --ent-green-800: #86efac;
    --ent-ink-a12: #00000059;
    --ent-ink-a15: #00000066;
    --ent-ink-a20: #00000073;
    --ent-ink-a6: #00000040;
    --ent-ink-a8: #0000004d;
    --ent-red-600: #f87171;
    --ent-sky-50: #0c2d48;
    --ent-sky-700: #7dd3fc;
    --ent-violet-100: #221d52;
    --ent-violet-120: #3d3280;
    --ent-violet-160: #4a3a99;
    --ent-violet-170: #4a3a99;
    --ent-violet-200: #5b48b8;
    --ent-violet-25: #1c1946;
    --ent-violet-250: #7a5cf0;
    --ent-violet-400: #a894ff;
    --ent-violet-50: #2a2360;
    --ent-violet-60: #2a2462;
    --ent-violet-80: #251f58;
    --ent-violet-90: #201c4e;
    --ent-zinc-25: #14153a;
    --ent-zinc-350: #8488a8;
    --ent-zinc-50: #2a2b4c;
    --ent-zinc-60: #1f2047;
    --ent-zinc-650: #b3b6cc;
    --ent-zinc-70: #17183f;
    --ent-zinc-750: #c9ccdd;
    --ent-zinc-80: #191a42;
    --ent-zinc-900: #08081f;
  }
}