/* 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); on navy it takes the experiment homepage's indigo-to-blue. */
  --glow-disc: linear-gradient(90deg, var(--glow-a), var(--glow-b));
  --glow-disc-opacity: 0.3;
  --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;

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

/* 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: the Microsoft 365 tiles (Word, Excel, PowerPoint, Outlook) in their brand colours. */
.v2-ent {
  --ent-brand-word: #185abd;
  --ent-brand-excel: #107c41;
  --ent-brand-powerpoint: #c43e1c;
  --ent-brand-outlook: #0f6cbd;
}

/* /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;
  }
}