/* Magenta Labs design tokens. Derived 1:1 from linear.app computed styles
   (see Design/reference/linear-vars.json). Dark is the default theme;
   [data-theme="light"] overrides follow. */

@font-face {
  font-family: "Inter Variable";
  src: url("../assets/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --brand-name: "Magenta Labs";
  --brand-domain: "magenta.codes";

  /* Font */
  --font-regular: "Inter Variable", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  --font-monospace: ui-monospace, "SF Mono", Menlo, monospace;
  --font-settings: "cv01", "ss03";
  --font-weight-medium: 510;
  --font-weight-title: 590;
  --font-weight-bold: 680;

  /* Backgrounds */
  --color-bg-primary: #08090a;
  --color-bg-level-1: #0f1011;
  --color-bg-level-2: #141516;
  --color-bg-level-3: #191a1b;
  --color-bg-quinary: #282828;
  --color-bg-translucent: #ffffff08;
  --header-bg: #0b0b0bcc;
  --header-blur: 20px;

  /* Text */
  --color-text-primary: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-tertiary: #8a8f98;
  --color-text-quaternary: #62666d;

  /* Borders and lines */
  --color-border-primary: #23252a;
  --color-border-secondary: #34343a;
  --color-border-tertiary: #3e3e44;
  --color-border-translucent: #ffffff0d;
  --color-line-primary: #37393a;
  --color-line-secondary: #202122;
  --color-line-tertiary: #18191a;
  --color-line-quaternary: #141515;

  /* Accent. One token on purpose: swapping to a magenta accent later is a
     one-line change here. */
  --color-accent: #7170ff;
  --color-accent-hover: #828fff;
  --color-brand-base: #5e6ad2;
  --color-accent-tint: #18182f;

  /* Support colors (use sparingly: charts, status) */
  --color-teal: #00b8cc;
  --color-orange: #fc7840;
  --color-green: #68cc58;
  --color-red: #eb5757;

  /* Buttons */
  --color-button-invert-bg: #e5e5e6;
  --color-button-invert-bg-hover: #fff;
  --color-button-invert-text: #08090a;

  /* White text / marks that sit on the accent fill (button-accent label, checked
     checkbox tick). Stays white in both themes; the accent stays dark enough. */
  --color-on-accent: #ffffff;

  /* Dim scrim behind modals and popovers. Near-black wash, theme-aware. */
  --color-overlay-scrim: #05060799;

  /* Type scale: sizes */
  --text-micro-size: 0.75rem;
  --text-mini-size: 0.8125rem;
  --text-small-size: 0.875rem;
  --text-regular-size: 0.9375rem;
  --text-large-size: 1.0625rem;
  --title-1-size: 1.0625rem;
  --title-2-size: 1.25rem;
  --title-3-size: 1.5rem;
  --title-4-size: 2rem;
  --title-5-size: 2.5rem;
  --title-6-size: 3rem;
  --title-7-size: 3.5rem;
  --title-8-size: 4rem;
  --title-9-size: 4.5rem;
  /* Display sizes above the numbered scale, for slide heroes (title, section, cta). */
  --title-mega-size: 6rem; /* 96px */
  --title-display-size: 7.5rem; /* 120px */

  /* Type scale: tracking */
  --text-regular-letter-spacing: -0.011em;
  --text-small-letter-spacing: -0.013em;
  --text-mini-letter-spacing: -0.01em;
  --title-small-letter-spacing: -0.012em; /* titles 1-4 */
  --title-large-letter-spacing: -0.022em; /* titles 5-9 */

  /* Spacing. Strict 4px base scale. Every margin / padding / gap resolves to
     one of these; the linter gates raw px in those properties. Steps confirmed
     against Linear's live scrape (--scrollbar-gap 4px, --page-inset 32px,
     --page-padding-block 64px all land on the scale) and the community Figma
     file. Off-scale one-offs round to the nearest step. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  /* Color foundations (reference vocabulary, not applied directly). The raw
     Linear brand purple ramp and neutral steps, kept for provenance and for
     components that need an in-between value. Semantic tokens above are the
     applied layer; these are the palette they draw from. */
  --ref-purple-100: #eef0fd;
  --ref-purple-400: #7477f0;
  --ref-purple-500: #6c79ff;
  --ref-purple-600: #5e6ad2;
  --ref-purple-700: #575bc7;
  --ref-purple-900: #222342;

  /* Radii */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-32: 32px;
  --radius-rounded: 9999px;
  --radius-circle: 50%;

  /* Shadows / elevation. Five semantic levels plus the two no-op anchors and
     the layered stack. The three middle levels (low/medium/high) are Linear's
     live-scrape values, kept exactly (light-touch). tiny and overlay extend the
     range: tiny for resting chips/toggles, overlay for modals and popovers that
     sit above everything. */
  --shadow-none: 0px 0px 0px transparent;
  --shadow-tiny: 0px 1px 2px #00000014;
  --shadow-low: 0px 2px 4px #0000001a;
  --shadow-medium: 0px 4px 24px #00000033;
  --shadow-high: 0px 7px 32px #00000059;
  --shadow-overlay: 0px 12px 48px #00000073;
  --shadow-stack-low: 0px 8px 2px 0px transparent, 0px 5px 2px 0px #00000005,
    0px 3px 2px 0px #0000000a, 0px 1px 1px 0px #0000000f,
    0px 0px 1px 0px #00000012;

  /* Motion */
  --speed-quick: 0.1s;
  --speed-regular: 0.25s;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --header-height: 72px;
  --page-max-width: 1024px;
  --page-padding-inline: 32px;
}

[data-theme="light"] {
  --color-bg-primary: #ffffff;
  --color-bg-level-1: #f7f8f8;
  --color-bg-level-2: #f0f1f2;
  --color-bg-level-3: #e9eaeb;
  --color-bg-quinary: #e1e2e4;
  --color-bg-translucent: #00000005;
  --header-bg: #fffffFcc;

  --color-text-primary: #08090a;
  --color-text-secondary: #3e4249;
  --color-text-tertiary: #6f7177;
  --color-text-quaternary: #97999e;

  --color-border-primary: #e4e5e8;
  --color-border-secondary: #d9dade;
  --color-border-tertiary: #c9cbd0;
  --color-border-translucent: #00000010;
  --color-line-primary: #c9cbd0;
  --color-line-secondary: #e4e5e8;
  --color-line-tertiary: #eeeff1;
  --color-line-quaternary: #f4f5f6;

  --color-accent: #5e6ad2;
  --color-accent-hover: #6e79d6;
  --color-accent-tint: #eef0fd;

  --color-button-invert-bg: #08090a;
  --color-button-invert-bg-hover: #202122;
  --color-button-invert-text: #ffffff;

  --shadow-tiny: 0px 1px 2px #0000000a;
  --shadow-low: 0px 2px 4px #0000000d;
  --shadow-medium: 0px 4px 24px #00000014;
  --shadow-high: 0px 7px 32px #0000001f;
  --shadow-overlay: 0px 12px 48px #00000029;
}

/* Base layer shared by every preview and slide */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-regular);
  font-feature-settings: var(--font-settings);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: var(--text-regular-letter-spacing);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}