/* ───────────────────────────────────────────────────────────────────────
   REKRUTEN-SCHMIEDE — Token-Layer
   Fundament: Memorium Modern Skin (lifted dark, Graphit/Silber, Nunito).
   Tilt: monochrom-offiziell (Grau/Weiß/Schwarz), ein einziger Signal-Akzent,
   prominenter Stencil-Display-Layer für taktischen Charakter.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Nunito";
    src: url("fonts/Nunito-Medium.ttf") format("truetype");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Display = stencil/condensed. Loaded from Google Fonts in the page head. */

:root {
    /* ── Surfaces (Memorium cool-dark, pushed a touch darker for "nächtlich") ── */
    --surface-deep:     oklch(15% 0.012 250);
    --surface-base:     oklch(18% 0.013 250);
    --surface-raised:   oklch(23% 0.015 250);
    --surface-lifted:   oklch(27% 0.017 250);
    --surface-floating: oklch(32% 0.019 250);
    --surface-glow:     oklch(40% 0.026 250);
    --surface-dock:     oklch(13% 0.013 250 / 0.92);
    --surface-overlay:  oklch(6% 0.010 250 / 0.66);

    /* ── Borders ── */
    --border-subtle:  oklch(28% 0.013 250);
    --border-default: oklch(36% 0.017 250);
    --border-strong:  oklch(48% 0.021 250);
    --border-divider: oklch(30% 0.013 250 / 0.6);
    --hairline:       oklch(60% 0.012 250 / 0.22);

    /* ── Foregrounds ── */
    --fg-primary:   oklch(97% 0.004 250);
    --fg-secondary: oklch(80% 0.009 250);
    --fg-muted:     oklch(62% 0.011 250);
    --fg-faint:     oklch(50% 0.010 250);
    --fg-disabled:  oklch(44% 0.010 250);
    --fg-inverse:   oklch(15% 0.012 250);

    /* ── Primary = graphite→silver (the "action" tonal scale, no blue) ── */
    --primary-50:  oklch(97% 0.004 255);
    --primary-100: oklch(91% 0.005 255);
    --primary-200: oklch(83% 0.006 255);
    --primary-300: oklch(74% 0.008 255);
    --primary-400: oklch(64% 0.009 255);
    --primary-500: oklch(55% 0.010 255);
    --primary-600: oklch(46% 0.011 255);
    --primary-700: oklch(38% 0.012 255);
    --primary-800: oklch(30% 0.012 255);
    --primary-900: oklch(22% 0.012 255);

    /* ── Signal — the ONE restrained accent. Muted military amber/khaki.
          Used only for "scharf/aktiv/live" status, the deadline ticker,
          and a single CTA underline. Never as a fill on large areas.   ── */
    --signal:      oklch(80% 0.115 84);
    --signal-dim:  oklch(70% 0.10 84);
    --signal-bg:   oklch(80% 0.115 84 / 0.12);
    --signal-line: oklch(80% 0.115 84 / 0.55);

    /* ── Status feedback (kept desaturated to stay "official") ── */
    --ok:      oklch(74% 0.13 160);
    --ok-bg:   oklch(74% 0.13 160 / 0.12);
    --warn:    oklch(80% 0.13 75);
    --warn-bg: oklch(80% 0.13 75 / 0.12);
    --crit:    oklch(67% 0.19 25);
    --crit-bg: oklch(67% 0.19 25 / 0.12);

    /* ── Elevation ── */
    --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.34), inset 0 1px 0 oklch(100% 0 0 / 0.04);
    --shadow-md: 0 4px 14px oklch(0% 0 0 / 0.34), 0 1px 2px oklch(0% 0 0 / 0.22), inset 0 1px 0 oklch(100% 0 0 / 0.05);
    --shadow-lg: 0 16px 38px oklch(0% 0 0 / 0.46), 0 2px 5px oklch(0% 0 0 / 0.22), inset 0 1px 0 oklch(100% 0 0 / 0.06);
    --shadow-xl: 0 28px 64px oklch(0% 0 0 / 0.56), inset 0 1px 0 oklch(100% 0 0 / 0.08);
    --inset-strong: inset 0 2px 6px oklch(0% 0 0 / 0.42);

    /* ── Radii (Memorium scale — kept tight/official) ── */
    --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-card: 8px; --r-btn: 8px;
    --r-modal: 12px; --r-pill: 9999px;

    /* ── Spacing ── */
    --s-2xs: 2px; --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px;
    --s-xl: 24px; --s-2xl: 32px; --s-3xl: 48px; --s-4xl: 72px; --s-5xl: 112px;

    /* ── Motion ── */
    --t-fast: 150ms; --t-base: 220ms; --t-slow: 360ms;
    --ease: cubic-bezier(.22, 1, .36, 1);

    /* ── Type ── */
    --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --font-display: "Big Shoulders Stencil", "Oswald", "Arial Narrow", var(--font-sans);
    --font-stencil: "Big Shoulders Stencil", "Oswald", var(--font-sans);

    --fs-caption: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
    --fs-ui:      clamp(0.84rem, 0.80rem + 0.16vw, 0.94rem);
    --fs-body:    clamp(0.94rem, 0.90rem + 0.20vw, 1.05rem);
    --fs-lead:    clamp(1.05rem, 0.98rem + 0.45vw, 1.35rem);
    --fs-h3:      clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
    --fs-h2:      clamp(1.5rem, 1.3rem + 1.0vw, 2.25rem);
    --fs-h1:      clamp(2.1rem, 1.7rem + 2.0vw, 3.4rem);
    --fs-hero:    clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);

    --lh-tight: 1.05; --lh-head: 1.12; --lh-body: 1.55;
    --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-primary);
    background: var(--surface-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

::selection { background: oklch(80% 0.115 84 / 0.30); color: var(--fg-primary); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(50% 0.012 250 / 0.5); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(62% 0.014 250 / 0.7); }

/* ── Stencil display helper ── */
.display {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--fg-primary);
}
.stencil-label {
    font-family: var(--font-stencil);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ── Mono micro-label ("tactical" codes/coordinates) ── */
.mono {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.04em;
    color: var(--fg-muted);
}
.mono-up { text-transform: uppercase; }

/* ── Classification / kicker tag ── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
}
.tag::before {
    content: "";
    width: 18px; height: 1px;
    background: var(--signal-line);
}
.tag.no-rule::before { display: none; }

/* ── Corner-bracket framing (reusable tactical detail) ── */
.brackets { position: relative; }
.brackets::before, .brackets::after {
    content: ""; position: absolute; width: 14px; height: 14px;
    border: 1px solid var(--border-strong); pointer-events: none;
}
.brackets::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }