/* ============================================================
   Jobit Design System — Colors & Type
   Brand primary: #4364AD (cobalt/royal blue, sampled from logo)
   ============================================================ */


:root {
  /* -------- PRIMARY / BRAND -------- */
  --jobit-blue:        #4364AD;   /* brand primary (sampled from logo) */
  --jobit-blue-50:     #EEF2FA;
  --jobit-blue-100:    #D9E1F2;
  --jobit-blue-200:    #B3C3E4;
  --jobit-blue-300:    #8DA4D6;
  --jobit-blue-400:    #6884C0;
  --jobit-blue-500:    #4364AD;   /* = --jobit-blue */
  --jobit-blue-600:    #36528E;
  --jobit-blue-700:    #2A4071;
  --jobit-blue-800:    #1F2F54;
  --jobit-blue-900:    #141F38;

  /* Deep "navy" used for body copy on light bg */
  --jobit-navy:        #1F2F54;

  /* -------- NEUTRALS -------- */
  --neutral-0:         #FFFFFF;
  --neutral-25:        #FAFBFD;
  --neutral-50:        #F5F7FA;
  --neutral-100:       #EDF0F5;
  --neutral-200:       #DDE3EC;
  --neutral-300:       #C3CCDA;
  --neutral-400:       #9AA5B8;
  --neutral-500:       #6D798F;
  --neutral-600:       #4E596D;
  --neutral-700:       #364055;
  --neutral-800:       #222B3D;
  --neutral-900:       #131827;

  /* -------- SEMANTIC -------- */
  --success:           #2E9D6F;
  --success-bg:        #E2F5ED;
  --warning:           #E8A53B;
  --warning-bg:        #FCF2DF;
  --danger:            #D9544B;
  --danger-bg:         #FBE6E4;
  --info:              #4364AD;
  --info-bg:           #EEF2FA;

  /* -------- ACCENTS for sub-brands -------- */
  /* Jobit itself stays blue; Moox / VBR / etc. all live inside the same
     blue family, differentiated by tone + typography weight rather than
     separate hues. These are reserved tokens in case needed. */
  --accent-moox:       #4364AD;
  --accent-vbr:        #4364AD;

  /* -------- FG / BG SEMANTIC -------- */
  --bg:                var(--neutral-0);
  --bg-subtle:         var(--neutral-50);
  --bg-muted:          var(--neutral-100);
  --bg-inverse:        var(--jobit-blue);
  --bg-inverse-deep:   var(--jobit-blue-700);

  --fg:                var(--neutral-900);
  --fg-strong:         var(--jobit-navy);
  --fg-muted:          var(--neutral-600);
  --fg-subtle:         var(--neutral-500);
  --fg-on-brand:       var(--neutral-0);
  --fg-link:           var(--jobit-blue);
  --fg-link-hover:     var(--jobit-blue-600);

  --border:            var(--neutral-200);
  --border-strong:     var(--neutral-300);
  --border-brand:      var(--jobit-blue);

  /* -------- TYPE — FAMILIES -------- */
  /* Montserrat is the official Jobit typeface (provided by client). */
  --font-sans:        'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:     'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:        ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;

  /* -------- TYPE — SCALE (rem-based, 16px root) -------- */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   1.875rem;  /* 30 */
  --fs-3xl:   2.25rem;   /* 36 */
  --fs-4xl:   3rem;      /* 48 */
  --fs-5xl:   3.75rem;   /* 60 */
  --fs-6xl:   4.5rem;    /* 72 */

  /* -------- TYPE — WEIGHT -------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-ultra:   900;

  /* -------- TYPE — LINE-HEIGHT + TRACKING -------- */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-ultra:   0.12em;   /* small caps eyebrows */

  /* -------- SPACING (4pt grid) -------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* -------- RADII -------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* -------- SHADOWS -------- */
  --shadow-xs: 0 1px 2px rgba(31, 47, 84, 0.06);
  --shadow-sm: 0 2px 6px rgba(31, 47, 84, 0.08);
  --shadow-md: 0 8px 20px rgba(31, 47, 84, 0.10);
  --shadow-lg: 0 20px 48px rgba(31, 47, 84, 0.14);
  --shadow-xl: 0 32px 80px rgba(31, 47, 84, 0.18);
  --shadow-brand: 0 10px 24px rgba(67, 100, 173, 0.28);
  --shadow-focus: 0 0 0 4px rgba(67, 100, 173, 0.20);

  /* -------- MOTION -------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
}

/* ============================================================
   Element defaults — apply semantic styles on real tags
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--fw-regular); }

/* :where() lowers specificity to 0 so wrapper `color` always wins on inverted surfaces */
:where(h1, .h1) {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-black);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-5);
}
:where(h2, .h2) {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-4);
}
:where(h3, .h3) {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-3);
}
:where(h4, .h4) {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-3);
}
:where(h5, .h5) {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  margin: 0 0 var(--sp-2);
}

.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--jobit-blue);
}

:where(p, .body) {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

/* ============================================================
   Utility tokens
   ============================================================ */
.jobit-surface-brand    { background: var(--jobit-blue); color: var(--fg-on-brand); }
.jobit-surface-muted    { background: var(--bg-muted); }
.jobit-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}