/* ============================================================
   JIBSER Design System — Colors, Type, Spacing, Effects
   Extracted from the JIBSER Figma (Web App)
   ============================================================ */

/* Poppins (primary UI) is self-hosted from /fonts (brand-supplied TTFs).
   Inter (secondary) + Roboto (tabular/numerals) load from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

@font-face { font-family:'Poppins'; src:url('fonts/poppins-light-webfont.woff2')    format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/poppins-regular-webfont.woff2')  format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/poppins-medium-webfont.woff2')   format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/poppins-semibold-webfont.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('fonts/poppins-bold-webfont.woff2')     format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* ---------- Core brand ---------- */
  --jib-navy:        #0F093C;   /* primary brand / sidebar / headings */
  --jib-navy-deep:   #080524;   /* darkest (image frames, high contrast) */
  --jib-orange:      #FF621B;   /* accent — CTAs, brand mark, highlights */
  --jib-white:       #FFFFFF;

  /* ---------- Neutrals (grays) ---------- */
  --jib-gray-50:     #F7F8FB;   /* hovered row */
  --jib-gray-100:    #ECEEF5;   /* app background, borders */
  --jib-gray-150:    #E4E7EF;   /* soft border alt */
  --jib-gray-200:    #EAE9F2;   /* divider */
  --jib-gray-300:    #D6D6D6;   /* neutral border */
  --jib-gray-400:    #BBBBD0;   /* muted border */
  --jib-gray-500:    #838395;   /* secondary text / icon mute */
  --jib-gray-600:    #666666;   /* body alt */
  --jib-gray-700:    #2F2E34;   /* text strong alt */
  --jib-gray-800:    #141414;   /* text black */
  --jib-gray-900:    #000000;

  /* Sidebar "slate" tint — derived from navy */
  --jib-slate-500:   #8796B4;   /* sidebar icon / secondary */
  --jib-slate-400:   #949AAE;   /* shadow reference 148,154,174 */

  /* ---------- Semantic ---------- */
  --jib-blue:        #2970FF;   /* primary action blue */
  --jib-blue-600:    #2F67F6;
  --jib-blue-500:    #4B77F6;   /* chip backgrounds */
  --jib-blue-400:    #4080FF;
  --jib-blue-300:    #6478FF;
  --jib-blue-50:     rgba(75,119,246,0.32); /* category chip bg */
  --jib-navy-chip:   #123393;   /* status badge "launched" bg */

  --jib-success:     #12B76A;   /* finished / on-track progress */
  --jib-success-bg:  rgba(18,183,106,0.12);

  --jib-warning:     #FDDA74;   /* warning yellow */
  --jib-warning-500: #FFC916;
  --jib-warning-bg:  rgba(255,201,22,0.14);

  --jib-danger:      #F25268;   /* destructive / error red-pink */
  --jib-danger-bg:   rgba(242,82,104,0.10);

  --jib-purple:      #9747FF;   /* dashed preview/scaffold border */
  --jib-purple-bg:   rgba(151,71,255,0.08);

  /* ---------- Foreground tokens (semantic) ---------- */
  --fg-default:      var(--jib-navy);        /* 15,9,60 — body */
  --fg-strong:       var(--jib-navy-deep);   /* headings extra */
  --fg-muted:        var(--jib-gray-500);    /* 131,131,149 */
  --fg-on-dark:      var(--jib-white);
  --fg-on-accent:    var(--jib-white);
  --fg-link:         var(--jib-blue);

  /* ---------- Background tokens ---------- */
  --bg-app:          var(--jib-gray-100);    /* 236,238,245 main canvas */
  --bg-surface:      var(--jib-white);       /* cards, header */
  --bg-surface-alt:  #F7F8FB;                /* hover row */
  --bg-sidebar:      var(--jib-navy);
  --bg-overlay:      rgba(15,9,60,0.55);

  /* ---------- Border tokens ---------- */
  --border-default:  var(--jib-gray-100);    /* 236,238,245 */
  --border-strong:   var(--jib-gray-300);
  --border-muted:    var(--jib-gray-200);
  --border-focus:    var(--jib-navy);
  --border-on-dark:  rgba(255,255,255,0.16);
  --border-dashed-hint: var(--jib-purple);   /* Figma scaffolding */

  /* ---------- Channel / platform colors ---------- */
  --ch-facebook:     #1877F2;   /* 24,119,242 */
  --ch-instagram:    #E1306C;
  --ch-linkedin:     #0A66C2;
  --ch-google:       #4285F4;
  --ch-youtube:      #FF0000;
  --ch-jobboard:     #0F093C;

  /* ---------- Type scale (px) ---------- */
  --fs-2xs:   10px;
  --fs-xs:    12px;    /* caption, meta */
  --fs-sm:    14px;    /* body default in UI */
  --fs-md:    16px;    /* comfortable body */
  --fs-lg:    18px;    /* small heading */
  --fs-xl:    20px;    /* H4 */
  --fs-2xl:   24px;    /* H3 */
  --fs-3xl:   28px;    /* H2 on pages */
  --fs-4xl:   32px;    /* H1 body, large number like "40%" */
  --fs-5xl:   48px;    /* display */

  /* ---------- Line-height ---------- */
  --lh-tight:  100%;
  --lh-snug:   1.25;
  --lh-body:   1.45;
  --lh-loose:  1.6;

  /* ---------- Weights ---------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     800;

  /* ---------- Font families ---------- */
  --ff-sans:   'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-ui:     'Inter', 'Poppins', system-ui, sans-serif;
  --ff-numeric:'Roboto', 'Inter', system-ui, sans-serif;
  --ff-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii ---------- */
  --r-xs:   3.81px;   /* micro chip (observed on sidebar "Specifiek") */
  --r-sm:   5px;      /* badge */
  --r-md:   6px;      /* status pill, tab */
  --r-lg:   8px;      /* button, card */
  --r-xl:   12px;     /* panel */
  --r-2xl:  16px;
  --r-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 0 12px rgba(0,0,0,0.08);         /* observed */
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);       /* observed */
  --shadow-lg:  0 12px 32px rgba(148,154,174,0.32);/* observed slate */
  --shadow-card:0 0 12px rgba(0,0,0,0.10);

  /* ---------- Layout / chrome ---------- */
  --header-height:   56px;
  --sidebar-width:   256px;
  --sidebar-collapsed: 64px;
  --content-max:     1184px;

  /* ---------- Motion ---------- */
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       260ms;
}

/* ============================================================
   Semantic typography
   ============================================================ */
html, body {
  font-family: var(--ff-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.jib-h1 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-4xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-default);
}
.jib-h2 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-3xl);
  line-height: 1.2;
  color: var(--fg-default);
}
.jib-h3 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: 1.25;
  color: var(--fg-default);
}
.jib-h4 {
  font-family: var(--ff-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: 1.3;
  color: var(--fg-default);
}
.jib-body {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-default);
}
.jib-body-md {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.jib-label {         /* sidebar/nav item text */
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.jib-label-strong {  /* tab labels, active */
  font-family: var(--ff-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}
.jib-meta {          /* caption */
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--fg-muted);
}
.jib-micro {         /* chip, tiny label */
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: 1.05;
  color: var(--fg-on-accent);
}
.jib-num {           /* numerals — Roboto */
  font-family: var(--ff-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}
.jib-display {
  font-family: var(--ff-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ============================================================
   Utility bits used across UI kits
   ============================================================ */
.jib-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}