/* LAN-SERVERS design tokens: the single source of truth for colours, type and spacing.
   Import once, before any component styles. Dark surfaces use the *-dark tokens,
   light surfaces the *-light ones; the "sandwich" page = dark header/hero/footer, light body. */

:root {
  /* Brand */
  --navy: #0B1220;          /* primary dark background, dark text on light */
  --navy-deep: #070D19;     /* footer */
  --cyan: #22D3EE;          /* accent on dark backgrounds ONLY */
  --cyan-deep: #0C8DA1;     /* accent on light backgrounds (cyan darkened to L 34%) */
  --ivory: #F1F5F9;         /* primary text on dark */

  /* The hero's diagonal ramp. Tokens rather than literals in theme.css, so a
     palette can restyle the whole surface by redefining five values -- see
     assets/palettes.css. --hero-deep sits UNDER the map and must stay darker
     than --surface-dark, or the map's land goes darker than its own background
     and the whole drawing inverts. */
  --hero-lit:   #17293F;                    /* the lit corner, top left */
  --hero-mid:   #101D34;
  --hero-deep:  var(--navy-deep);           /* bottom right, under the map */
  --hero-wash:  rgba(34, 211, 238, .10);    /* the accent as light, never as a surface */
  --hero-floor: rgba(12, 141, 161, .08);

  /* Dark surface scale */
  --surface-dark: #111A2E;
  --border-dark: #1E2A44;
  --border-dark-soft: #16213A;
  --text-dark-primary: #F1F5F9;
  --text-dark-secondary: #94A3B8;
  --text-dark-nav: #CBD5E1;
  --text-dark-muted: #64748B;

  /* Light surface scale */
  --surface-light: #FFFFFF;
  --surface-light-alt: #F5F7FA;
  --border-light: #E2E8F0;
  --border-light-soft: #EEF2F6;
  --text-light-primary: #0B1220;
  --text-light-secondary: #475569;
  --text-light-body: #334155;
  --text-light-muted: #64748B;

  /* Semantic aliases (default = dark context; override inside .theme-light) */
  --bg: var(--navy);
  --fg: var(--text-dark-primary);
  --fg-2: var(--text-dark-secondary);
  --accent: var(--cyan);
  --accent-fg: var(--navy);     /* text colour on an accent-filled button */
  --card: var(--surface-dark);
  --line: var(--border-dark);

  /* Type */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(44px, 5.6vw, 72px);
  --fs-h2: clamp(28px, 3vw, 36px);
  --fs-h3: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --lh-tight: 1.05;
  --lh-body: 1.55;
  --track-caps: 0.12em;

  /* Spacing & shape */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  /* Tightened 2026-09-18 at Todor's request to read like the datapacket design:
     that system used 4px on its primary button and 6-8px on tiles, against the
     kit's 8px buttons and 16px cards. Three values, and every button, option, card
     and table on both sites follows -- which is the reason radii are tokens. */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px;
  --container: 1200px;
  --gutter: 24px;

  /* Texture. Declared here rather than in the theme because the URL is relative to
     THIS file, so it resolves inside the brand's own asset directory -- same reason
     the @font-face rules below live here. A theme cannot name a brand's file. */
  --grain-url: url('img/grain.svg');

  /* Logo */
  --logo-mark-header: 40px;     /* mark height in the 64px header */
  --logo-word-header: 20px;     /* wordmark cap height in the header (cap = 0.7 of the SVG height) */
  --logo-min-cap: 14px;         /* never render the wordmark smaller than this */
}

.theme-light {
  --bg: var(--surface-light-alt);
  --fg: var(--text-light-primary);
  --fg-2: var(--text-light-secondary);
  --accent: var(--cyan-deep);
  --accent-fg: #FFFFFF;
  --card: var(--surface-light);
  --line: var(--border-light);
}

/* ---------------------------------------------------------------------------
   Self-hosted webfonts. They live in this brand's asset directory, so the URLs
   below are relative to this file and resolve under /assets/brands/<brand>/.
   No Google Fonts request in production: BRAND.md section 4 -- the header must not
   flash, and the logo does not need it.

   Both faces are the latin subset only. Confirmed by measuring glyph widths in
   a browser: Cyrillic falls back in both. That is fine -- the site is English
   only (Todor, 2026-09-17). Outfit has no Cyrillic upstream at all (latin and
   latin-ext only), so a Cyrillic version of this site would need a different
   heading face, not a bigger subset.
   --------------------------------------------------------------------------- */
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('fonts/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('fonts/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('fonts/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-mono-500.woff2') format('woff2'); }