/* ============================================================
   KosovaJob redesign — design tokens
   Source of truth: Figma "Kosova Jobs Platform" (VNQbgqeHi99XX9BQd95AUA),
   local styles extracted 2026-07-26. Do not invent values here —
   change Figma first, then update this file.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/new-ui/fonts/PlusJakartaSans-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/new-ui/fonts/Montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Self-hosted 2026-09-11: extracted from the bundles' own embedded @font-face
   data (Latin subset only, matches this site's Albanian/English content —
   the bundles also ship cyrillic/vietnamese/greek subsets that are not
   needed here). Resolves the "Mulish not self-hosted" deviation recorded
   throughout new-ui/ (tokens.css, chome.css, employer.css, base.css,
   login.css, recruitment.css, simba-score.css, b1-public.css). */
@font-face {
  font-family: 'Mulish';
  src: url('/new-ui/fonts/mulish-normal.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('/new-ui/fonts/mulish-italic.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --kj-primary: #FF5067;          /* Primary */
  --kj-secondary: #EBB46A;        /* Secondary (gold) */
  --kj-accent: #002045;           /* Accent (navy) — footer bg */
  --kj-gradient: linear-gradient(90deg, #FFC163 0%, #FF5168 100%);
  --kj-scrim-primary: rgba(255, 80, 103, 0.04);   /* Scrim 1 */

  /* Surfaces */
  --kj-surface: #FFFFFF;          /* Surface/Primary */
  --kj-surface-warm: #FFFEFD;     /* Surface/Primary (warm variant: cards, search pill) */
  --kj-surface-2: #F4F6F9;        /* Surface/Secondary — page/hero bg */
  --kj-surface-3: #DFE3E8;        /* Surface/Tertiary */
  --kj-scrim-3: #FAFAFF;          /* Scrim3 */

  /* Text */
  --kj-text: #151737;             /* OnSurface/Primary */
  --kj-text-2: #2E3159;           /* OnSurface/Secondary */
  --kj-text-3: #444876;           /* OnSurface/Tertiary */
  --kj-text-disabled: #BBBBBB;
  --kj-text-on-dark: #FFFFFF;
  --kj-text-on-dark-2: #DFE3E8;   /* footer secondary text */

  /* Lines */
  --kj-stroke: #ECECF2;
  --kj-line: #E6E6E6;

  /* Status */
  --kj-success: #079455;

  /* Effects */
  --kj-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --kj-shadow-card: 0 4px 16px rgba(16, 24, 40, 0.06);

  /* Type */
  --kj-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kj-font-2: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kj-font-mulish: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body face for the b1/b2/b3 bundles, scoped — see base.css/employer.css */

  /* Radii */
  --kj-r-sm: 8px;
  --kj-r-md: 12px;      /* section header bars */
  --kj-r-lg: 16px;      /* cards, banners */
  --kj-r-xl: 24px;      /* hero panels, nav buttons */
  --kj-r-pill: 999px;   /* search pill, buttons */

  /* Layout (Figma desktop frame: 1512, content 1336 = 88px gutters) */
  --kj-container: 1336px;
  --kj-gutter: 24px;
  --kj-nav-h: 96px;
}

/* ============================================================
   BATCH 3 — additive role tokens (2026-09-09)

   The Batch 3 design bundle ships its OWN palette, which diverges from the
   batch 1-2 sheet above on nine values (coral #FE616C vs #FF5067, navy
   #041E42 vs #002045, stroke #E2E7EF vs #ECECF2, title #041E42 vs #151737,
   body #313C53 vs #2E3159, muted #6B7890 vs #444876, page bg #F6F8FB vs
   #F4F6F9, success #1E9E6A vs #079455, body face Mulish vs Montserrat).

   DECISION: the palette is NOT forked. Nothing above is changed, because the
   shared chrome is rendered on 43 pages — 32 of them are batch 1-2 or public
   pages — and a hue shift in tokens.css would restyle every one of them. What
   IS added below is the set of Batch-3 roles that have no batch-1/2
   equivalent (gold ramp, coral ramp, violet accent, the three new shadows,
   the ease curve, the FIT band colours). Batch-3 PAGE stylesheets may use
   these freely; the chrome stays on --kj-primary so the header does not sit
   at a different hue from the page under it.

   Every value below was read from the bundle's :root at 1512 (working copy
   /tmp/.../scratchpad/b3.html), not from the token sheet.
   ============================================================ */
:root {
  /* Coral ramp (design --coral-*) */
  --kj-coral-50:  #FFF1EF;
  --kj-coral-100: #FFE0DC;
  --kj-coral-200: #FFC2BC;
  --kj-coral-300: #FF9D96;
  --kj-coral-400: #FE8079;
  --kj-coral-500: #FE616C;
  --kj-coral-600: #EE4753;
  --kj-coral-700: #CE3340;

  /* Gold ramp (design --gold-*) */
  --kj-gold-50:  #FFF8EC;
  --kj-gold-100: #FFEFD2;
  --kj-gold-200: #FFE0AC;
  --kj-gold-300: #FFD195;
  --kj-gold-400: #FFC473;
  --kj-gold-500: #F7AF4F;
  --kj-gold-600: #E0942F;
  --kj-gold-text: #B7791F;   /* the fg the design pairs with gold-100 chips */

  /* Violet accent — a literal in the bundle, not a design token */
  --kj-violet:     #6941C6;
  --kj-violet-bg:  #F4EBFF;
  --kj-violet-line:#E9D7FE;

  /* Batch-3 neutrals, exposed for page stylesheets that need the design's
     exact values (the chrome does not use them). */
  --kj-b3-navy:    #041E42;
  --kj-b3-navy-800:#0A2C57;
  --kj-b3-page:    #F6F8FB;
  --kj-b3-sunken:  #EEF1F6;
  --kj-b3-stroke:  #E2E7EF;
  --kj-b3-stroke-2:#CBD3E0;
  --kj-b3-title:   #041E42;
  --kj-b3-body:    #313C53;
  --kj-b3-muted:   #6B7890;
  --kj-b3-faint:   #9BA7BC;
  --kj-b3-gradient: linear-gradient(120deg, #FFC473 0%, #FE616C 100%);

  /* Status (Batch 3 values, kept namespaced so --kj-success is untouched) */
  --kj-b3-success:    #1E9E6A;
  --kj-b3-success-bg: #E7F6EF;
  --kj-b3-warning:    #F2A94E;
  --kj-b3-warning-bg: #FEF4E4;
  --kj-b3-danger:     #E5484D;
  --kj-b3-danger-bg:  #FDECEC;
  --kj-b3-info:       #2A6FDB;
  --kj-b3-info-bg:    #E9F0FC;

  /* FIT bands. ONE rule, per the understanding phase's recommendation:
     >=80 green, >=60 gold, <60 coral; grey is reserved for "no score at all"
     so a colour never has two meanings. */
  --kj-fit-strong:  #1E9E6A;
  --kj-fit-good:    #F7AF4F;
  --kj-fit-weak:    #FE616C;
  --kj-fit-unknown: #CBD3E0;

  /* Effects */
  --kj-shadow-sm:     0 2px 6px rgba(4, 30, 66, .07);
  --kj-shadow-md:     0 8px 20px -6px rgba(4, 30, 66, .12);
  --kj-shadow-lg:     0 18px 40px -12px rgba(4, 30, 66, .18);
  --kj-shadow-xl:     0 30px 70px -20px rgba(4, 30, 66, .28);
  --kj-shadow-accent: 0 10px 24px -8px rgba(254, 97, 108, .45);
  --kj-ring:          0 0 0 3px rgba(254, 97, 108, .30);

  /* Motion */
  --kj-ease-out: cubic-bezier(.22, .61, .36, 1);
  --kj-dur-fast: 130ms;
  --kj-dur-base: 200ms;
  --kj-dur-slow: 320ms;

  /* Layout — Batch 3 wraps. The header/sub-nav use --kj-b3-container. */
  --kj-b3-container: 1280px;
  --kj-b3-gutter: 32px;
  --kj-b3-nav-h: 72px;
  --kj-b3-subnav-h: 48px;

  /* z-index reservations for the shared chrome. The EPI FAB partial owns 86
     (design value); the drawer/scrim above it deliberately covers it. */
  --kj-z-fab: 86;
}

/* ============================================================
   BATCH 1 — additive tokens for the PUBLIC pages (2026-09-10)

   Same rule as the Batch 3 block above: nothing already declared is changed.
   The Batch 1 bundle was dumped from its own :root at 1512 (working copy
   /tmp/.../scratchpad/b1.html) and reconciled against the block above — it
   ships the SAME palette, so the coral/gold ramps, the neutrals, the status
   pairs, the four shadows, --kj-ring, --kj-ease-out and the durations are
   REUSED as-is and are deliberately not repeated here.

   What is added is only what Batch 1 needs and Batch 3 did not have:
     * the 1200px public wrap (Batch 3 measured 1280 and is live on it, so
       --kj-b3-container is untouched),
     * the navy/gray ramp stops the gradients and the footer need,
     * the two extra gradients, the navy ring, the ease-in-out curve,
     * a namespaced --kj-b3-shadow-xs (the legacy --kj-shadow-xs on line 54 is
       a DIFFERENT value, 0 1px 2px rgba(16,24,40,.05), and 32 pages use it),
     * the design's radius / type / space scales, which tokens.css had none of
       (the legacy --kj-r-* scale is 8/12/16/24 and is also left alone).

   TYPOGRAPHY. The bundle pairs Mulish (body) with Plus Jakarta Sans
   (display). UPDATE 2026-09-11: Mulish is now self-hosted too (extracted
   from the bundles' own embedded font data, new-ui/fonts/mulish-*.woff2,
   see the @font-face pair above) and applied via --kj-font-mulish, scoped to
   body:has(.kj-nav-wrap--pub) in base.css so it never reaches the 59-page
   legacy/admin surface that still relies on the bare `body` rule.
   ============================================================ */
:root {
  /* Layout — Batch 1 artboards measure max-width:1200px / 32px gutters,
     i.e. a 1136px content column (measured in the DOM: header inner
     [151,0,1200,72], content 183..1319). */
  --kj-b1-container: 1200px;
  --kj-b1-narrow:    840px;

  /* Page ground. The public artboards paint --bg-page = #FFFEFD; #F6F8FB is
     --bg-subtle and is used by sections/rails on top of it. */
  --kj-b1-page:   #FFFEFD;
  --kj-b3-white:  #FFFEFD;

  /* Navy + gray ramp stops the b3 block did not need */
  --kj-navy-950: #03152E;
  --kj-navy-700: #133B6E;
  --kj-navy-600: #1F4E87;
  --kj-navy-500: #2F639F;
  --kj-gray-600: #4B566C;
  --kj-gray-800: #1E2940;
  --kj-gray-900: #0C1730;
  --kj-charcoal: #1E1E1E;

  /* On-navy text roles (footer, navy panels, navy heroes) */
  --kj-b3-on-navy:       #FFFEFD;
  --kj-b3-on-navy-muted: #A9B6CC;

  /* Gradients */
  --kj-b3-gradient-navy: linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%);
  --kj-b3-gradient-soft: linear-gradient(120deg, #FFD79A 0%, #FE8079 100%);

  /* Effects. --kj-b3-shadow-xs is a namespaced TWIN of --kj-shadow-xs, not a
     replacement — the two carry different values on purpose. */
  --kj-b3-shadow-xs: 0 1px 2px rgba(4, 30, 66, .06);
  --kj-ring-navy:    0 0 0 3px rgba(4, 30, 66, .18);
  --kj-ease-in-out:  cubic-bezier(.65, .05, .36, 1);

  /* Batch-1 radius scale. --kj-r-* above is 8/12/16/24 and is used by 32
     legacy pages, so this is namespaced rather than overwritten.
     --kj-r-pill (999px) is shared and not repeated. */
  --kj-b1-r-xs:  6px;
  --kj-b1-r-sm:  10px;
  --kj-b1-r-md:  14px;
  --kj-b1-r-lg:  20px;
  --kj-b1-r-xl:  28px;
  --kj-b1-r-2xl: 36px;

  /* Type scale — bundle --fs- / --lh- / --ls- ramps, resolved to px */
  --kj-fs-display-2xl: 72px;
  --kj-fs-display-xl:  56px;
  --kj-fs-display-lg:  44px;
  --kj-fs-h1:          36px;
  --kj-fs-h2:          28px;
  --kj-fs-h3:          22px;
  --kj-fs-h4:          18px;
  --kj-fs-body-lg:     17px;
  --kj-fs-body:        16px;
  --kj-fs-body-sm:     15px;
  --kj-fs-caption:     13px;
  --kj-fs-overline:    12px;
  --kj-lh-tight:   1.08;
  --kj-lh-snug:    1.25;
  --kj-lh-normal:  1.5;
  --kj-lh-relaxed: 1.65;
  --kj-ls-tighter:  -.03em;
  --kj-ls-tight:    -.015em;
  --kj-ls-wide:      .02em;
  --kj-ls-overline:  .08em;

  /* 4px space scale (bundle --space-*) */
  --kj-space-1:  4px;
  --kj-space-2:  8px;
  --kj-space-3:  12px;
  --kj-space-4:  16px;
  --kj-space-5:  20px;
  --kj-space-6:  24px;
  --kj-space-8:  32px;
  --kj-space-10: 40px;
  --kj-space-12: 48px;
  --kj-space-16: 64px;
  --kj-space-20: 80px;
  --kj-space-24: 96px;
}