/* ============================================================================
   DESIGN TOKENS — Nocturne.
   ============================================================================

   This file replaced the copy of the app's own tokens.css. The app ships IBM
   Plex on a light theme; this site ships Nocturne — a dark ground, Inter, and
   an accent used as a line and a glow rather than a flood. That divergence is
   deliberate and was chosen with the redesign.

   TWO VOCABULARIES, ONE SET OF VALUES.

     --color-* / --space-* / --radius-* / --shadow-*   Nocturne's own names,
       copied from _ds/nocturne/styles.css. These are canonical: when Nocturne
       is retuned, only the right-hand side of this block changes.

     --bg / --surface / --ink / --accent / --line / --step-*   the short names
       this site's CSS and inc/mock.php have always used. They are ALIASES onto
       the Nocturne values above, kept so that the product mockups, the pipeline
       diagram and 1,400 lines of existing component CSS did not all have to be
       renamed to change how the site looks.

   Prefer the short names in site.css and pages.css. Reach for a --color-* ramp
   step directly only when you need a tone the aliases do not name.

   NO WEBFONTS, NO CDN. Nocturne's stylesheet opens with an @import of
   fonts.googleapis.com. It is dropped here: the CSP is `font-src 'self'`, so
   that request is refused before it leaves the page, and the site's position is
   that everything is served from our own hosting. Inter is self-hosted below.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Inter, latin subset, 400/500/600.

   Three weights because Nocturne needs exactly three: 400 body, 500 headings
   (its headings never go bolder — hierarchy there is size and space, not
   weight), 600 for the brand mark and the few places that carry a UI label.
   ~72KB total, down from 128KB when this site shipped seven Plex faces.

   font-display: swap — a face that has not arrived must not hold the first
   paint of a page that sells things.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}

:root {
  /* == Nocturne core ====================================================== */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* Tonal ramps, generated in OKLCH on one shared lightness scale, so the same
     step of any role carries the same visual weight. On this dark ground: the
     dark steps (700-900) are tinted fills, hovers and subtle borders; 500 is
     the role's base; the light steps (100-300) are text ON those tints.
     Prefer a ramp step over an ad-hoc color-mix(). */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  /* Nocturne is a mono scheme: accent-2 is a machine-derived stand-in kept only
     so both sets resolve. Treat it as the same role. */
  --color-accent-2-300: #d2cefd;
  --color-accent-2-800: #423e5d;
  --color-accent-2-100: #f5f4ff;

  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading-weight: 500;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* System mono. The run logs and the ufw output on the use-case pages are the
     only monospace on the site, and they do not justify a fourth font file. */
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Density 0.70x — this system is dense on purpose. */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* On a dark ground, elevation is a hairline edge plus ambient darkness —
     never a stack of heavy shadows. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);

  /* == Surface ladder ===================================================== */
  /* Nocturne names a ground and one surface. The redesign uses five distinct
     planes between them, so they are named here rather than left as loose hexes
     scattered through two stylesheets. Ordered darkest to lightest. */
  --bg: var(--color-bg);              /* the page ground                      */
  --bg-sunken: #13151f;               /* full-bleed alternating band          */
  --surface: #1b1d2c;                 /* the primary card                     */
  --surface-2: #1e2030;               /* nested / secondary card              */
  --surface-3: var(--color-surface);  /* inputs, chips, the innermost plane   */
  --surface-inset: #12141f;           /* mockup rail, run-log ground          */
  --surface-chrome: #171927;          /* mockup title bar                     */

  /* Box outlines and separators. These stay SOLID — only freestanding rules and
     table row strips get Nocturne's end-fade. */
  --line: var(--color-neutral-800);   /* the standard 1px card edge           */
  --line-2: #34374a;                  /* a softer edge, for nested cards      */
  --line-faint: color-mix(in srgb, var(--color-text) 10%, transparent);

  /* == Ink =============================================================== */
  --ink: var(--color-text);
  --ink-2: color-mix(in srgb, var(--color-text) 70%, transparent);
  --ink-3: color-mix(in srgb, var(--color-text) 45%, transparent);
  --ink-4: color-mix(in srgb, var(--color-text) 32%, transparent);

  /* == Accent aliases ==================================================== */
  --accent: var(--color-accent);
  --accent-bright: var(--color-accent-400);  /* kickers, links on tint        */
  --accent-soft: var(--color-accent-900);    /* tinted fill                   */
  --accent-line: var(--color-accent-700);    /* border on a tinted fill       */
  --accent-text: var(--color-accent-300);    /* paragraph-size text in accent */

  /* COLOUR IS THE ARGUMENT, not decoration. --accent means Fetch and --dbt
     means dbt, everywhere on this site and nowhere else. --dbt is borrowed from
     the app's own dark-theme token rather than from Nocturne, because the
     pipeline diagram's whole job is to show two halves and one accent cannot.
     See inc/diagram.php. */
  --dbt: #ff8266;
  --dbt-text: #ffb9a5;
  --dbt-soft: #3a1f16;

  /* == Status ============================================================ */
  /* Desaturated on purpose: these appear inside product mockups, where a
     saturated red would out-shout the accent and read as a page-level alarm
     rather than a row-level state. */
  --ok: #9db8a4;
  --warn: #e8cf9c;
  --err: #e4b4b4;
  --running: var(--color-accent-400);
  --idle: var(--ink-3);

  /* == Layout ============================================================ */
  --wrap: 1140px;
  --wrap-narrow: 820px;
  --gutter: 32px;
  --header-h: 61px;
  /* Nocturne's rules fade to transparent over one deck baseline unit at each
     end. Named so the table row strips and .hr cannot drift apart. */
  --rule-fade: 48px;

  /* == Type scale ========================================================
     Fluid, clamped, landing on the redesign's desktop sizes at >=1140px. The
     mock is drawn at fixed px; these reproduce it there and hold together down
     to 360px without a stack of breakpoint overrides. */
  --step--2: 10.5px;
  --step--1: 11.5px;
  --step-0: clamp(13px, 0.55vw + 11.4px, 15px);
  --step-1: clamp(15px, 0.7vw + 12.9px, 17px);
  --step-2: clamp(18px, 1.1vw + 14.5px, 22px);
  --step-3: clamp(22px, 1.6vw + 16.7px, 27px);
  --step-4: clamp(26px, 2.6vw + 16.4px, 34px);
  --step-5: clamp(32px, 4.4vw + 12.9px, 46px);
  --step-6: clamp(36px, 6.2vw + 10.7px, 56px);
}

/* Nocturne is a committed dark design, not a themeable one — there is no light
   palette to swap to, and every value above is defined unconditionally so no
   colour has its only definition inside a media query.

   What DOES vary is motion. Every animation on this site is decorative: the
   pulsing hero dot, the dashes travelling along the pipeline diagram, the
   scroll reveal. None of them carry information, so all of them stop. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}