/* Vasora shared stylesheet
   Theme tokens, reset, nav and shared layout used by employers.html and talent.html.
   Page specific CSS stays inline in each page. */

/* ===== TOKENS ===== */
:root {
  --bg:             #faf8f5;
  --bg2:            #f0ebe3;
  --surface:        #ffffff;
  --primary:        #c96a00;
  --primary-light:  #f28a1e;
  --primary-dim:    rgba(201,106,0,0.10);
  --text:           #1c1410;
  --text-2:         #4a3520;
  --text-muted:     #7a6048;
  --border:         rgba(120,80,30,0.16);
  --border-strong:  rgba(201,106,0,0.32);
  --card:           #ffffff;
  --shadow-sm:      0 1px 4px rgba(60,30,0,0.07);
  --shadow-md:      0 6px 28px rgba(60,30,0,0.09);
  --feat-bg:        #1c1410;
  --feat-text:      #fee4c0;
  --feat-muted:     #c4956a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #161412;
    --bg2:           #1e1a16;
    --surface:       #242018;
    --primary:       #c96a00;
    --primary-light: #f28a1e;
    --primary-dim:   rgba(201,106,0,0.13);
    --text:          #fee4c0;
    --text-2:        #e8c898;
    --text-muted:    #c4956a;
    --border:        rgba(201,106,0,0.18);
    --border-strong: rgba(242,138,30,0.38);
    --card:          rgba(254,228,192,0.04);
    --shadow-sm:     0 1px 4px rgba(0,0,0,0.28);
    --shadow-md:     0 6px 28px rgba(0,0,0,0.38);
    --feat-bg:       rgba(201,106,0,0.14);
    --feat-text:     #fee4c0;
    --feat-muted:    #c4956a;
  }
}
:root[data-theme="light"] {
  --bg:            #faf8f5;
  --bg2:           #f0ebe3;
  --surface:       #ffffff;
  --primary:       #c96a00;
  --primary-light: #f28a1e;
  --primary-dim:   rgba(201,106,0,0.10);
  --text:          #1c1410;
  --text-2:        #4a3520;
  --text-muted:    #7a6048;
  --border:        rgba(120,80,30,0.16);
  --border-strong: rgba(201,106,0,0.32);
  --card:          #ffffff;
  --shadow-sm:     0 1px 4px rgba(60,30,0,0.07);
  --shadow-md:     0 6px 28px rgba(60,30,0,0.09);
  --feat-bg:       #1c1410;
  --feat-text:     #fee4c0;
  --feat-muted:    #c4956a;
}
:root[data-theme="dark"] {
  --bg:            #161412;
  --bg2:           #1e1a16;
  --surface:       #242018;
  --primary:       #c96a00;
  --primary-light: #f28a1e;
  --primary-dim:   rgba(201,106,0,0.13);
  --text:          #fee4c0;
  --text-2:        #e8c898;
  --text-muted:    #c4956a;
  --border:        rgba(201,106,0,0.18);
  --border-strong: rgba(242,138,30,0.38);
  --card:          rgba(254,228,192,0.04);
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.28);
  --shadow-md:     0 6px 28px rgba(0,0,0,0.38);
  --feat-bg:       rgba(201,106,0,0.14);
  --feat-text:     #fee4c0;
  --feat-muted:    #c4956a;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px; font-weight: 400;
  background: var(--bg); color: var(--text);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; line-height: 1.65;
  padding-bottom: 70px;
}

/* ===== NAV ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 48px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nav-logo img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-strong); }
.nav-logo-name {
  font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: 0.3px;
  background: linear-gradient(135deg, var(--text) 30%, var(--primary-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.nav-badge {
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--primary); border: 1px solid var(--border-strong);
  padding: 3px 10px; border-radius: 50px;
}
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: flex; align-items: center;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 50px; padding: 3px;
}
.lang-btn {
  padding: 5px 12px; border-radius: 50px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; background: transparent; color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
}
.lang-btn.active { background: var(--primary); color: #fff; }
.theme-btn {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 15px;
  transition: border-color 0.15s, color 0.15s;
}
.theme-btn:hover { border-color: var(--border-strong); color: var(--text); }
.nav-cta {
  background: var(--primary); color: #fff; padding: 10px 22px; border-radius: 50px;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.nav-cta:hover { background: var(--primary-light); transform: translateY(-1px); }

/* ===== SHARED LAYOUT ===== */
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.eyebrow {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--primary); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(26px, 3.5vw, 40px); font-weight: 700;
  letter-spacing: -0.5px; line-height: 1.15; text-wrap: balance; margin-bottom: 14px;
}
.sec-sub {
  font-size: 16px; color: var(--text-muted); line-height: 1.75; max-width: 560px;
}
.btn-primary {
  display: inline-block; background: var(--primary); color: #fff;
  padding: 14px 28px; border-radius: 50px; font-size: 15px; font-weight: 700;
  text-decoration: none; box-shadow: 0 4px 20px rgba(201,106,0,0.28);
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--primary-light); transform: translateY(-2px); }
.btn-ghost {
  display: inline-block; background: transparent; color: var(--text-muted);
  padding: 14px 24px; border-radius: 50px; font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--border); transition: all 0.2s;
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }