/* Nyckel brand tokens: fonts and CSS variables only, no selectors beyond :root. Shared by the site, docs and server-rendered pages; hex values live only here. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/plex/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex/plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/plex/plex-sans-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex/plex-mono-400.woff2) format("woff2"); }

:root {
  /* brand palette (same names and values as design-tokens.css) */
  --brand-signature: #1E56E8;
  --brand-sky: #91C9FF;
  --brand-dark: #040A14;
  --brand-near-white: #D8E0EC;
  --brand-body-on-dark: #A6B5C9;
  --brand-white: #FFFFFF;

  /* light ground */
  --bg: #F8F9F6; --bg-2: #F1F3EE; --bg-3: #E9ECE6; --card: #FFFFFF;
  --ink: #040A14; --ink-2: #3A4353; --muted: #5F6775;
  --blue: #1E56E8; --blue-hover: #1848C4; --blue-soft: #EAF0FE; --blue-line: #C6D6FB; --blue-ink: #1A44B8;
  --sky: #91C9FF;
  --green: #1F9D5B; --green-soft: #E6F6EC; --green-ink: #166B3E;
  --amber: #D98A0B; --amber-soft: #FEF4D9; --amber-ink: #8A5A00;
  --red: #D64545; --red-soft: #FCE8E8;
  --line: #E6E8E2; --line-2: #D4D8D0;
  --on-blue: #FFFFFF;
  --line-accent: var(--blue); /* accent borders and bars; Sky where the ground is dark */

  /* night (the dark band and the footer) */
  --n-bg: #040A14; --n-bg-2: #0A1424; --n-bg-3: #101D33;
  --n-line: #1C2B45; --n-line-2: #2A3D5C;
  --n-ink: var(--brand-near-white); --n-ink-2: var(--brand-body-on-dark); --n-muted: #8493AE;

  /* type */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* shape */
  --r: 16px; --r-s: 12px; --r-xs: 8px;
  --shadow: 0 1px 2px rgba(4, 10, 20, .05), 0 1px 1px rgba(4, 10, 20, .03);
  --shadow-2: 0 8px 24px -12px rgba(4, 10, 20, .18), 0 1px 2px rgba(4, 10, 20, .05);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --max: 1120px;
  --gutter: 20px;
  --header-h: 60px;

  /* spacing: --sec-y pads a section, --block-gap separates the blocks inside it */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --sec-y: var(--s-16);
  --block-gap: var(--s-8);
}
@media (min-width: 900px) { :root { --sec-y: var(--s-24); --block-gap: var(--s-10); } }