/* Jobspreader Design System — Colors & Type Tokens
 * Source: Figma "JS Library.fig" (Wollmilchsau / Jobspreader)
 * All values extracted from /Basics-Color-Font-Grid-Shadow
 */

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Lato:wght@900&family=Inter:wght@400;600;700&display=swap');

:root {
  /* ── Primary (Blue) ── */
  --primary-100: #2C72AA;  /* brand primary */
  --primary-90:  #4180B2;
  --primary-80:  #568EBB;
  --primary-70:  #6B9CC3;
  --primary-60:  #80AACC;
  --primary-50:  #96B8D4;
  --primary-40:  #ABC6DD;
  --primary-30:  #C0D5E5;
  --primary-20:  #D5E3EE;
  --primary-10:  #EAF1F6;
  --primary-5:   #F4F8FB;
  --primary-accent: #1F5A86;

  /* ── Secondary (Lavender) ── */
  --secondary-100: #B0B4FF;
  --secondary-90:  #B8BBFF;
  --secondary-80:  #C0C3FF;
  --secondary-70:  #C8CAFF;
  --secondary-60:  #D0D2FF;
  --secondary-50:  #D8D9FF;
  --secondary-40:  #E0E1FF;
  --secondary-30:  #E7E8FF;
  --secondary-20:  #EFF0FF;
  --secondary-10:  #F7F7FF;
  --secondary-5:   #FBFBFF;
  --secondary-accent: #858BFF;

  /* ── Terciary (Neutrals — navy greys) ── */
  --terciary-100: #1C2D3B;  /* default text */
  --terciary-90:  #33424F;
  --terciary-80:  #495762;  /* secondary text */
  --terciary-70:  #606C76;
  --terciary-60:  #778189;
  --terciary-50:  #8D969D;  /* muted / subline */
  --terciary-40:  #A4ABB1;
  --terciary-30:  #BBC0C4;
  --terciary-20:  #D2D5D8;  /* borders */
  --terciary-10:  #E8EAEB;  /* hairlines */
  --terciary-5:   #F3F4F5;  /* surface alt */

  /* ── Green / Success ── */
  --green-100: #3AC693;
  --green-80:  #61D1A9;
  --green-60:  #89DDBE;
  --green-40:  #B0E8D4;
  --green-20:  #D8F4E9;
  --green-10:  #EBF9F4;
  --green-accent: #147A54;

  /* ── Red / Warning ── */
  --red-100: #DD5050;
  --red-80:  #E47373;
  --red-60:  #EB9696;
  --red-40:  #F1B9B9;
  --red-20:  #F8DCDC;
  --red-10:  #FCEEEE;
  --red-accent: #B63737;

  /* ── Yellow ── */
  --yellow-100: #FEC570;
  --yellow-80:  #FED18D;
  --yellow-60:  #FEDCA9;
  --yellow-40:  #FFE8C6;
  --yellow-20:  #FFF3E2;
  --yellow-10:  #FFF9F1;
  --yellow-accent: #996515;

  /* ── Chart accents ── */
  --turquoise-100: #07BEB8;
  --turquoise-80:  #39CBC6;
  --turquoise-60:  #6AD8D4;
  --turquoise-40:  #9CE5E3;
  --turquoise-20:  #CDF2F1;
  --lightgreen-100: #A9D8B8;
  --lightgreen-60:  #CBE8D4;
  --lightgreen-20:  #EEF7F1;

  /* ── Brand accents ── */
  --heart-red: #F82C51;      /* logo heart */
  --white: #FFFFFF;
  --black: #000000;

  /* ── Secondary brand blue (Login / pagination / sourcing accent) ──
     Observed hundreds of times in JS Sites file alongside --primary-100.
     Lighter, less saturated than --primary-100; used for large headlines,
     selected-state borders, pagination active, and search-hit highlights. */
  --primary-light: #3C83BC;      /* rgb(60,131,188) */

  /* ── App-shell surface (cool blue-tinted) ──
     The real background used on every Site page — NOT --terciary-5.
     Replaces the earlier --bg-2 default for app shells. */
  --surface-app: #ECF3F8;        /* rgb(236,243,248) */
  --surface-app-gradient: linear-gradient(180deg, #F5F9FC 0%, #ECF3F8 100%);

  /* ── Modal scrim ──
     Observed behind every modal in /Modals: flat neutral blanket, not
     the previously documented rgba(28,45,59,0.4). */
  --scrim-modal:   rgba(164,171,177, 1);  /* solid fallback */
  --scrim-modal-a: rgba(164,171,177, 0.8);
  --scrim-dialog:  rgba(187,192,196, 1);  /* lighter scrim under ChangeLog-style sheets */

  /* ── Semantic fg/bg ── */
  --fg-1: var(--terciary-100);   /* primary text */
  --fg-2: var(--terciary-80);    /* secondary text */
  --fg-3: var(--terciary-50);    /* muted / labels */
  --fg-link: var(--primary-100);
  --bg-1: var(--white);          /* base surface */
  --bg-2: var(--terciary-5);     /* app bg */
  --bg-3: var(--secondary-20);   /* accent surface */
  --border-1: var(--terciary-20);
  --border-2: var(--terciary-10);

  /* ── Gradients ── */
  --grad-primary:    linear-gradient(180deg, #2C72AA 0%, rgba(44,114,170,0) 100%);
  --grad-secondary:  linear-gradient(180deg, rgba(176,180,255,0.5) 0%, rgba(176,180,255,0) 100%);
  --grad-soft-green: linear-gradient(180deg, #EBF9F4 0%, #FFFFFF 100%);
  --grad-soft-yellow:linear-gradient(180deg, #FFF9F1 0%, #FFFFFF 100%);
  --grad-soft-red:   linear-gradient(180deg, #FCEEEE 0%, #FFFFFF 100%);
  --grad-soft-blue:  linear-gradient(180deg, #EFF0FF 0%, #FFFFFF 100%);

  /* ── Radii ──
     12px is the default for almost every surface.
     3px is only for status tags; 9999px for pills/filter chips. */
  --radius: 12px;           /* default — buttons, cards, inputs, menus, modals */
  --radius-tag: 3px;        /* status tags only */
  --radius-pill: 9999px;    /* filter chips, badges */
  /* Extended radii observed in the new Sites/Modals file */
  --radius-highlight: 10px; /* search-hit highlight rects, example cards */
  --radius-card-lg: 16px;   /* login teaser, onboarding cards */
  --radius-nav-pill: 20px;  /* sidenav main nav items (active state) */
  --radius-onboarding: 26px;/* onboarding step cards (Prepare-Job flow) */
  --radius-hero: 40px;      /* Login hero containers (Welcome, Forgot, Report) */

  /* ── Spacing — 4px/8px baseline ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Shadows (elevation -01..06) ── */
  --shadow-inset: inset 0 0.5px 4px 0 rgba(96,97,112,0.32); /* focused textfield */
  --shadow-02: 0 0 1px 1px rgba(40,41,61,0.04);             /* notif badges, buttons */
  --shadow-03: 0 0 2px 1px rgba(40,41,61,0.04);             /* nav menu, card */
  --shadow-04: 0 2px 4px 1px rgba(40,41,61,0.04);           /* button hover */
  --shadow-05: 0 2px 8px 1px rgba(40,41,61,0.04);           /* dropdown, popover */
  --shadow-06: 0 2px 8px 1px rgba(40,41,61,0.08);           /* modals */
  --shadow-overlay: 0 0 10px 0 rgba(196,196,196,0.5);

  /* ── Type stack ── */
  --font-sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Lato', 'Mulish', sans-serif;
  --font-mono: 'Inter', ui-monospace, monospace;
}

/* ─────────────────────────────────
   SEMANTIC TYPE CLASSES
   (from Figma /Fonts frame)
   ───────────────────────────────── */

/* ── Display / Hero type (Login shell, 404/503 pages) ──
   Not in the original /Fonts frame — extracted from Login containers.
   Uses Lato ExtraBold where the old file reserved Lato for "loud" labels. */
.type-display-hero {
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 52px; letter-spacing: -0.2px;
  color: var(--primary-light);     /* #3C83BC — softer than brand primary */
}
.type-display-sub {
  font-family: var(--font-display); font-weight: 900;
  font-size: 36px; line-height: 44px; letter-spacing: -0.1px;
  color: var(--primary-light);
}

.type-teaser {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 28px; line-height: 48px; letter-spacing: 0.12px;
  color: var(--terciary-100);
}
.type-h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 22px; line-height: 37px; letter-spacing: 0.12px;
  color: var(--primary-100); text-transform: uppercase;
}
.type-h2 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 20px; line-height: 24px; color: var(--terciary-100);
}
.type-h3 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 18px; line-height: 22px; color: var(--terciary-100);
}
.type-h4 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}
.type-body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}
.type-body-bold {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}
.type-body-italic {
  font-family: var(--font-sans); font-weight: 400; font-style: italic;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}
.type-small {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 14px; line-height: 20px; color: var(--terciary-100);
}
.type-small-bold {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; line-height: 20px; color: var(--terciary-100);
}
.type-link {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 16px; line-height: 27px; color: var(--primary-100);
  text-decoration: underline;
}
.type-link-small {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 14px; line-height: 20px; color: var(--primary-100);
  text-decoration: underline;
}
.type-legend {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 12px; line-height: 20px; color: var(--terciary-100);
}
.type-legend-bold {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; line-height: 20px; color: var(--terciary-100);
}
.type-hint {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 12px; line-height: 20px; color: var(--terciary-80);
}
.type-subline-large {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; line-height: 16px; letter-spacing: 1px;
  color: var(--terciary-50); text-transform: uppercase;
}
.type-subline-small {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; line-height: 12px; letter-spacing: 1px;
  color: var(--terciary-50); text-transform: uppercase;
}
.type-subline-small-extrabold {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 12px; line-height: 14px; letter-spacing: 1px;
  color: var(--terciary-50); text-transform: uppercase;
}
.type-button-large {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 14px; line-height: 20px;
}
.type-button-small {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; line-height: 15px;
}
.type-nav {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}
.type-nav-bold {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 16px; line-height: 27px; color: var(--terciary-100);
}

/* ─── base ─── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
}