@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

/* ============================================================================
   HIREED AI — MONOCHROME DESIGN SYSTEM
   A strict black/white system. One ink color carries the whole identity:
   it is near-black in light mode and near-white in dark mode, so primary
   buttons, focus rings and active states invert automatically per theme.
   The only non-neutral colors retained are functional: success (green) and
   danger (red), used sparingly for genuine outcome/safety signals.
   ========================================================================= */

:root {
  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-heading: "Archivo", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-ui: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 32px;
  --text-3xl: 44px;

  /* ── 8px spacing system ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ── Neutral primitives (warm-neutral grayscale, never pure #000/#fff) ─ */
  --ink-950: #0a0a0a;
  --ink-900: #141414;
  --ink-800: #1c1c1e;
  --ink-700: #262626;
  --ink-600: #404040;
  --ink-500: #525252;
  --ink-400: #737373;
  --ink-300: #a3a3a3;
  --ink-200: #d4d4d4;
  --ink-150: #e2e2e2;
  --ink-100: #ebebeb;
  --ink-50:  #f5f5f5;
  --ink-25:  #fafafa;

  /* ── Light palette (semantic) ───────────────────────────────────────── */
  --color-bg: #f7f7f8;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f1f3;
  --color-text: #0a0a0a;
  --color-text-soft: #404040;
  --color-muted: #737373;
  --color-border: #e2e2e4;
  --color-border-soft: #ececee;
  --color-focus: #0a0a0a;

  /* Functional feedback — the only non-neutral hues, kept muted */
  --color-success: #1f8a4c;
  --color-success-bg: rgba(31, 138, 76, 0.1);
  --color-warning: #8a6d1f;
  --color-warning-bg: rgba(138, 109, 31, 0.1);
  --color-danger: #c8372f;
  --color-danger-bg: rgba(200, 55, 47, 0.1);
  --color-info: var(--color-text-soft);
  --color-info-bg: rgba(10, 10, 10, 0.06);

  /* Accent = ink. Inverts automatically with theme. */
  --color-accent: var(--color-text);
  --color-accent-bg: rgba(10, 10, 10, 0.06);
  --color-on-accent: var(--color-bg);
  --color-text-on-accent: var(--color-bg);

  /* Monochrome status ladder (progression by lightness, not hue) */
  --status-1: #b8b8bb;   /* lightest — earliest stage */
  --status-2: #8a8a8e;
  --status-3: #4a4a4d;
  --status-4: #0a0a0a;   /* ink — final/strongest stage */

  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06), 0 0 0 1px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(10, 10, 10, 0.08), 0 2px 4px -1px rgba(10, 10, 10, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(10, 10, 10, 0.1), 0 4px 6px -2px rgba(10, 10, 10, 0.05);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --color-border-strong: #c7c7ca;

  /* Shared header component scale */
  --header-height: 72px;
  --header-touch-target: 44px;
  --header-logo-size: 34px;
  --header-dropdown-width: 430px;
  --header-resource-icon-size: 48px;
  --header-press-offset: 1px;
  --header-drawer-width: 360px;
  --header-z-index: 100;
  --header-overlay-z-index: 101;
  --header-drawer-z-index: 102;
  --header-dropdown-z-index: 103;
}

/* ── Dark palette ─────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-surface: #161617;
  --color-surface-soft: #202022;
  --color-text: #fafafa;
  --color-text-soft: #c7c7c9;
  --color-muted: #8e8e92;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-soft: rgba(255, 255, 255, 0.07);
  --color-focus: #fafafa;

  --color-success: #4ade80;
  --color-success-bg: rgba(74, 222, 128, 0.12);
  --color-warning: #e3c04a;
  --color-warning-bg: rgba(227, 192, 74, 0.12);
  --color-danger: #ff6b61;
  --color-danger-bg: rgba(255, 107, 97, 0.14);
  --color-info: var(--color-text-soft);
  --color-info-bg: rgba(255, 255, 255, 0.08);

  --color-accent-bg: rgba(255, 255, 255, 0.09);

  /* Status ladder inverts: lightest stage is dim, final stage is bright ink */
  --status-1: #4a4a4d;
  --status-2: #6f6f73;
  --status-3: #b0b0b4;
  --status-4: #fafafa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55);
  --color-border-strong: rgba(255, 255, 255, 0.24);
}

/* ── Backward-compatible aliases used by existing pages ───────────────── */
:root {
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --ink: var(--color-text);
  --on-ink: var(--color-bg);
  --ink-soft: var(--color-text-soft);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --line-soft: var(--color-border-soft);
  --t1: var(--color-text);
  --t2: var(--color-text-soft);
  --t3: var(--color-muted);
  --s1: var(--color-surface);
  --s2: var(--color-surface-soft);
  --s3: var(--color-bg);
  --b1: var(--color-border);
  --b2: var(--color-border-soft);

  /* Functional */
  --green: var(--color-success);
  --gd: var(--color-success-bg);
  --yellow: var(--color-warning);
  --yd: var(--color-warning-bg);
  --red: var(--color-danger);
  --rd: var(--color-danger-bg);

  /* Former brand accents → neutralized to ink/grays so the UI stays
     strictly monochrome without touching every call site. */
  --blue: var(--color-text-soft);
  --bd: var(--color-info-bg);
  --purple: var(--color-muted);
  --pd: var(--color-accent-bg);
  --orange: var(--color-warning);
  --od: var(--color-warning-bg);
}

/* ── Smooth theme cross-fade (transient class set by header.js for 300ms) ── */
:root.theme-transition,
:root.theme-transition *,
:root.theme-transition *::before,
:root.theme-transition *::after {
  transition:
    background-color var(--duration-slow) var(--ease-in-out),
    border-color var(--duration-slow) var(--ease-in-out),
    color var(--duration-slow) var(--ease-in-out),
    fill var(--duration-slow) var(--ease-in-out) !important;
}

/* ── Respect reduced-motion globally ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root.theme-transition,
  :root.theme-transition *,
  :root.theme-transition *::before,
  :root.theme-transition *::after {
    transition: none !important;
  }
}