/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   theme-v3.css — global dark-editorial theme
   Loaded from base.html AFTER each page's own CSS.
   Overrides palette tokens + body + typography across the app.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root{
  --bg-primary:#0A0907;
  --bg-secondary:#110F0A;
  --bg-card:#18150F;
  --bg-input:#1F1B14;
  --border-color:#2A251B;
  --border:#2A251B;
  --border-focus:#d97757;
  --text-primary:#F0EBE0;
  --text-secondary:#C2BCA9;
  --text-muted:#8A8270;
  --accent:#d97757;
  --accent-hover:#e8895f;
  --accent-glow:rgba(217,119,87,0.18);
  --success:#22c55e;
  --warning:#FFB627;
  --error:#FF5630;
  --gradient-1:linear-gradient(135deg, #d97757 0%, #c4623f 100%);
  --gradient-2:linear-gradient(135deg, #110F0A 0%, #0A0907 100%);
  --surface-soft:rgba(24,21,15,0.85);
  --surface-mid:rgba(24,21,15,0.92);
  --surface-strong:#18150F;
  --shadow-soft:rgba(0,0,0,0.28);
  --shadow-strong:rgba(0,0,0,0.48);

  /* tracker-specific status colors — re-cast for dark */
  --status-drafted:#6B6452;
  --status-sent:#5DD3FF;
  --status-waiting:#FFB627;
  --status-replied:#C4FF3D;
  --status-interview:#d486ff;
  --status-offer:#FF5630;
  --status-rejected:#9c5050;
  --status-archived:#454338;

  /* shared v3 tokens */
  --v3-acid:#C4FF3D;
  --v3-acid-deep:#94C300;
  --v3-line-soft:#1C1A14;
  --v3-mute:#454338;
  --v3-ice:#3AB9F0;
  --v3-fire:#FF5630;
  --v3-warm:#FFB627;

  /* ── aliases for pages that use shorter token names ──
     vakansii-hub.css, press-kit.css, blog-hub.css, trust-page.css,
     recruiters-hub.css inherit the «blue-teal palette» from their own
     :root using these short names; we redefine them dark. */
  --bg:#0A0907;
  --card:#18150F;
  --text:#F0EBE0;
  --muted:#8A8270;
  --line:#2A251B;
  --accent-soft:#1F1B14;
}

/* ━━━━━━━━━━━━━━━ BODY (override hardcoded backgrounds) ━━━━━━━━━━━━━━━ */
html,body{
  background:var(--bg-primary) !important;
  color:var(--text-primary) !important;
}
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.005em;
  position:relative;
}

/* grain overlay — applied to every page */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;
  opacity:0.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0 0.65  0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}

body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px circle at 88% 8%, rgba(196,255,61,0.04), transparent 50%),
    radial-gradient(800px circle at 0% 40%, rgba(217,119,87,0.05), transparent 55%),
    radial-gradient(700px circle at 50% 110%, rgba(58,185,240,0.03), transparent 50%);
}

main, .container, .page, .onb-shell{position:relative;z-index:1}

/* ━━━━━━━━━━━━━━━ TYPOGRAPHY ━━━━━━━━━━━━━━━ */

h1, h2{
  color:var(--text-primary);
}

/* Editorial display for hero-style headlines on simple pages.
   Pages with custom h1/h2 styles will override via their own rules. */
.page-h1,
main > h1,
main > section > h1,
main > section.hero h1,
main > section.card h1{
  font-family:'Instrument Serif', 'EB Garamond', Georgia, serif;
  font-weight:400;
  letter-spacing:-0.025em;
  line-height:1.05;
}

.eyebrow,
.breadcrumb,
.section-lead small,
.kicker{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:11px;
  color:var(--text-muted);
}

/* ━━━━━━━━━━━━━━━ COMMON SURFACES ━━━━━━━━━━━━━━━ */

/* Generic .card class used on many pages */
.card{
  background:var(--bg-card) !important;
  border:1px solid var(--border-color) !important;
  border-radius:4px !important;
  box-shadow:none !important;
  color:var(--text-primary);
}
.card h2,.card h3{color:var(--text-primary)}

/* form controls — apply to ALL pages */
input[type="text"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="date"],
input[type="search"],
input[type="tel"],
input[type="password"],
textarea,
select{
  background:var(--bg-input) !important;
  border:1px solid var(--border-color) !important;
  color:var(--text-primary) !important;
  border-radius:4px;
  font-family:inherit;
}
input::placeholder,textarea::placeholder{color:var(--text-muted) !important}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--accent) !important;
}
label{
  color:var(--text-secondary);
}

/* ━━━━━━━━━━━━━━━ COMMON CONTROLS ACROSS PAGES ━━━━━━━━━━━━━━━ */

/* lang toggle — used on index, recruiters, etc. */
.lang-toggle{
  background:var(--bg-secondary) !important;
  border-color:var(--border-color) !important;
  border-radius:0 !important;
}
.lang-toggle-btn{
  color:var(--text-muted) !important;
  font-family:'JetBrains Mono', monospace !important;
  border-radius:0 !important;
}
.lang-toggle-btn:hover{
  color:var(--text-primary) !important;
  background:var(--bg-card) !important;
  border-color:transparent !important;
}
.lang-toggle-btn.active{
  background:var(--v3-acid) !important;
  color:var(--bg-primary) !important;
  border-color:var(--v3-acid) !important;
}

.btn-auth{
  font-family:'JetBrains Mono', monospace !important;
  font-size:11px !important;letter-spacing:0.1em !important;text-transform:uppercase !important;
  background:var(--bg-secondary) !important;color:var(--text-primary) !important;
  border:1px solid var(--border-color) !important;
  border-radius:0 !important;
}
.btn-auth:hover{
  border-color:var(--v3-acid) !important;color:var(--v3-acid) !important;
  background:var(--bg-card) !important;
}
.btn-auth.telegram{border-color:var(--v3-ice) !important;color:var(--v3-ice) !important}
.btn-auth.telegram:hover{background:var(--v3-ice) !important;color:var(--bg-primary) !important}

.back-link{
  font-family:'JetBrains Mono', monospace;
  letter-spacing:0.1em;font-size:11px;text-transform:uppercase;
  color:var(--text-muted);text-decoration:none;
}
.back-link:hover{color:var(--v3-acid)}

/* primary button look on any page with .btn or .btn-primary */
.btn-primary, button.btn.btn-primary, a.btn.btn-primary{
  background:var(--accent) !important;
  color:#fff !important;
  border:1px solid var(--accent) !important;
  border-radius:4px;
}
.btn-secondary{
  background:transparent;
  color:var(--text-primary);
  border:1px solid var(--border-color);
}

/* tables */
table{color:var(--text-primary)}
table th{
  background:var(--bg-secondary);
  color:var(--text-muted);
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:11px;
  border-bottom:1px solid var(--border-color);
}
table td{
  background:transparent;
  border-bottom:1px solid var(--border-color);
}

/* modals (tracker, etc.) */
.modal-overlay{background:rgba(8,7,5,0.78) !important;backdrop-filter:blur(6px)}
.modal{
  background:var(--bg-card) !important;
  border:1px solid var(--border-color) !important;
  color:var(--text-primary);
}
.modal h2,.modal h3{color:var(--text-primary)}

/* toasts already styled by ui_dialogs partial — dark themed by default */

/* page-level hero / breadcrumb / lead text */
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--v3-acid)}

/* ━━━━━━━━━━━━━━━ ACCESSIBILITY ━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce){
  body::before,body::after{animation:none}
}

/* selection */
::selection{background:var(--v3-acid);color:var(--bg-primary)}
::-moz-selection{background:var(--v3-acid);color:var(--bg-primary)}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-secondary)}
::-webkit-scrollbar-thumb{background:var(--border-color);border:2px solid var(--bg-secondary)}
::-webkit-scrollbar-thumb:hover{background:var(--v3-mute)}