@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --brand-ink: #111412;
  --brand-paper: #F4F2EC;
  --brand-fog: #9BA19A;
  --brand-graphite: #5E635D;
  --brand-signal: #FF6A1A;
  --brand-signal-deep: #B23F00;
  --brand-go: #35D07F;
  --brand-go-deep: #147A44;
  --brand-warn: #F2C14E;
  --brand-warn-deep: #8A5F00;
  --brand-error: #FF6B7A;
  --brand-error-deep: #B3202F;
  --brand-focus: #F2C14E;
  --brand-focus-deep: #8A5F00;
}

:root, .theme-dark {
  --c-bg: #111412;            --c-surface: #181c19;
  --c-surface-2: #1f2420;
  --c-border: #2e342f;        --c-text: #f4f2ec;          --c-text-muted: #9ba19a;    --c-accent: #ff6a1a;        --c-accent-ink: #111412;    --c-link: #ff6a1a;          --c-focus: #f2c14e;         --c-warn-bg: #2a2310;
  --c-warn-border: #f2c14e;
  --c-warn-text: #f7d888;     --c-code-bg: #0b0d0c;
  --c-success: #35d07f;       --c-error: #ff6b7a;
  --c-error-bg: #2b1519;
  --c-error-border: #ff6b7a;
  --c-error-text: #ff6b7a;    --c-ph-bg: #181c19;         --c-ph-border: #9ba19a;     --c-ph-text: #f4f2ec;       --c-ph-hatch: repeating-linear-gradient(45deg, transparent 0, transparent 7px, rgba(155,161,154,0.35) 7px, rgba(155,161,154,0.35) 8px);
  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(2rem, 4.5vw, 3.25rem);
  --lh: 1.6;
  --fw-display: 700;          --ls-display: -0.02em;      --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem;
  --radius: 4px;              --maxw: 72rem;
  --focus-ring: 3px solid var(--c-focus);
  --c-ui: #6b736b;
  --c-warn-bg-2: #332b12;
  color-scheme: dark;
}

[data-theme="light"], .theme-light {
    --c-bg: #f4f2ec;          --c-surface: #ffffff;
    --c-surface-2: #eae7df;
    --c-border: #d3cfc4;      --c-text: #111412;        --c-text-muted: #5e635d;  --c-accent: #b23f00;      --c-accent-ink: #ffffff;  --c-link: #b23f00;
    --c-focus: #8a5f00;       --c-warn-bg: #fbf0d2;
    --c-warn-border: #8a5f00;
    --c-warn-text: #5a3e00;   --c-code-bg: #eae7df;
    --c-success: #147a44;     --c-error: #b3202f;       --c-error-bg: #fbe3e5;
    --c-error-border: #b3202f;
    --c-error-text: #b3202f;  --c-ph-bg: #eae7df;       --c-ph-border: #5e635d;   --c-ph-text: #111412;     --c-ph-hatch: repeating-linear-gradient(45deg, transparent 0, transparent 7px, rgba(94,99,93,0.35) 7px, rgba(94,99,93,0.35) 8px);
    --c-ui: #7a7f78;
    --c-warn-bg-2: #f5e3b0;
    color-scheme: light;
}