/* FittedCV brand stylesheet — the shared design system (tokens, font, reset, buttons, eyebrow,
   theme model). This file is a manually maintained copy: an identical fittedcv-brand.css lives
   at the root of the fittedcv-ext repo. There is no build step and no sync script — an extension
   can't load CSS from an external URL at runtime, so "the same CSS in both" means keeping the
   two copies in step by hand. If you change this file, make the matching change in fittedcv-ext.
   Keep it at the served root, sibling to fonts/, so `url("fonts/InterVariable.woff2")` resolves
   the same way in both repos.

   Strict black/white/gray palette, no hue anywhere, in either theme.

   --- Theme model ---
   Two self-consistent grayscale "surfaces": A (white family) and B (black family). Role tokens
   (--bg/--fg/--muted/...) point at surface A in light mode and surface B in dark mode; the
   --invert-* tokens always point at whichever surface ISN'T current, so a ".section-invert" band
   (or any inverted-context element) automatically becomes the opposite tone in both themes rather
   than needing separate dark-mode overrides of its own.

   Light is the bare :root default. Dark is applied two ways: automatically via
   `prefers-color-scheme` (guarded by :not([data-theme="light"]) so an explicit light override
   still wins), and explicitly via `[data-theme="dark"]` (for a manual toggle, wins regardless of
   OS setting). A consumer that never sets `data-theme` — the extension — only ever gets the
   automatic branch: OS-driven dark mode with no toggle, for free, from these same tokens. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* literal constants — for the rare case that needs an absolute value regardless of theme */
  --black: #0a0a0a;
  --white: #ffffff;

  /* surface A (white family) */
  --a-bg: #ffffff;
  --a-fg: #0a0a0a;
  --a-muted: #555555;
  --a-faint: #888888;
  --a-border: #e4e4e4;
  --a-subtle: #f4f4f4;

  /* surface B (black family) */
  --b-bg: #0a0a0a;
  --b-fg: #ffffff;
  --b-muted: #a3a3a3;
  --b-faint: #6b6b6b;
  --b-border: #2a2a2a;
  --b-subtle: #1a1a1a;

  /* role tokens — light default: page = surface A, inverted context = surface B */
  --bg: var(--a-bg);
  --fg: var(--a-fg);
  --muted: var(--a-muted);
  --faint: var(--a-faint);
  --border: var(--a-border);
  --subtle: var(--a-subtle);

  --invert-bg: var(--b-bg);
  --invert-fg: var(--b-fg);
  --invert-muted: var(--b-muted);
  --invert-faint: var(--b-faint);
  --invert-border: var(--b-border);
  --invert-subtle: var(--b-subtle);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--b-bg);
    --fg: var(--b-fg);
    --muted: var(--b-muted);
    --faint: var(--b-faint);
    --border: var(--b-border);
    --subtle: var(--b-subtle);

    --invert-bg: var(--a-bg);
    --invert-fg: var(--a-fg);
    --invert-muted: var(--a-muted);
    --invert-faint: var(--a-faint);
    --invert-border: var(--a-border);
    --invert-subtle: var(--a-subtle);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: var(--b-bg);
  --fg: var(--b-fg);
  --muted: var(--b-muted);
  --faint: var(--b-faint);
  --border: var(--b-border);
  --subtle: var(--b-subtle);

  --invert-bg: var(--a-bg);
  --invert-fg: var(--a-fg);
  --invert-muted: var(--a-muted);
  --invert-faint: var(--a-faint);
  --invert-border: var(--a-border);
  --invert-subtle: var(--a-subtle);

  color-scheme: dark;
}

/* --- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  transition: background-color 0.2s ease, color 0.2s ease;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* --- shared type --- */

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.section-invert .eyebrow, [data-invert] .eyebrow { color: var(--invert-faint); }

/* --- shared buttons — solid/outline invert automatically with theme via --fg/--bg; the
   "-invert" variants are for use inside a .section-invert band (or any --invert-* context),
   where they need to key off --invert-fg/--invert-bg instead to stay high-contrast there. --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  font-family: var(--font-sans);
}

.btn:active { transform: scale(0.97); }

.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid:hover { opacity: 0.85; }

.btn-outline { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-outline:hover { background: var(--fg); color: var(--bg); }

.btn-solid-invert { background: var(--invert-fg); color: var(--invert-bg); }
.btn-solid-invert:hover { opacity: 0.85; }

.btn-outline-invert { background: transparent; color: var(--invert-fg); border-color: var(--invert-fg); }
.btn-outline-invert:hover { background: var(--invert-fg); color: var(--invert-bg); }

.btn-sm { padding: 9px 16px; font-size: 13.5px; }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- shared surfaces --- */

.card {
  border: 1.5px solid var(--fg);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--fg);
  font: 700 11px var(--font-sans);
  white-space: nowrap;
  color: var(--fg);
  background: transparent;
}

.pill-filled { background: var(--fg); color: var(--bg); border-color: var(--fg); }