/*
 * ForgeCode brand layer for the static site options.
 * Values are copied verbatim from forge-desktop/src/renderer/design-tokens.css
 * (primitives + semantic names), and fonts are the same Space Grotesk / Space Mono
 * woff2 files the console ships. Keep names identical so a future sync is a diff.
 */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* primitives (design-tokens.css) */
  --primitive-white: #ffffff;
  --primitive-black: #000000;
  --primitive-gray-50: #faf9f5;
  --primitive-gray-100: #f2f0e8;
  --primitive-gray-200: #e4e0d0;
  --primitive-gray-300: #ccc7b0;
  --primitive-gray-400: #a8a088;
  --primitive-gray-500: #7a7260;
  --primitive-gray-600: #574f3e;
  --primitive-gray-700: #3d3628;
  --primitive-gray-800: #2a2b2e;
  --primitive-gray-900: #232427;
  --primitive-gray-950: #1c1d1f;
  --primitive-gray-975: #17181a;
  --primitive-orange-100: #ffedd5;
  --primitive-orange-300: #fdba74;
  --primitive-orange-400: #fb923c;
  --primitive-orange-500: #f97316;
  --primitive-orange-600: #ea580c;
  --primitive-orange-700: #c2410c;
  --primitive-orange-800: #9a3412;
  --primitive-orange-900: #7c2d12;
  --primitive-yellow-400: #fde047;
  --primitive-cyan-400: #22d3ee;
  --primitive-cyan-600: #0891b2;
  --primitive-cyan-700: #0e7490;
  --primitive-green-400: #4ade80;
  --primitive-green-600: #16a34a;
  --primitive-red-400: #f87171;

  --font-sans: "Space Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;
  --radius: 0.8rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Dark semantic set ([data-theme="dark"] in design-tokens.css) */
.theme-dark {
  color-scheme: dark;
  --color-bg-base: var(--primitive-gray-950);
  --color-bg-subtle: var(--primitive-gray-900);
  --color-bg-surface: var(--primitive-gray-800);
  --color-bg-sidebar-primary: var(--primitive-gray-975);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-text-primary: var(--primitive-gray-200);
  --color-text-secondary: var(--primitive-gray-300);
  --color-text-muted: var(--primitive-gray-500);
  --color-text-subtle: var(--primitive-gray-400);
  --color-accent-primary: var(--primitive-orange-500);
  --color-accent-secondary: var(--primitive-orange-400);
  --color-accent-muted: var(--primitive-orange-900);
  --color-accent-gradient: linear-gradient(135deg, var(--primitive-orange-600), var(--primitive-orange-500));
  --color-accent-cyan: var(--primitive-cyan-400);
  --color-accent-yellow: var(--primitive-yellow-400);
  --color-success: var(--primitive-green-400);
  --color-error: var(--primitive-red-400);
}

/* Light semantic set (:root / [data-theme="light"] in design-tokens.css) */
.theme-light {
  color-scheme: light;
  --color-bg-base: var(--primitive-gray-50);
  --color-bg-subtle: var(--primitive-gray-100);
  --color-bg-surface: var(--primitive-white);
  --color-bg-sidebar-primary: var(--primitive-gray-100);
  --color-border-default: var(--primitive-gray-200);
  --color-border-subtle: var(--primitive-gray-100);
  --color-border-strong: var(--primitive-gray-300);
  --color-text-primary: var(--primitive-gray-900);
  --color-text-secondary: var(--primitive-gray-600);
  --color-text-muted: var(--primitive-gray-400);
  --color-text-subtle: var(--primitive-gray-500);
  --color-accent-primary: var(--primitive-orange-500);
  --color-accent-secondary: var(--primitive-orange-600);
  --color-accent-muted: var(--primitive-orange-100);
  --color-accent-gradient: linear-gradient(135deg, var(--primitive-orange-600), var(--primitive-orange-500));
  --color-accent-cyan: var(--primitive-cyan-600);
  --color-accent-cyan-strong: var(--primitive-cyan-700);
  --color-success: var(--primitive-green-600);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); background: var(--color-bg-base); color: var(--color-text-primary); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { text-wrap: balance; line-height: 1.08; margin: 0; font-weight: 500; }
p { text-wrap: pretty; }
code, kbd, pre { font-family: var(--font-mono); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 5rem; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .6rem 1rem; background: var(--color-accent-primary); color: #000; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

/* Brand logo rendered from the real SVG files via mask, so it can take any token colour */
.logo-mark { display: inline-block; width: 28px; height: 28px; background: currentColor;
  -webkit-mask: url("brand/logo-mark-light.svg") center / contain no-repeat;
          mask: url("brand/logo-mark-light.svg") center / contain no-repeat; }
.logo-word { display: inline-block; height: 22px; aspect-ratio: 573 / 95; background: currentColor;
  -webkit-mask: url("brand/logo-light.svg") left center / contain no-repeat;
          mask: url("brand/logo-light.svg") left center / contain no-repeat; }

.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.25rem; border-radius: calc(var(--radius) * .8);
  font: 500 1rem/1 var(--font-sans); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
  touch-action: manipulation; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-accent-primary); color: var(--primitive-gray-975); }
.btn-primary:hover { background: var(--color-accent-secondary); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}