@font-face {
  font-family: "InterVariable";
  src: url("/assets/fonts/InterVariable.woff2?v=4a6beb23683d") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/SpaceGrotesk.woff2?v=8e085aa43809") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Brand teal from the original APPSEC logo. */
  --brand-950: #041a22;
  --brand-900: #0a3b4b;
  --brand-700: #14616a;
  --brand-500: #207f89;
  --brand-400: #2da8ad;
  --brand-300: #32b7bb;
  --brand-100: rgba(50, 183, 187, 0.14);

  /* Dark stage surfaces. */
  --ink-1000: #0b131d;
  --ink-950: #0f1924;
  --ink-900: #142231;
  --ink-850: #192a3b;
  --ink-800: #1f3245;
  --ink-line: rgba(190, 214, 232, 0.14);
  --ink-line-strong: rgba(190, 214, 232, 0.28);
  --ink-text: #f0f5f9;
  --ink-muted: #b2c0cb;
  --ink-subtle: #93a4b2;

  /* Dark-first reading surfaces: no large light areas. */
  --page: #172434;
  --paper: #1e2f42;
  --field: #15222f;
  --canvas: #1b2a3b;
  --canvas-strong: #22364b;
  --line: rgba(190, 214, 232, 0.15);
  --line-strong: rgba(190, 214, 232, 0.3);
  --text: #f0f5f9;
  --text-soft: #cad6df;
  --text-muted: #a3b3c0;

  /* Testování a analýzy — amber / ember (threat, alert). */
  --offense-950: #1f1f22;
  --offense-900: #2a2723;
  --offense-800: #4a3a22;
  --offense-700: #b8640a;
  --offense-500: #f08c1a;
  --offense-300: #ffb547;
  --offense-accent: #ffbd5c;
  --offense-100: rgba(255, 181, 71, 0.14);
  --offense-050: rgba(255, 181, 71, 0.06);

  /* Ochrana a technologie — deep blue / teal. */
  --defense-950: #03121b;
  --defense-900: #061f2c;
  --defense-800: #0a3647;
  --defense-700: #08646f;
  --defense-500: #14a9b8;
  --defense-300: #5fe3e8;
  --defense-accent: #6be6ea;
  --defense-100: rgba(95, 227, 232, 0.12);
  --defense-050: rgba(95, 227, 232, 0.05);

  --brand-accent: #62d2d5;

  --success: #74dfb2;
  --success-surface: rgba(116, 223, 178, 0.1);
  /* Alert red: only small signals for an acute incident (icon, dot, thin edge), never large areas. */
  --alert: #ff4f4f;
  --alert-soft: rgba(255, 79, 79, 0.12);
  --error: #ff9b9b;
  --error-surface: rgba(255, 120, 120, 0.1);
  --focus: #5fe3e8;
  --focus-on-dark: #5fe3e8;

  --gradient-worlds: linear-gradient(90deg, var(--offense-300), #e6edf2 50%, var(--defense-300));

  --font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "InterVariable", "Inter", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3rem);
  --text-h3: clamp(1.2rem, 1.1rem + 0.35vw, 1.375rem);
  --text-h2: clamp(1.95rem, 1.45rem + 1.9vw, 3.1rem);
  --text-h1: clamp(2.4rem, 1.65rem + 3vw, 4.25rem);
  --text-display: clamp(2.6rem, 1.55rem + 4.1vw, 5.1rem);

  --leading-tight: 1.03;
  --leading-heading: 1.12;
  --leading-body: 1.65;
  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.14em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-space: clamp(4.5rem, 8.5vw, 8rem);
  --section-space-tight: clamp(3rem, 6vw, 5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --frame: clamp(0.5rem, 1.2vw, 1rem);

  --container: 78rem;
  --container-narrow: 46rem;
  --header-height: max(72px, calc(2.75rem + 16px));
  /* Widths in root-font units; navigation.js uses these for first paint and resize alike. */
  --navigation-inline-min: 85;
  --navigation-compact-max: 68;
  --touch-target: 2.75rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-stage: clamp(1.25rem, 2.4vw, 1.75rem);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.35), 0 34px 70px -28px rgba(0, 0, 0, 0.9);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  --hex-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16.2v32.3L28 64.7 0 48.5V16.2zM28 64.7V97M0 48.5l-28 16.2M56 48.5l28 16.2' fill='none' stroke='%23bed6e8' stroke-opacity='.08' stroke-width='1'/%3E%3C/svg%3E");

  --z-header: 50;
  --z-skip-link: 100;

  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 520ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-page: cubic-bezier(0.5, 0, 0.15, 1);
}

/* ==========================================================================
   World colour tokens — the only place that maps a world to colours.
   Any element with data-world="offense|defense|neutral" sets them and they
   inherit, so a nested world (a defence menu on an attack page) overrides its
   ancestor. Components never select on data-world; they read these tokens.
   ========================================================================== */

:root,
[data-world="neutral"] {
  --accent: var(--defense-300);          /* icons, strokes, small marks */
  --accent-text: var(--defense-accent);  /* coloured text and links */
  --accent-strong: var(--brand-400);     /* underlines, bars, edge lines */
  --accent-soft: var(--defense-100);     /* tinted fills */
  --accent-faint: var(--defense-050);
  --label: var(--text-muted);            /* eyebrows, kickers, meta labels */
  --mark: var(--gradient-worlds);        /* eyebrow marker */
  --cta-bg: #fff;                        /* primary button on stages and asides */
  --cta-fg: var(--ink-950);
  --cta-hover: #d6fbfc;
  --cta-shadow: rgba(95, 227, 232, 0.4);
  --stage-glow-a: rgba(95, 227, 232, 0.15);
  --stage-glow-b: rgba(76, 143, 224, 0.12);
  --stage-base: var(--ink-900);
}

[data-world="defense"] {
  --accent: var(--defense-300);
  --accent-text: var(--defense-accent);
  --accent-strong: var(--defense-500);
  --accent-soft: var(--defense-100);
  --accent-faint: var(--defense-050);
  --label: var(--defense-accent);
  --mark: var(--defense-500);
  --cta-bg: var(--defense-300);
  --cta-fg: var(--defense-950);
  --cta-hover: #94eff2;
  --cta-shadow: rgba(95, 227, 232, 0.55);
  --stage-glow-a: rgba(20, 169, 184, 0.34);
  --stage-glow-b: rgba(32, 127, 137, 0.18);
  --stage-base: var(--defense-950);
}

[data-world="offense"] {
  --accent: var(--offense-300);
  --accent-text: var(--offense-accent);
  --accent-strong: var(--offense-500);
  --accent-soft: var(--offense-100);
  --accent-faint: var(--offense-050);
  --label: var(--offense-accent);
  --mark: var(--offense-500);
  --cta-bg: var(--offense-300);
  --cta-fg: var(--offense-950);
  --cta-hover: #ffcc80;
  --cta-shadow: rgba(255, 181, 71, 0.6);
  --stage-glow-a: rgba(255, 181, 71, 0.13);
  --stage-glow-b: rgba(76, 143, 224, 0.1);
  --stage-base: var(--ink-900);
}