/**
 * Site theme SSOT — primitives (config/harness) + derived semantics (color-mix).
 * Recipe version: 1 — keep in sync with scripts/lib/site-theme-derive.mjs
 */
:root {
  /* Tier 0 — primitives (defaults; overridden via --site-primitive-* from harness) */
  --primitive-background: #0d0f18;
  --primitive-surface: #13162b;
  --primitive-primary: #5b8dee;
  --primitive-secondary: #7aa4f4;
  --primitive-attention: #f59e0b;

  /* Tier 1 — semantic colors (derived) */
  --color-bg: var(--primitive-background);
  --pf-site-chrome-height: 64px;
  /* NAV-C — shell nav SSOT (alias for section scroll + top-nav.css) */
  --site-nav-height: var(--pf-site-chrome-height);
  --site-nav-link-padding-y: 0.65rem;
  --site-nav-link-padding-x: 2rem;
  --color-surface: var(--primitive-surface);
  --color-surface-2: color-mix(in srgb, var(--primitive-surface) 78%, var(--primitive-primary) 22%);

  --color-text-primary: color-mix(in srgb, var(--primitive-surface) 12%, white 88%);
  --color-text-secondary: color-mix(in srgb, var(--primitive-surface) 45%, white 55%);
  --color-text-muted: color-mix(in srgb, var(--primitive-surface) 70%, white 30%);

  --color-border: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  --color-border-hover: color-mix(in srgb, var(--color-text-primary) 16%, transparent);

  --color-accent: var(--primitive-primary);
  --color-accent-hover: var(--primitive-secondary);
  --color-accent-muted: color-mix(in srgb, var(--primitive-primary) 10%, transparent);
  --color-accent-border: color-mix(in srgb, var(--primitive-primary) 20%, transparent);
  --color-on-accent: color-mix(in srgb, var(--primitive-primary) 15%, white 85%);

  --color-status-live: #34d399;
  --color-status-dev: color-mix(in srgb, var(--primitive-attention) 85%, white 15%);
  --color-status-archived: color-mix(in srgb, var(--color-text-muted) 65%, var(--primitive-surface) 35%);
  --color-status-live-muted: color-mix(in srgb, var(--color-status-live) 10%, transparent);
  --color-status-dev-muted: color-mix(in srgb, var(--color-status-dev) 10%, transparent);
  --color-status-archived-muted: color-mix(in srgb, var(--color-status-archived) 10%, transparent);

  --color-attention: var(--primitive-attention);
  --color-attention-muted: color-mix(in srgb, var(--primitive-attention) 10%, transparent);
  --color-attention-border: color-mix(in srgb, var(--primitive-attention) 22%, transparent);
  --color-danger: #f28b82;

  --color-recruiter: var(--color-translator-highlight);
  --color-recruiter-muted: var(--color-translator-highlight-muted);
  --color-recruiter-border: var(--color-translator-highlight-border);

  --color-translator-highlight: var(--color-attention);
  --color-translator-highlight-muted: var(--color-attention-muted);
  --color-translator-highlight-border: var(--color-attention-border);

  --color-overlay-scrim: color-mix(in srgb, var(--primitive-background) 85%, transparent);
  --color-gallery-backdrop: color-mix(in srgb, var(--primitive-background) 85%, black 15%);
  --color-nav-hover-bg: color-mix(in srgb, white 5%, transparent);
  --color-nav-backdrop: color-mix(in srgb, var(--primitive-background) 88%, transparent);
  --color-subtle-fill: color-mix(in srgb, white 3%, transparent);

  /* Tier 1 — fonts */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Layout — responsive container: min(vw%, cap); override via site-layout.json or harness Dash */
  --pf-content-max-width: min(90vw, 1280px);
  --max-width: var(--pf-content-max-width);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --card-pad: var(--pf-section-inset, 1.125rem);
  --gap: var(--pf-block-gap, 0.875rem);
  --transition: 0.2s ease;
  --transition-slow: 0.4s ease;

  --pf-dialog-radius-panel: var(--radius-lg);
  --pf-dialog-radius-control: var(--radius-md);
  --pf-dialog-radius-close: var(--radius-sm);
  --pf-dialog-radius-button-primary: var(--radius-sm);
  --pf-dialog-radius-button-secondary: var(--radius-sm);

  /*
   * Image gallery shape — global defaults (squared display/panel; rounded thumbs).
   * Override per theme (theme.config.json → presentation.galleryShape) or per element
   * (--pf-gallery-radius-display-local on .pf-cs-gallery / .modal-content).
   * Values are full CSS border-radius (1–4 lengths for asymmetric corners).
   */
  --pf-gallery-radius-panel: 2px;
  --pf-gallery-radius-display: 0;
  --pf-gallery-radius-thumb: 6px;
  --pf-gallery-radius-nav: 2px;
  --pf-gallery-radius-counter: 2px;
  --pf-gallery-radius-frame: 0;

  --rs-max-width: var(--pf-content-max-width);
  --rs-page-padding-x: var(--pf-page-padding-x, 1rem);
  --rs-page-padding-y: var(--pf-page-padding-y, 0.75rem);
  --rs-radius-card: 14px;
  --rs-radius-control: var(--pf-shape-radius-segment, var(--radius-sm));
  --rs-radius-badge: var(--pf-tag-radius, 4px);
  --rs-space-section: var(--pf-section-gap, 0.875rem);
  --rs-space-control-gap: var(--pf-space-stack-sm, 0.5rem);
  --rs-font-size-name: 2.3rem;
  --rs-font-size-title: 0.82rem;
  --rs-font-size-section-label: 0.68rem;
  --rs-font-size-body: 0.9rem;
  --rs-font-size-bullet: 0.875rem;
  --rs-rec-strip-height: 36px;
}

/* Translator-highlight active: optional accent shift (registry themeRole) */
html[data-pf-translator-highlight='recruiter'],
html[data-lens='recruiter'] {
  --color-accent: var(--pf-translator-theme-accent, var(--color-attention));
  --color-accent-hover: color-mix(in srgb, var(--primitive-attention) 70%, white 30%);
  --color-accent-muted: var(--pf-translator-theme-accent-muted, var(--color-attention-muted));
  --color-accent-border: var(--pf-translator-theme-accent-border, var(--color-attention-border));
}