/* --- Shared design tokens, used by every page (index.html via style.css, and the
   standalone marketing/legal pages via their own inline <style> blocks).
   These five values were previously hardcoded independently in 5 separate places -
   this file is the single source of truth going forward. Purely additive: every
   page still renders identically, just referencing var(--varda-*) instead of the
   literal value. ---

   2026-07-30: --varda-bg/--varda-text/--varda-accent/--varda-border and --varda-font
   updated to the "stone/cairn" visual identity (warm dark stone, teal-green accent,
   Fraunces headings + IBM Plex Sans body) first designed for the client costing-model
   artifact, extended here to the 5 marketing/legal pages that consume this file
   (index.html/style.css and quick-test.html deliberately do NOT reference these tokens
   directly - confirmed via grep before this change - so the live app's own dark theme
   is completely unaffected). New --varda-card-bg/--varda-accent-hover/--varda-font-heading
   tokens added alongside; the established semantic status colors used elsewhere on these
   pages (#e0a050 warning, #5bb05b success) are deliberately untouched - they carry meaning
   established across the whole app, not part of this brand-identity change. --- */
/* 2026-08-21: --varda-ember and --varda-ink-deep added for the "Sentinel" marketing-page
   direction (angular cut-corner panels, a watchman/cairn motif tying to what "Varda" actually
   means). --varda-ember deliberately reuses the *existing* #e0a050 warning-orange rather than
   inventing a new accent color - it already carries real meaning across the app (staleness/
   exception callouts), so this is a reuse, not a second, competing accent. --varda-mono is a
   system monospace stack, not a new @font-face - IBM Plex Mono has no local .woff2 alongside
   Fraunces/Plex Sans here, and adding a Google Fonts CDN link just for kicker labels would
   regress the self-hosted-fonts decision this file already made. --varda-cut-corner is a shared
   clip-path value (not a color) for the angular corner used throughout this direction in place
   of border-radius, kept as one token so every consumer stays visually identical if it's ever
   tuned. */
:root {
    --varda-bg: #1B1D22;
    --varda-text: #EDEAE3;
    --varda-accent: #6FA39C;
    --varda-accent-hover: #5C8B85;
    --varda-border: #33363D;
    --varda-card-bg: #24262D;
    --varda-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    --varda-font-heading: 'Fraunces', Georgia, serif;
    --varda-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, 'Courier New', monospace;
    --varda-ember: #e0a050;
    --varda-ink-deep: #101216;
    --varda-cut-corner: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    --varda-cut-corner-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    --varda-font-runic: 'Noto Sans Runic', serif;
}

@font-face {
    font-family: 'Fraunces';
    src: url('/static/fonts/fraunces-var.woff2') format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/static/fonts/plexsans-var.woff2') format('woff2');
    font-weight: 100 700;
    font-style: normal;
    font-display: swap;
}

/* 2026-08-22: self-hosted for the landing page's Elder Futhark rune glyphs (nav rail, section
   watermarks, footer glossary), matching the same self-hosted-fonts decision as Fraunces/IBM
   Plex Sans above rather than a Google Fonts CDN link. Google's own Noto Sans Runic ships as a
   single static weight, Runic-block-only (U+16A0-16F8, SIL OFL licensed, sourced from Google's
   own google/fonts GitHub repo) - genuinely tiny (~6.5KB), not a variable multi-script family. */
@font-face {
    font-family: 'Noto Sans Runic';
    src: url('/static/fonts/notosansrunic.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+16A0-16F8;
}

/* --- Brand wordmark (2026-08-23) - replaces the old logo.png bitmap (a bright rounded-chevron
   mark that predates the Sentinel/cairn redesign and no longer matches it - wrong teal shade,
   wrong font, wrong geometry) with the same text+rune treatment already used for the real app's
   own sidebar identity (.app-sidebar-wordmark, style.css) and this file's own runic-marks
   language elsewhere on the marketing pages. No raster asset to keep visually in sync with the
   rest of the identity going forward - just Fraunces + the self-hosted runic font above.
   Sized via the wrapping element's own font-size (set per page/placement, matching how each
   page previously set a different logo.png height) so .brand-wordmark-text/-rune scale with it
   via em units rather than each needing their own fixed px override. --- */
.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    text-decoration: none;
}

.brand-wordmark-text {
    font-family: var(--varda-font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--varda-text);
    font-size: 1em;
}

.brand-wordmark-rune {
    font-family: var(--varda-font-runic), serif;
    font-size: 0.6em;
    color: var(--varda-accent);
    opacity: 0.7;
}

/* 2026-08-23: self-hosted for the main app's exact typography spec, matching the same
   self-hosted-fonts decision as Fraunces/IBM Plex Sans/Noto Sans Runic above rather than a Google
   Fonts CDN link - the app's own labels, IDs, dates, filenames, and counts all specify real IBM
   Plex Mono, not a generic system-monospace fallback (var(--varda-mono) previously resolved to).
   Two static weights only (Google doesn't offer this family as a variable font) - latin subset,
   SIL OFL licensed, sourced from Google's own google/fonts GitHub repo. */
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/static/fonts/plexmono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/static/fonts/plexmono-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}