/* Split from legacy style.css - core tokens, base, utilities and typography */

/* =========================================================
1) TOKENS
========================================================= */
:root{
  --t-fast: .15s ease;
  --t-mid: .18s ease;

  --trans-smooth: transform var(--t-fast),
                  box-shadow var(--t-fast),
                  border-color var(--t-fast),
                  background var(--t-fast),
                  filter var(--t-fast);

  --primary:#2563EB;
  --secondary:#1D4ED8;
  --light:#F5F8FF;

  --brand:var(--primary);
  --brand2:var(--secondary);
  --brand3:#0EA5E9;

  --ink:#0B1220;
  --muted:#64748B;

  --surface:#fff;
  --surface-2:#F8FAFC;
  --line:rgba(2,6,23,.08);

  --r-sm:14px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:34px;

  --sh-xs:0 8px 18px rgba(2,6,23,.06);
  --sh-sm:0 14px 34px rgba(2,6,23,.08);
  --sh-md:0 24px 70px rgba(2,6,23,.12);
  --sh-hi:0 34px 110px rgba(2,6,23,.16);

  --dark:var(--ink);
  --bg:var(--surface);
  --card:var(--surface);
  --border:var(--line);

  --radius-sm:var(--r-sm);
  --radius-md:var(--r-md);
  --radius-lg:var(--r-lg);

  --shadow-xs:var(--sh-xs);
  --shadow-sm:var(--sh-sm);
  --shadow-md:var(--sh-md);
  --shadow-hi:var(--sh-hi);

  --accent-color:var(--primary);
  --heading-color:var(--ink);
  --contrast-color:#fff;

  --overlay-ink:rgba(2,6,23,1);
  --overlay-bar-h:44px;

  --vw-border:rgba(15,23,42,.10);
  --vw-shadow:0 18px 55px rgba(2,6,23,.14);
  --vw-radius-xl:18px;
  --vw-radius-pill:999px;
}

/* =========================================================
TYPOGRAPHY SCALE
========================================================= */
:root{
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-display: clamp(2.4rem, 4vw, 3.75rem);
  --fs-h1: clamp(2rem, 3vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.2vw, 2.25rem);
  --fs-h3: clamp(1.35rem, 1.6vw, 1.75rem);
  --fs-h4: clamp(1.15rem, 1.2vw, 1.375rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.9375rem;
  --lh-tight: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.7;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 28px rgba(2,6,23,.06);
  --shadow-card: 0 16px 40px rgba(2,6,23,.08);
  --shadow-float: 0 24px 70px rgba(2,6,23,.12);
  --shadow-strong: 0 34px 110px rgba(2,6,23,.16);
}

/* =========================================================
2) BASE
========================================================= */
html,body{height:100%;}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--font-sans);
  line-height:var(--lh-heading);
  letter-spacing:-0.02em;
  color:var(--heading-color);
}
h1,.h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-0.04em;}
h2,.h2,.section-title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.035em;}
h3,.h3{font-size:var(--fs-h3);font-weight:750;letter-spacing:-0.03em;}
h4,.h4{font-size:var(--fs-h4);font-weight:750;}
h5,.h5{font-size:var(--fs-h5);font-weight:700;}
h6,.h6{font-size:var(--fs-h6);font-weight:700;}
p,.text-muted,.muted{font-size:var(--fs-body);line-height:var(--lh-body);}
small,.small{font-size:var(--fs-body-sm);line-height:1.6;}
.hero-title,
.hero-image .headline{
  font-size:var(--fs-display);
  line-height:var(--lh-tight);
  letter-spacing:-0.05em;
}
/* =========================================================
3) GLOBAL UTILITIES (premium only)
========================================================= */
.theme-premium .text-primary{color:var(--primary)!important;}
.theme-premium .bg-primary{background:var(--primary)!important;}
.theme-premium .rounded-0{border-radius:var(--radius-md)!important;}
@media (min-width:576px){.w-sm-auto{width:auto;}}

.theme-premium :is(
  .job-item,.cardx,.post-item,.recent-blog-posts .post-item,
  .cat-card,.panel-card,.about-mini,.step,.job-search-card,
  .blog-details-page .sidebar .categories-widget li a,
  #blog-comments.blog-comments .comment-actions .action-btn,
  .employer-dashboard a.status-item
){transition:var(--trans-smooth);}

/* =========================================================
3.5) CARD SYSTEM (premium)
========================================================= */
.theme-premium :where(
  .about-card,.about-steps,.job-search-card,.cardx,
  .blog-details-page .article,.blog-details-page .sidebar .widget-item,
  #blog-comments.blog-comments .comment-box
){
  --card-bg:var(--surface);
  --card-bd:1px solid var(--border);
  --card-r:22px;
  --card-sh:var(--shadow-sm);

  background:var(--card-bg);
  border:var(--card-bd);
  border-radius:var(--card-r);
  box-shadow:var(--card-sh);
}
.theme-premium .job-search-card{
  --card-r:var(--r-xl);
  --card-bd:1px solid rgba(37,99,235,.10);
  --card-sh:0 22px 60px rgba(2,6,23,.12);
}
.theme-premium .cardx{
  --card-r:var(--r-lg);
  --card-bd:1px solid var(--line);
  --card-sh:var(--sh-sm);
}

/* Blog page tokens */
.blog-details-page{
  --bd-ink:#0f172a;
  --bd-muted:#64748b;
  --bd-line:rgba(2,6,23,.10);
  --bd-bg:#f8fafc;
  --bd-card:#fff;
  --bd-primary:#2563eb;
  --bd-shadow:0 16px 40px rgba(2,6,23,.08);
  --bd-shadow-soft:0 10px 28px rgba(2,6,23,.06);
}
.blog-details-page .article{
  --card-r:22px;
  --card-bd:1px solid var(--bd-line);
  --card-sh:var(--bd-shadow);
}
.blog-details-page .sidebar .widget-item{
  --card-r:22px;
  --card-bd:1px solid rgba(15,23,42,.10);
  --card-sh:var(--bd-shadow-soft);
}
#blog-comments.blog-comments .comment-box{
  --card-r:22px;
  --card-bd:1px solid rgba(15,23,42,.10);
  --card-sh:var(--shadow-sm);
}

/* =========================================================
4) BACK TO TOP + SPINNER
========================================================= */
.back-to-top{position:fixed;display:none;right:45px;bottom:45px;z-index:99;}
#spinner{
  display:flex;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease-out,visibility 0s linear .5s;
  z-index:99999;
}
#spinner.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .5s ease-out,visibility 0s linear 0s;
}

/* =========================================================
5) BUTTONS
========================================================= */
.btn{
  font-family:Inter,sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  border-radius:var(--radius-md);
  transition:transform var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast);
}
.btn.btn-primary,.btn.btn-secondary{color:#fff;}
.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
  box-shadow:var(--shadow-md);
}
.btn-secondary{
  background:var(--secondary);
  border-color:var(--secondary);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
  box-shadow:var(--shadow-md);
}
.btn-dark{box-shadow:var(--shadow-sm);}
.btn-square{width:38px;height:38px;}
.btn-sm-square{width:32px;height:32px;}
.btn-lg-square{width:48px;height:48px;}
.btn-square,.btn-sm-square,.btn-lg-square{
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:normal;
  border-radius:14px;
}

.btn-prem{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  letter-spacing:.01em;
  line-height:1;
  font-size:.92rem;
  white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,filter .16s ease;
}
.btn-prem i{font-size:.92em;opacity:.95;}
.btn-grad{
  border:1px solid rgba(37,99,235,.18);
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 12px 26px rgba(37,99,235,.16);
}
.btn-grad:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 18px 34px rgba(37,99,235,.20);
  color:#fff;
}
.btn-ghost{
  color:rgba(11,18,32,.92);
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{
  transform:translateY(-1px);
  background:rgba(2,6,23,.01);
  border-color:rgba(15,23,42,.18);
  box-shadow:var(--shadow-sm);
}
.btn-soft{
  color:rgba(11,18,32,.86);
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.02);
}
.btn-soft:hover{
  transform:translateY(-1px);
  background:rgba(2,6,23,.03);
  border-color:rgba(15,23,42,.14);
  box-shadow:var(--shadow-xs);
}
.btn-prem--xs,.smallbtn{
  padding:.46rem .72rem;
  border-radius:11px;
  font-size:.86rem;
  box-shadow:none;
}

.btn-view-all:hover{
  background:#243746;
  border-color:#243746;
  color:#fff !important;
}

.btn-nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:0 14px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  letter-spacing:-0.01em;
  color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(37,99,235,.22);
  transition:transform var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast);
}
.btn-nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 48px rgba(37,99,235,.30);
  filter:brightness(.98);
}
.btn-nav-cta i.fa-arrow-right{font-size:12px;}

.theme-premium :is(.form-control,.form-select):focus{outline:0;}

/* =========================================================
20) A11Y FOCUS RING
========================================================= */
:where(a,button,.btn,.btn-prem,.btn-filter-icon,.cat-nav,.action-btn,.form-control,.form-select):focus-visible{
  outline:none;
  box-shadow:0 0 0 .25rem rgba(37,99,235,.18);
}

/* =========================================================
21) HOVER PERFORMANCE
========================================================= */
@media (hover:hover){
  .job-item:hover,.post-item:hover,.recent-blog-posts .post-item:hover,.cardx:hover{will-change:transform;}
}

/* =========================================================
22) REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto;}
  .cardx,.btn-prem,.btn,.post-item,.recent-blog-posts .post-item{transition:none;}
}

/* =========================================================
23) PERF PACK
========================================================= */
@media (hover:none){
  .hero-panel,.blog-details-page .meta-categories{-webkit-backdrop-filter:none;backdrop-filter:none;}
  .blog-details-page .meta-categories{background:rgba(255,255,255,.96);}
  .hero-panel{box-shadow:0 14px 40px rgba(2,6,23,.18);}
}
@supports (content-visibility:auto){
  .job-feed,.recent-blog-posts,#blog-comments,.blog-details-page .sidebar{
    content-visibility:auto;
    contain-intrinsic-size:1px 900px;
  }
}