/*
 * Design tokens copied from RALPH (apps/angular/src/styles/neon-forest/tokens.css and typography.css).
 * Same names and values, so this tool and RALPH stay recognisably one family.
 * Day is the default. Night (warm greys, no blue) follows the device setting.
 */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
}

:root {
  --font-sans: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --nf-type-family: var(--font-sans);
  --nf-type-technical-family: var(--font-mono);
  --nf-fs-min: 12px;
  --nf-type-control-size: 14px;
  --nf-type-body-size: 15px;
  --nf-type-section-size: 15px;
  --nf-type-section-weight: 600;

  --nf-layout-content-max: 1040px;
  --nf-layout-gutter: 20px;

  color-scheme: light;
  --nf-bg: #f2f6fa;
  --nf-surface: #f5f8fb;
  --nf-surface-raised: #ffffff;
  --nf-surface-hover: #eaf2f9;
  --nf-surface-active: #dbe9f5;
  --nf-surface-tile: #f7fafd;
  --nf-line: #dae4ee;
  --nf-line-strong: #c2d1df;
  --nf-line-hover: #8cc8ec;
  --nf-line-selected: #3a9fdf;
  --nf-text: #10273d;
  --nf-text-secondary: #3d5568;
  --nf-text-muted: #536b7f;

  --nf-action: #005eb8;
  --nf-action-hover: #004a90;
  --nf-primary: #85dcff;
  --nf-primary-ink: #005a9e;
  --nf-on-primary: #062033;
  --nf-primary-rgb: 133 220 255;
  --nf-success: #8eedce;
  --nf-success-ink: #0a6a4e;
  --nf-success-soft: #e3f8f0;
  --nf-danger: #b4283f;
  --nf-danger-soft: #fdecef;
  --nf-warning: #8a5300;
  --nf-warning-soft: #fff3dc;
  --nf-amber-outline: #e69a0c;

  --nf-topbar: #004f9e;
  --nf-text-inverse: #ffffff;
  --nf-topbar-text: var(--nf-text-inverse);
  --nf-topbar-muted: #eef6fd;
  --nf-grad-aurora: linear-gradient(105deg, #074588 0%, #0b4a94 45%, #0c5ca9 75%, #136bb5 100%);
  --nf-header-banner:
    radial-gradient(600px 120px at 18% 0%, rgb(159 230 255 / 0.22), transparent 70%),
    radial-gradient(520px 120px at 82% 100%, rgb(var(--nf-primary-rgb) / 0.22), transparent 70%),
    var(--nf-grad-aurora);
  --nf-aurora-page:
    radial-gradient(1200px 620px at -5% -12%, rgb(0 94 184 / 0.12), transparent 62%),
    radial-gradient(1000px 560px at 105% -18%, rgb(133 220 255 / 0.42), transparent 62%);

  --nf-shadow-card: 0 1px 2px rgb(16 39 61 / 0.05), 0 10px 28px -18px rgb(16 39 61 / 0.26);
  --nf-shadow-float: 0 2px 6px rgb(16 39 61 / 0.06), 0 28px 64px -24px rgb(16 39 61 / 0.38);
  --nf-scrim: rgb(10 30 54 / 0.42);

  --nf-radius-sm: 4px;
  --nf-radius-md: 6px;
  --nf-radius-lg: 8px;
  --nf-radius-xl: 12px;
  --nf-radius-button: 6px;
  --nf-radius-pill: 999px;

  --nf-seg-height: 34px;
  --nf-seg-radius: 8px;
  --nf-seg-track-bg: var(--nf-surface-tile);
  --nf-seg-track-line: var(--nf-line-strong);
  --nf-seg-hover-bg: var(--nf-surface-hover);
  --nf-seg-active-bg: var(--nf-action);
  --nf-seg-active-ink: var(--nf-text-inverse);
  --nf-seg-active-line: transparent;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --nf-bg: #1a1714;
    --nf-surface: #1f1b18;
    --nf-surface-raised: #26211d;
    --nf-surface-hover: #2e2823;
    --nf-surface-active: #372f28;
    --nf-surface-tile: #2f2924;
    --nf-line: #3a322b;
    --nf-line-strong: #51463c;
    --nf-line-hover: #8f7556;
    --nf-line-selected: #d09a62;
    --nf-text: #f3eadf;
    --nf-text-secondary: #d4c7b7;
    --nf-text-muted: #b0a08e;

    --nf-action: #ffc98a;
    --nf-action-hover: #ffd7a8;
    --nf-primary: #ffc98a;
    --nf-primary-ink: #ffcf96;
    --nf-on-primary: #2b1a04;
    --nf-primary-rgb: 255 201 138;
    --nf-success: #b9dcae;
    --nf-success-ink: #c8e3bc;
    --nf-success-soft: #232e20;
    --nf-danger: #ffa197;
    --nf-danger-soft: #3a2220;
    --nf-warning: #ffd08a;
    --nf-warning-soft: #3a2a12;
    --nf-amber-outline: #e8b04a;

    --nf-topbar: #1c1815;
    --nf-text-inverse: #f3eadf;
    --nf-topbar-muted: #d1c2b0;
    --nf-grad-aurora: linear-gradient(100deg, #171411 0%, #2a221b 45%, #4a2e18 100%);
    --nf-header-banner: var(--nf-grad-aurora);
    --nf-aurora-page: none;

    --nf-shadow-card: 0 1px 0 rgb(243 234 223 / 0.04) inset, 0 10px 26px -14px rgb(0 0 0 / 0.6);
    --nf-shadow-float: 0 1px 0 rgb(243 234 223 / 0.06) inset, 0 24px 60px -20px rgb(0 0 0 / 0.75);
    --nf-scrim: rgb(8 6 5 / 0.62);

    --nf-seg-active-bg: var(--nf-surface-active);
    --nf-seg-active-ink: var(--nf-text);
    --nf-seg-active-line: var(--nf-line-selected);
  }
}