/* ============================================================
   denidel.css — Denidel design system
   Load AFTER Bootstrap's CSS on every page. Overrides, not a
   replacement. See careers-denidel-build-instructions.md.
   ============================================================ */

/* ---------- Fonts (self-hosted, 2 files + 1 italic) ---------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Source Serif 4 italic — member quotes and interview reports ONLY.
   Not loaded/used anywhere else in the system. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('/assets/fonts/SourceSerif4-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1.1 Tokens ---------- */
:root {
  /* Brand */
  --dn-cyan:        #00C2E0;
  --dn-cyan-hover:  #00A3BE;
  --dn-cyan-ink:    #00738A;  /* cyan for TEXT — passes contrast */
  --dn-cyan-deep:   #00607A;  /* text on cyan tint */
  --dn-cyan-tint:   #E6F9FC;
  --dn-cyan-mid:    #9FE4F2;

  --dn-pink:        #F68DB3;
  --dn-pink-ink:    #C2306A;  /* pink for TEXT */
  --dn-pink-deep:   #A8265A;
  --dn-pink-darker: #7A2049;
  --dn-pink-tint:   #FDEEF3;

  --dn-navy:        #14142B;
  --dn-navy-on:     #06303A;  /* text ON cyan buttons */
  --dn-pink-on:     #5B1233;  /* text ON pink badges */

  /* Neutrals */
  --dn-ink:         #14142B;
  --dn-muted:       #4A4A63;
  --dn-soft:        #7C7C93;
  --dn-ground:      #FBFAF8;  /* page background */
  --dn-surface:     #FFFFFF;
  --dn-line:        #E8E6E1;  /* card hairline */
  --dn-line-soft:   #EFEDE9;  /* inner dividers */
  --dn-fill:        #F3F2F0;  /* neutral chip */

  /* Semantic */
  --dn-gold:        #F2B01E;  /* POINTS ONLY — never decorative */
  --dn-gold-tint:   #F7E3B3;
  --dn-green:       #166B4A;
  --dn-green-tint:  #EAF6F0;
  --dn-red:         #E85A5A;

  /* Radius */
  --dn-r-card: 14px;
  --dn-r-input: 10px;
  --dn-r-pill: 999px;
  --dn-r-lg: 16px;

  /* Shadow */
  --dn-sh-raised: 0 2px 4px rgba(20,20,43,.04), 0 14px 30px -20px rgba(20,20,43,.30);
  --dn-sh-hero:   0 2px 4px rgba(20,20,43,.04), 0 16px 34px -22px rgba(20,20,43,.30);

  /* Space — 4px grid */
  --dn-s1: 8px; --dn-s2: 12px; --dn-s3: 16px; --dn-s4: 24px; --dn-s5: 32px; --dn-s6: 48px;
}

/* ---------- 1.2 Typography ---------- */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background: var(--dn-ground);
  color: var(--dn-ink);
  -webkit-font-smoothing: antialiased;
}

/* Scale, as utility classes — apply these, don't inline-style typography */
.dn-page-title    { font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--dn-ink); text-wrap: pretty; }
.dn-h1-mobile      { font-size: 24px; font-weight: 700; letter-spacing: -.03em; color: var(--dn-ink); text-wrap: pretty; }
.dn-section-heading{ font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--dn-ink); text-wrap: pretty; }
.dn-card-title     { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--dn-ink); }
.dn-body           { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--dn-muted); max-width: 70ch; }
.dn-small          { font-size: 13px; font-weight: 500; color: var(--dn-soft); }
.dn-eyebrow        { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--dn-soft); }
.dn-figure         { font-size: 32px; font-weight: 800; letter-spacing: -.04em; color: var(--dn-ink); }
.dn-figure-lg      { font-size: 40px; font-weight: 800; letter-spacing: -.04em; color: var(--dn-ink); }

.dn-quote { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; }

/* ---------- 1.3 Surfaces ---------- */
.dn-card-resting {
  background: var(--dn-surface);
  border: 1px solid var(--dn-line);
  border-radius: var(--dn-r-card);
}
.dn-card-raised {
  background: var(--dn-surface);
  border: 1px solid transparent;
  border-radius: var(--dn-r-card);
  box-shadow: var(--dn-sh-raised);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.dn-card-raised:hover {
  transform: translateY(-2px);
}
.dn-surface-navy {
  background: var(--dn-navy);
  color: #fff;
  border-radius: var(--dn-r-card);
}
.dn-fill-block {
  background: var(--dn-fill);
  border-radius: var(--dn-r-input);
}

/* ---------- 1.4 Bootstrap overrides ---------- */
.btn { border-radius: var(--dn-r-pill); font-weight: 700; font-size: 13.5px; padding: 11px 20px; }
.btn-primary { background: var(--dn-cyan); border-color: var(--dn-cyan); color: var(--dn-navy-on); }
.btn-primary:hover, .btn-primary:focus { background: var(--dn-cyan-hover); border-color: var(--dn-cyan-hover); color: var(--dn-navy-on); }
.btn-dark { background: var(--dn-navy); border-color: var(--dn-navy); }
.btn-outline-dark { border-width: 1.5px; border-color: var(--dn-ink); color: var(--dn-ink); font-weight: 700; }
.btn-link { color: var(--dn-cyan-ink); font-weight: 700; text-decoration: none; }

.badge { border-radius: var(--dn-r-pill); font-weight: 700; font-size: 12px; padding: 5px 12px; }
.badge-neutral { background: var(--dn-fill); color: var(--dn-muted); }
.badge-cyan    { background: var(--dn-cyan-tint); color: var(--dn-cyan-deep); }
.badge-urgent  { background: var(--dn-pink-tint); color: var(--dn-pink-deep); font-weight: 800; font-size: 10.5px; letter-spacing:.02em; }
.badge-verified{ background: var(--dn-green-tint); color: var(--dn-green); }

.form-control, .form-select {
  border-radius: var(--dn-r-input); border-color: var(--dn-line);
  font-size: 16px; padding: 11px 13px;   /* 16px prevents iOS zoom — do not reduce */
}
.form-control:focus { border-color: var(--dn-cyan); box-shadow: 0 0 0 3px rgba(0,194,224,.15); }

.card { border-radius: var(--dn-r-card); border-color: var(--dn-line); }

*:focus-visible { outline: 2px solid var(--dn-cyan-ink); outline-offset: 2px; }

/* ---------- 1.5 Icons ---------- */
/* Bootstrap Icons, outline weight only, in markup. Filled variants reserved
   for a single "on" state: saved bookmark (bi-bookmark-fill, cyan),
   verified employer (bi-patch-check-fill, green), active tab, points star
   (bi-star-fill, gold). Never mix filled + outline in the same row.
   Icon size = 1.15x adjacent text size, never larger — enforce per use,
   not globally, since contexts vary. */