/* ═══════════════════════════════════════════════════════
   ElitCV — Shared Design Tokens (theme.css)
   Single source of truth for brand color + font values.
   Include this AFTER the Google Fonts <link> and BEFORE any
   page-specific <style> block, so page CSS can still layer
   page-only tokens (mesh backgrounds, glass surfaces, etc.)
   on top without redefining the brand values below.

   STAGE 1 — six equal color experiences (replaces the old
   3-accent copper/blue/emerald gold-led system; no gold/amber/
   champagne value remains anywhere in this file). Neutrals
   (surfaces/text/lines/shadows/status) stay identical across all
   six — that's deliberate, not a leftover: it's what keeps every
   experience unmistakably ElitCV (same type system, same spacing,
   same layout grammar) while the accent hue, the ambient glow
   recipe, and the ink pairing change per experience. See the
   Stage 1 report for the full character/motion description of
   each — this file holds the tokens; the report holds the "why."

   --accent is the base accent (icons, active states, links, larger
   text); --accent-deep is a richer second stop for gradients/small
   accent text; --accent-soft/--accent-bright/--accent-pale are
   derived from --accent via color-mix so every identity gets
   consistent secondary tones without hand-picking them one by one.
   --accent-ambient is a ready-to-use radial-gradient() recipe for
   hero/spotlight backgrounds, unique per experience's character.

   Computed (see Stage 1 report for the full table): every one of
   the six needs WHITE ink on its light-mode fill and BLACK ink
   (var(--ink-on-accent)) on its dark-mode fill — a clean, uniform
   rule across all six, unlike the old system's per-accent
   exceptions in light mode. */

:root, :root[data-theme="light"] {
  /* Surfaces */
  --bg:          #f7f3ec;
  --bg-alt:      #efe8db;
  --paper:       #fffdf8;
  --paper-2:     #fff;

  /* Text */
  --ink:         #1a1408;
  --text:        #2a2418;
  --text-soft:   #5c5242;
  /* Computed: the original #8a8170 was 3.16-3.79:1 against bg/bg-alt/paper
     (used for captions, hints, timestamps, muted labels everywhere) —
     fails WCAG AA's 4.5:1 for normal text. Darkened to the nearest value
     on the same hue that clears 4.5:1 against all three surfaces. */
  --text-mute:   #6f685a;

  /* Lines */
  --line:        rgba(52, 41, 18, .12);
  --line-2:      rgba(52, 41, 18, .22);

  /* Shadows */
  --shadow-1:    0 2px 10px rgba(52, 41, 18, .06);
  --shadow-2:    0 12px 40px rgba(52, 41, 18, .12);
  --shadow-3:    0 30px 80px rgba(52, 41, 18, .18);

  /* Status */
  --danger:      #b8341a;
  --success:     #2d6a4f;
  --warning:     #8a5a00;
  --info:        #1d4ed8;

  /* Button ambient shadow (ink-toned, paired with dark below — not
     accent-tinted; see --shadow-accent for the accent-family glow) */
  --btn-shadow:  0 14px 40px rgba(26, 20, 8, .3);
}

:root[data-theme="dark"] {
  /* Surfaces */
  --bg:          #0a0e1a;
  --bg-alt:      #0f1424;
  --paper:       #11172a;
  --paper-2:     #161d33;

  /* Text */
  --ink:         #f2ecd9;
  --text:        #f2ecd9;
  --text-soft:   #bdb69f;
  /* Same fix as the light-mode value above: the original #807a68 was
     4.15-4.49:1 against paper/bg/bg-alt — fails 4.5:1. Lightened on the
     same hue to clear it against all three surfaces. */
  --text-mute:   #87816e;

  /* Lines */
  --line:        rgba(255, 255, 255, .08);
  --line-2:      rgba(255, 255, 255, .15);

  /* Shadows */
  --shadow-1:    0 2px 10px rgba(0, 0, 0, .25);
  --shadow-2:    0 12px 40px rgba(0, 0, 0, .45);
  --shadow-3:    0 30px 80px rgba(0, 0, 0, .55);

  /* Status */
  --danger:      #ef6f56;
  --success:     #7cc69b;
  --warning:     #e3a83f;
  --info:        #7ea8f0;

  /* Button ambient shadow — black-based in dark mode rather than the
     light mode's warm ink-brown, so it reads correctly on dark surfaces */
  --btn-shadow:  0 14px 40px rgba(0, 0, 0, .4);
}

/* ─────────────────────────────────────────────────────────
   Six color experiences — [data-accent="sapphire|emerald|garnet|
   amethyst|turquoise|onyx"] on <html>, set from users.pref_color.
   All six are co-equal: none is "the brand color," none is favored
   in marketing, and first-time visitors are assigned one at random
   (see the accent-restore script pattern) rather than defaulting
   to a fixed one. The unscoped :root fallback below (Onyx) exists
   only because CSS needs *something* to paint in the instant before
   that assignment script runs — it is a neutral technical fallback,
   not a preferred identity.

   Every --accent-deep is derived via color-mix (darker in light
   mode, brighter in dark mode — richer gradient stop, not a
   contrast patch: unlike the old copper/blue/emerald set, every one
   of these six base values already clears 4.5:1 as text on its own).
   ───────────────────────────────────────────────────────── */

/* Onyx — quiet confidence. Graphite with a whisper of cool steel-blue;
   for the reader who wants the platform to disappear and the CV to
   speak. Ambient: barely-there, almost monochrome. Motion: the most
   restrained of the six — see the Stage 1 motion reference.

   Defined twice on purpose: the unscoped :root rule is the pre-paint
   fallback (before any data-accent attribute exists), and the scoped
   [data-accent="onyx"] rule below gives Onyx the same attribute-selector
   specificity as the other five once it's actually the active identity —
   without it, a same-specificity page-local :root rule loaded after
   theme.css (e.g. an alias like --accent:var(--accent)) can win the
   cascade tie and break --accent for Onyx specifically. */
:root, :root[data-theme="light"], :root[data-accent="onyx"][data-theme="light"] {
  --accent:        #3d4552;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: radial-gradient(ellipse 60% 45% at 50% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%);
}
:root[data-theme="dark"], :root[data-accent="onyx"][data-theme="dark"] {
  --accent:        #9aa5b5;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: radial-gradient(ellipse 60% 45% at 50% 30%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%);
}

/* Sapphire — corporate trust and depth. Ambient: a slow, deep glow
   like light through water. Motion: a calm, steady pulse, never showy.

   Stage "Homepage Creative Direction" repaint: the original #2c4e8a read
   as flat and slightly grey next to the richer identities. Deepened the
   saturation toward a true royal-sapphire blue (was drifting toward
   corporate navy) — re-verified at 7.86:1/8.55:1 as text on bg/paper and
   8.69:1 as white-on-fill (light), 8.01:1/7.41:1 as text on bg/paper and
   8.32:1 as ink-on-fill (dark). */
:root[data-accent="sapphire"][data-theme="light"] {
  --accent:        #1f4a8c;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: radial-gradient(ellipse 70% 50% at 50% 25%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 65%);
}
:root[data-accent="sapphire"][data-theme="dark"] {
  --accent:        #82a8ea;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: radial-gradient(ellipse 70% 50% at 50% 25%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%);
}

/* Emerald — ambition and forward growth. Ambient: a gradient that
   rises, like ascent. Motion: things grow/settle into place, never
   just appear.

   Stage "Homepage Creative Direction" repaint: #1f6e4f was the clearest
   "muddy" complaint — too close to olive/forest, too little saturation
   next to the warm neutrals, easy to mistake for a status-success green
   rather than a brand identity. Pushed to a more saturated true emerald
   with more blue in it (less olive). Re-verified at 5.16:1/5.61:1 as text
   on bg/paper and 5.71:1 as white-on-fill (light), 9.72:1/8.98:1 as text
   on bg/paper and 10.10:1 as ink-on-fill (dark) — all comfortably clear
   4.5:1, with light mode's the tighter of the two by design (a saturated
   green this light still has to darken to hold contrast). */
:root[data-accent="emerald"][data-theme="light"] {
  --accent:        #0e7550;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: linear-gradient(0deg, transparent 0%, color-mix(in srgb, var(--accent) 14%, transparent) 55%, transparent 100%);
}
:root[data-accent="emerald"][data-theme="dark"] {
  --accent:        #5ecc9d;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: linear-gradient(0deg, transparent 0%, color-mix(in srgb, var(--accent) 18%, transparent) 55%, transparent 100%);
}

/* Garnet — drive and conviction. Ambient: a tighter, warmer ember
   glow. Motion: a touch quicker and more assertive than the others —
   more snap, never abrupt.

   Stage "Homepage Creative Direction" repaint: #9c2b3e was the other
   "muddy/brownish" complaint — too dark and too close to oxblood/rust
   next to the warm cream neutrals, reading brown before it read red.
   Pushed brighter and more saturated toward true garnet-crimson. Re-
   verified at 6.90:1/7.50:1 as text on bg/paper and 7.63:1 as white-on-
   fill (light), 7.36:1/6.80:1 as text on bg/paper and 7.64:1 as
   ink-on-fill (dark). */
:root[data-accent="garnet"][data-theme="light"] {
  --accent:        #a3183c;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: radial-gradient(ellipse 50% 40% at 50% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}
:root[data-accent="garnet"][data-theme="dark"] {
  --accent:        #ef7d93;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: radial-gradient(ellipse 50% 40% at 50% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%);
}

/* Amethyst — vision and distinction. Ambient: a soft, multi-stop
   aurora sweep. Motion: a slow color-drift/shimmer, unhurried.

   Stage "Homepage Creative Direction" repaint: minor richness bump only
   (this one was never named in the "muddy/brownish/pale" complaint) —
   slightly more saturated so it reads as jewel amethyst rather than a
   generic lavender-grey next to the newly-brightened five. Re-verified
   at 7.22:1/7.85:1 as text on bg/paper and 7.98:1 as white-on-fill
   (light), 7.73:1/7.15:1 as text on bg/paper and 8.03:1 as ink-on-fill
   (dark). */
:root[data-accent="amethyst"][data-theme="light"] {
  --accent:        #6a2fae;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: radial-gradient(ellipse 65% 50% at 30% 25%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%), radial-gradient(ellipse 55% 45% at 75% 60%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%);
}
:root[data-accent="amethyst"][data-theme="dark"] {
  --accent:        #bd90f2;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: radial-gradient(ellipse 65% 50% at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), radial-gradient(ellipse 55% 45% at 75% 60%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
}

/* Turquoise — clarity and modern precision; a stone with real
   regional resonance. Ambient: crisp, clean, like sunlight on water.
   Motion: light and quick — a shimmer, not a glow.

   Stage "Homepage Creative Direction" repaint: #0f7d76 leaned toward a
   flat teal-grey and was one of the "overly pale/washed" impressions in
   its lighter derived tones. Deepened and re-saturated toward a true
   jewel turquoise. Re-verified at 5.03:1/5.48:1 as text on bg/paper and
   5.57:1 as white-on-fill (light) — the tightest margin of the six by
   design (turquoise is a light-leaning hue that has to work hardest to
   stay dark enough for AA) — and 11.83:1/10.94:1 as text on bg/paper and
   12.29:1 as ink-on-fill (dark). */
:root[data-accent="turquoise"][data-theme="light"] {
  --accent:        #08756c;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, black);
  --accent-soft:   color-mix(in srgb, var(--accent) 78%, white 22%);
  --accent-bright: color-mix(in srgb, var(--accent) 55%, white 45%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, white 82%);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-ambient: radial-gradient(ellipse 75% 55% at 50% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
}
:root[data-accent="turquoise"][data-theme="dark"] {
  --accent:        #4fe0d0;
  --accent-deep:   color-mix(in srgb, var(--accent) 75%, white);
  --accent-soft:   color-mix(in srgb, var(--accent) 80%, white 20%);
  --accent-bright: color-mix(in srgb, var(--accent) 60%, white 40%);
  --accent-pale:   color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-accent: 0 8px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-ambient: radial-gradient(ellipse 75% 55% at 50% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%);
}

/* Motion — same curves everywhere, not theme-dependent */
:root {
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.5, 1.6, .4, .95);

  /* Font stacks — Cairo (AR) + DM Sans (EN body) + Cormorant Garamond (EN display/serif).
     Load with:
     https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=DM+Sans:wght@200;300;400;500;600;700&display=swap */
  --font-ar:      'Cairo', sans-serif;
  --font-en:      'DM Sans', sans-serif;
  --font-display: 'Cormorant Garamond', serif;
}

/* Cormorant Garamond has no Arabic glyphs — any heading built on
   --font-display would otherwise silently fall back to the browser's
   generic serif (not Cairo) for Arabic text. Redirect it site-wide
   instead of patching every page that uses the token individually. */
html[dir="rtl"] {
  --font-display: var(--font-ar);
}

/* ─────────────────────────────────────────────────────────
   Spacing scale — use for every margin/padding/gap. Not
   theme- or accent-dependent.
   ───────────────────────────────────────────────────────── */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

/* ─────────────────────────────────────────────────────────
   Radius scale
   ───────────────────────────────────────────────────────── */
:root {
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;
}

/* ─────────────────────────────────────────────────────────
   Component-state tokens
   ───────────────────────────────────────────────────────── */
:root {
  /* Shared focus-ring — the 4px accent-pale glow already used on the
     marketing auth/checkout/pricing inputs, now the one treatment
     every focusable control should converge on. */
  --focus-ring: 0 0 0 4px var(--accent-pale);
}

/* Text on top of a bright accent fill (buttons/avatars/icon-tiles:
   background:var(--accent); color:var(--ink-on-accent)). Computed (see
   the Stage 1 report's contrast table): every one of the six
   experiences needs WHITE in light mode and near-BLACK in dark mode —
   a clean split by THEME, not by accent, unlike the old copper/blue/
   emerald set which needed per-accent exceptions in light mode. One
   pair of theme-scoped values now covers all six identities. */
:root, :root[data-theme="light"] { --ink-on-accent: #ffffff; }
:root[data-theme="dark"]         { --ink-on-accent: #0a0805; }

/* ─────────────────────────────────────────────────────────
   Typography roles — size + weight + line-height together, so a role
   is never applied with only two of the three. Line-height is bumped
   under html[dir="rtl"] since Cairo needs more of it than DM Sans/
   Cormorant Garamond do at the same point size. Use the --text-*-role
   variables directly, or the ready-made .role-* classes below.
   ───────────────────────────────────────────────────────── */
:root {
  --text-display-size:   clamp(40px, 6vw, 72px);
  --text-display-weight: 600;
  --text-display-line:   1.05;

  --text-h1-size:   clamp(32px, 4vw, 48px);
  --text-h1-weight: 700;
  --text-h1-line:   1.15;

  --text-h2-size:   clamp(24px, 3vw, 32px);
  --text-h2-weight: 700;
  --text-h2-line:   1.2;

  --text-h3-size:   20px;
  --text-h3-weight: 600;
  --text-h3-line:   1.3;

  --text-label-size:    13px;
  --text-label-weight:  600;
  --text-label-line:    1.4;
  --text-label-spacing: .04em;

  --text-caption-size:   12px;
  --text-caption-weight: 500;
  --text-caption-line:   1.5;

  --text-button-size:   14px;
  --text-button-weight: 700;
  --text-button-line:   1;
}

/* Arabic line-height bump — same sizes/weights, more breathing room.
   Also zeroes --text-label-spacing: letter-spacing on Arabic breaks
   letter connections (Cairo, like any Arabic script, relies on letters
   joining) — it was applied unconditionally via .role-label and every
   inline var(--text-label-spacing) usage with no RTL guard. */
html[dir="rtl"] {
  --text-display-line: 1.25;
  --text-h1-line:      1.35;
  --text-h2-line:      1.4;
  --text-h3-line:      1.5;
  --text-label-line:   1.6;
  --text-caption-line: 1.7;
  --text-button-line:  1.2;
  --text-label-spacing: normal;
}

.role-display { font-family: var(--font-display); font-size: var(--text-display-size); font-weight: var(--text-display-weight); line-height: var(--text-display-line); }
.role-h1      { font-family: var(--font-display); font-size: var(--text-h1-size);      font-weight: var(--text-h1-weight);      line-height: var(--text-h1-line); }
.role-h2      { font-family: var(--font-display); font-size: var(--text-h2-size);      font-weight: var(--text-h2-weight);      line-height: var(--text-h2-line); }
.role-h3      { font-size: var(--text-h3-size);      font-weight: var(--text-h3-weight);      line-height: var(--text-h3-line); }
.role-label   { font-size: var(--text-label-size);   font-weight: var(--text-label-weight);   line-height: var(--text-label-line);   letter-spacing: var(--text-label-spacing); text-transform: uppercase; }
.role-caption { font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); line-height: var(--text-caption-line); }
.role-button  { font-size: var(--text-button-size);  font-weight: var(--text-button-weight);  line-height: var(--text-button-line); }

/* Visually-hidden but screen-reader-visible — for a real <h1> on pages
   whose visual design has no room for a displayed page title (e.g. an
   app-shell toolbar), so the document outline is still real and
   navigable even though nothing shifts on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────
   Shared status badge — used on both admin and candidate
   pages, so it lives here rather than in admin.css or a
   candidate-only stylesheet. Dot+tint pattern (was
   settings.php's .status-pill, the most accessible of the
   three badge patterns found in the audit — it signals state
   via shape+color together, not color alone). One definition
   for every plan/ticket/payment status badge on the site;
   previously admin.css and support.php each hardcoded their
   own copy of this and could silently drift apart.
   ───────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--radius-full);
}
/* Badge text is Arabic status copy (نشط/معطّل/...) as often as English —
   letter-spacing breaks Arabic's letter joining, same fix as
   --text-label-spacing above. */
html[dir="rtl"] .badge{letter-spacing:normal;}
.badge::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0}
.badge-free{background:var(--bg-alt); color:var(--text-mute)}
.badge-pro, .badge-open{background:color-mix(in srgb, var(--info) 12%, transparent); color:var(--info)}
.badge-career, .badge-active, .badge-resolved, .badge-paid{background:color-mix(in srgb, var(--success) 12%, transparent); color:var(--success)}
.badge-executive, .badge-inprogress{background:var(--accent-pale); color:var(--accent)}
.badge-suspended, .badge-failed{background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger)}
.badge-pending{background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning)}