/* Sagan Technologies Group: design tokens. Every colour, font and size the site uses is named here.
   Light is the default; dark follows the system (prefers-color-scheme) unless the reader picked one
   (assets/prefs.js sets html[data-theme]). The brand ramp is the logo's: violet, blue, cyan. */
:root {
  color-scheme: light;
  /* surfaces */
  --bg: oklch(98.4% 0.004 265);
  --bg-raised: oklch(100% 0 0);
  --bg-sunken: oklch(95.8% 0.008 265);
  --bg-deep: oklch(16% 0.035 268);
  --ink: oklch(19% 0.03 268);
  --ink-2: oklch(34% 0.03 268);
  --muted: oklch(49% 0.025 268);
  --line: oklch(90.5% 0.01 268);
  --line-strong: oklch(82% 0.015 268);
  --glass: oklch(100% 0 0 / 0.72);
  /* brand */
  --violet: oklch(62% 0.2 285);
  --blue: oklch(58% 0.2 262);
  --cyan: oklch(70% 0.13 215);
  --brand: oklch(53% 0.22 264);
  --brand-ink: oklch(99% 0.003 265);
  --brand-soft: oklch(94.5% 0.035 268);
  --gold: oklch(72% 0.13 78);
  --ok: oklch(58% 0.14 155);
  --warn: oklch(62% 0.16 45);
  --error: oklch(56% 0.2 27);
  --focus: oklch(58% 0.2 262);
  --grad: linear-gradient(115deg, var(--violet), var(--blue) 52%, var(--cyan));
  --shadow-1: 0 1px 2px oklch(20% 0.03 268 / 0.06), 0 8px 24px -12px oklch(20% 0.03 268 / 0.16);
  --shadow-2: 0 2px 4px oklch(20% 0.03 268 / 0.05), 0 24px 60px -24px oklch(30% 0.08 268 / 0.32);
  /* type */
  --font-display: "Plus Jakarta Sans", "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.1875rem;
  --text-title: clamp(1.25rem, 0.6vw + 1.05rem, 1.5rem);
  --text-lead: clamp(1.125rem, 0.45vw + 1rem, 1.375rem);
  --text-h2: clamp(1.75rem, 1.7vw + 1.05rem, 2.875rem);
  --text-h1: clamp(2.1rem, 2.6vw + 1.1rem, 4rem);
  --text-figure: clamp(2.5rem, 2.6vw + 1.25rem, 3.75rem);
  /* space */
  /* spacing and the container in rem, so very large screens can scale the whole page with the root size */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 10.5rem;
  --container: 77.5rem; --gutter: 2.5rem;
  --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --nav-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 700ms;
}
/* a real spring where the browser can draw one (CSS linear()) */
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); }
}
@media (max-width: 64rem) { :root { --gutter: 28px; --nav-h: 68px; } }
/* QHD and ultrawide monitors at 100% scaling: the same page, set larger (breakpoints stay on the 16px base) */
@media (min-width: 2200px) { html { font-size: 118.75%; } }
@media (min-width: 2800px) { html { font-size: 125%; } }
@media (max-width: 40rem) { :root { --gutter: 18px; } }

/* dark: the same system re-derived, never inverted */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(13.5% 0.025 268);
  --bg-raised: oklch(18% 0.03 268);
  --bg-sunken: oklch(11.5% 0.022 268);
  --bg-deep: oklch(10% 0.025 268);
  --ink: oklch(96% 0.008 268);
  --ink-2: oklch(84% 0.015 268);
  --muted: oklch(70% 0.02 268);
  --line: oklch(26% 0.025 268);
  --line-strong: oklch(36% 0.03 268);
  --glass: oklch(16% 0.03 268 / 0.72);
  --violet: oklch(70% 0.17 285);
  --blue: oklch(70% 0.16 262);
  --cyan: oklch(80% 0.12 210);
  --brand: oklch(68% 0.17 266);
  --brand-ink: oklch(15% 0.04 268);
  --brand-soft: oklch(25% 0.06 268);
  --gold: oklch(80% 0.12 80);
  --ok: oklch(76% 0.14 155);
  --warn: oklch(78% 0.13 55);
  --error: oklch(72% 0.17 27);
  --focus: oklch(74% 0.15 262);
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 30px -14px oklch(0% 0 0 / 0.55);
  --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.3), 0 30px 80px -30px oklch(40% 0.12 268 / 0.45);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: oklch(13.5% 0.025 268); --bg-raised: oklch(18% 0.03 268); --bg-sunken: oklch(11.5% 0.022 268); --bg-deep: oklch(10% 0.025 268);
    --ink: oklch(96% 0.008 268); --ink-2: oklch(84% 0.015 268); --muted: oklch(70% 0.02 268);
    --line: oklch(26% 0.025 268); --line-strong: oklch(36% 0.03 268); --glass: oklch(16% 0.03 268 / 0.72);
    --violet: oklch(70% 0.17 285); --blue: oklch(70% 0.16 262); --cyan: oklch(80% 0.12 210);
    --brand: oklch(68% 0.17 266); --brand-ink: oklch(15% 0.04 268); --brand-soft: oklch(25% 0.06 268);
    --gold: oklch(80% 0.12 80); --ok: oklch(76% 0.14 155); --warn: oklch(78% 0.13 55); --error: oklch(72% 0.17 27); --focus: oklch(74% 0.15 262);
    --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 30px -14px oklch(0% 0 0 / 0.55);
    --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.3), 0 30px 80px -30px oklch(40% 0.12 268 / 0.45);
  }
}