/* ==========================================================================
   THEME — the one place to change the look of the whole application.

   Every page (new layout and older pages) reads these variables. Change a
   colour, font, size or radius here and it updates everywhere. After editing,
   bump ?v= in templates/layouts/_assets.html (or run collectstatic) so
   browsers pick up the change.
   ========================================================================== */
:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --hr-brand-name: "HR Revo";                 /* (text itself lives in templates/layouts/_brand.html) */
  --hr-primary: #2563eb;                      /* main action colour */
  --hr-primary-hover: #1d4ed8;
  --hr-primary-soft: #e8efff;
  --hr-accent: #06b6d4;                       /* "tech" highlight: active menu, focus glow */
  --hr-accent-soft: rgba(6, 182, 212, .14);
  --hr-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);   /* primary buttons, brand mark */

  /* ── Surfaces & text ───────────────────────────────────────────────── */
  --hr-bg: #f3f6fb;
  --hr-bg-pattern: radial-gradient(1200px 500px at 100% -10%, rgba(6, 182, 212, .08), transparent 60%),
                   radial-gradient(900px 400px at -10% 0%, rgba(37, 99, 235, .07), transparent 55%);
  --hr-surface: #ffffff;
  --hr-surface-2: #f6f8fc;
  --hr-glass: rgba(255, 255, 255, .78);       /* top bar */
  --hr-border: #e2e8f0;
  --hr-border-strong: #cbd5e1;
  --hr-text: #0f172a;
  --hr-text-2: #475569;
  --hr-muted: #64748b;

  /* ── Status colours ────────────────────────────────────────────────── */
  --hr-success: #059669;  --hr-success-soft: #e7f8f1;
  --hr-warning: #b45309;  --hr-warning-soft: #fdf4e3;
  --hr-danger:  #dc2626;  --hr-danger-soft:  #fdeceb;
  --hr-info:    #0369a1;  --hr-info-soft:    #e6f4fb;

  /* ── Sidebar ───────────────────────────────────────────────────────── */
  --hr-sidebar-bg: linear-gradient(180deg, #0b1324 0%, #0f1b33 55%, #0b1324 100%);
  --hr-sidebar-text: #cbd5e1;
  --hr-sidebar-muted: #64748b;
  --hr-sidebar-hover: rgba(148, 163, 184, .10);
  --hr-sidebar-active: rgba(6, 182, 212, .16);
  --hr-sidebar-active-text: #ffffff;
  --hr-sidebar-active-bar: #22d3ee;

  /* ── Typography ────────────────────────────────────────────────────── */
  --hr-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hr-font-size: 14px;
  --hr-title-size: 22px;

  /* ── Shape & depth ─────────────────────────────────────────────────── */
  --hr-radius: 12px;          /* cards */
  --hr-radius-sm: 8px;        /* buttons, inputs */
  --hr-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 14px rgba(15, 23, 42, .05);
  --hr-shadow-lg: 0 16px 40px rgba(15, 23, 42, .16);
  --hr-glow: 0 0 0 3px rgba(6, 182, 212, .22);

  /* ── Sizes ─────────────────────────────────────────────────────────── */
  --hr-control-h: 38px;       /* buttons, inputs, selects (all pages) */
  --hr-control-h-sm: 30px;    /* small buttons */
  --hr-sidebar-w: 268px;
  --hr-sidebar-w-collapsed: 72px;
  --hr-topbar-h: 60px;
  --hr-content-max: none;     /* fill the screen on wide monitors */
}