/* Brinkworks — design tokens
   Structural primitives + light/dark semantic values.

   Palette concept: paper and ink — true neutral grays (not warm
   cream/beige) with a single confident, deep enterprise-blue accent
   used sparingly for actions and emphasis. Reads as a professional
   B2B/consultancy identity rather than a consumer or startup one.
   Replaces the previous crimson generation (too alarm/error-adjacent
   for an enterprise-facing site) and, before that, the vellum/brass/pine
   generation (had drifted into the warm-cream-plus-gold-plus-sage look
   that's become a recognisable default across AI design tools).

   Theme resolution:
   - The base :root block below IS the light theme (also the no-JS /
     no-stored-preference / pre-paint default).
   - The dark block is applied two ways: via `prefers-color-scheme` for
     browsers with no explicit `data-theme` attribute (system preference,
     including when JavaScript never runs), and via an explicit
     `[data-theme="dark"]` attribute set by theme-init.js (an explicit
     user choice, which wins even when it contradicts the OS preference).
   - The dark declarations are intentionally written twice — once inside
     the media query, once for the explicit attribute — because plain CSS
     has no way to share a declaration block across a media-query
     selector and a non-media selector without a preprocessor. Keep the
     two blocks in sync if either changes. */

:root {
  /* Structural (theme-independent) */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;


  --content-max: 72rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Light theme (default) — "paper" */
  color-scheme: light;

  --color-bg: #f5f5f4;
  --color-bg-subtle: #ebebe9;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;

  --color-text: #121212;
  --color-text-muted: #55555a;
  --color-text-soft: #7a7a80;

  --color-border: #dcdcda;
  --color-border-strong: #c2c2be;

  --color-accent: #1b4f8c;
  --color-accent-hover: #143f70;
  --color-accent-soft: #dbe7f4;
  --color-on-accent: #ffffff;

  --color-secondary: #2b3a67;
  --color-secondary-soft: #e3e6ee;

  --color-header-bg: rgba(255, 255, 255, 0.88);
  --color-theme-browser: #f5f5f4;

  --shadow-card: none;
}

/* Dark theme — system preference, no explicit choice stored yet */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #111113;
    --color-bg-subtle: #17171a;
    --color-surface: #1b1b1e;
    --color-surface-raised: #212124;

    --color-text: #f2f2f0;
    --color-text-muted: #b7b7ba;
    --color-text-soft: #8f8f94;

    --color-border: #313136;
    --color-border-strong: #46464c;

    --color-accent: #4ea1f5;
    --color-accent-hover: #7ab8f0;
    --color-accent-soft: #16324d;
    --color-on-accent: #0a1420;

    --color-secondary: #7d93c9;
    --color-secondary-soft: #202b45;

    --color-header-bg: rgba(17, 17, 19, 0.88);
    --color-theme-browser: #111113;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}

/* Dark theme — explicit user choice, overrides system preference either way */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #111113;
  --color-bg-subtle: #17171a;
  --color-surface: #1b1b1e;
  --color-surface-raised: #212124;

  --color-text: #f2f2f0;
  --color-text-muted: #b7b7ba;
  --color-text-soft: #8f8f94;

  --color-border: #313136;
  --color-border-strong: #46464c;

  --color-accent: #4ea1f5;
  --color-accent-hover: #7ab8f0;
  --color-accent-soft: #16324d;
  --color-on-accent: #0a1420;

  --color-secondary: #7d93c9;
  --color-secondary-soft: #202b45;

  --color-header-bg: rgba(17, 17, 19, 0.88);
  --color-theme-browser: #111113;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.45);
}