/* ============================================================
   NRH DESIGN TOKENS
   Single source of truth. Everything else references these.
   Extracted from the 408-line Joblook Additional CSS, Sept 2026.
   ============================================================ */

:root {
  /* ---- brand ---------------------------------------------- */
  --nrh-primary:        #0b3d91;   /* headline navy            */
  --nrh-secondary:      #0056b3;   /* link / accent blue       */
  --nrh-primary-deep:   #0f2b4a;   /* scholarship navy         */

  /* ---- action colours -------------------------------------
     The raw tokens fail WCAG AA as button fills with white text.
     Use the -ink variants for any filled button; keep the raw
     tokens for borders, chips, markers and large display type. */
  --nrh-apply:          #22c55e;   /* token: accents only      */
  --nrh-apply-ink:      #15803d;   /* fill w/ white text  4.8:1 */
  --nrh-apply-on-dark:  #4ade80;   /* green TEXT on navy  5.8:1 */
  --nrh-apply-hover:    #126c34;
  --nrh-save:           #f59e0b;   /* token: accents only      */
  --nrh-save-ink:       #a86504;   /* fill w/ white text  4.6:1 */
  --nrh-save-hover:     #8d5403;

  /* ---- surfaces ------------------------------------------- */
  --nrh-bg:             #f8fafc;
  --nrh-surface:        #ffffff;
  --nrh-surface-alt:    #f8fafc;
  --nrh-line:           #e2e8f0;
  --nrh-line-soft:      #f1f5f9;

  /* ---- text ----------------------------------------------- */
  --nrh-ink:            #0f172a;
  --nrh-ink-strong:     #1e293b;
  --nrh-ink-body:       #334155;
  --nrh-ink-muted:      #475569;
  --nrh-ink-soft:       #64748b;
  --nrh-ink-faint:      #94a3b8;
  --nrh-on-dark:        #f8fafc;
  --nrh-on-dark-soft:   #cbd5e1;
  --nrh-on-dark-faint:  #94a3b8;

  /* ---- semantic tints ------------------------------------- */
  --nrh-info-bg:        #eff6ff;
  --nrh-info-line:      #bfdbfe;
  --nrh-info-ink:       #1e40af;
  --nrh-info-accent:    #2563eb;
  --nrh-ok-bg:          #ecfdf5;
  --nrh-ok-bg-2:        #f0fdf4;
  --nrh-ok-line:        #bbf7d0;
  --nrh-ok-ink:         #166534;
  --nrh-warn-bg:        #fef2f2;
  --nrh-warn-line:      #fecaca;
  --nrh-warn-ink:       #991b1b;

  /* ---- badge tints (scholarships) ------------------------- */
  --sch-funded:         #86efac;
  --sch-deadline:       #fcd34d;
  --sch-women:          #d8b4fe;
  --sch-partial:        #93c5fd;
  --sch-masters:        #f9a8d4;
  --sch-intl:           #5eead4;
  --sch-undergrad:      #fdba74;
  --sch-govt:           #a5b4fc;

  /* ---- type ----------------------------------------------- */
  --nrh-font:           Arial, Helvetica, sans-serif;
  --nrh-font-ui:        Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /*
   * Display serif for scholarship pages.
   *
   * The approved design sets headlines in a prospectus serif against the
   * sans UI, which is what tells a reader they have left the job board.
   * This is a system stack rather than a webfont on purpose: the theme's
   * first principle is mobile-first for Ugandan networks, and a display
   * face used on one template does not justify a render-blocking font
   * request. Georgia leads because it was drawn for screens, ships on
   * every Windows, macOS, iOS and Android device in practice, and has the
   * generous x-height the design depends on at large sizes.
   */
  --nrh-font-display:   Georgia, "Times New Roman", "Noto Serif", serif;

  /* ---- scholarship palette -------------------------------------
   * Job pages are navy + green. Scholarships are navy + academic gold,
   * so the two sections never read as the same page. The gold comes
   * from the subject's own world (degree seals, honours boards) rather
   * than the usual ed-tech teal.
   *
   * Tints are declared, not generated, so they can be used directly as
   * background values without any colour-mixing support.
   */
  --sch-navy-950:       #081a2e;
  --sch-navy-900:       #0b2038;
  --sch-navy-800:       #0f2b4a;   /* Ivan's existing scholarship navy */
  --sch-navy-600:       #16406c;

  --sch-gold-600:       #a8801f;   /* AA on white: 4.6:1 */
  --sch-gold-500:       #c8a24a;
  --sch-gold-300:       #e6cd8e;   /* for text on navy */

  --sch-paper:          #fbf9f4;
  --sch-card:           #ffffff;
  --sch-line:           #e4ddd0;
  --sch-ink:            #16202b;
  --sch-muted:          #5b6b7c;

  --sch-good:           #15803d;
  --sch-bad:            #a8321f;

  --sch-gold-t08:       rgba(200, 162,  74, .08);
  --sch-gold-t15:       rgba(200, 162,  74, .15);
  --sch-gold-t30:       rgba(200, 162,  74, .30);
  --sch-good-t06:       rgba( 21, 128,  61, .06);
  --sch-bad-t10:        rgba(168,  50,  31, .10);
  --sch-navy-t06:       rgba( 15,  43,  74, .06);

  --nrh-text-xs:        0.78rem;
  --nrh-text-sm:        0.88rem;
  --nrh-text-base:      1rem;      /* 17px at 17px root        */
  --nrh-text-lg:        1.1rem;
  --nrh-text-xl:        1.25rem;
  --nrh-h3:             1.25rem;
  --nrh-h2:             1.5rem;
  --nrh-h1:             clamp(1.9rem, 4.5vw, 2.5rem);

  --nrh-leading:        1.7;
  --nrh-leading-tight:  1.25;

  /* ---- shape & depth -------------------------------------- */
  --nrh-radius-sm:      8px;
  --nrh-radius:         12px;
  --nrh-radius-lg:      16px;
  --nrh-radius-xl:      24px;
  --nrh-radius-pill:    100px;

  --nrh-shadow-sm:      0 1px 4px rgba(0,0,0,.04);
  --nrh-shadow:         0 5px 18px rgba(0,0,0,.08);
  --nrh-shadow-lg:      0 8px 25px rgba(0,0,0,.15);

  /* ---- spacing -------------------------------------------- */
  --nrh-gap-xs:         5px;
  --nrh-gap-sm:         8px;
  --nrh-gap:            14px;
  --nrh-gap-lg:         20px;
  --nrh-gap-xl:         26px;

  --nrh-pad-card:       24px;
  --nrh-pad-card-sm:    16px;

  /* ---- layout --------------------------------------------- */
  --nrh-measure-job:    900px;   /* job article column          */
  --nrh-measure-wide:   1100px;  /* scholarship + listings      */
  --nrh-sidebar:        290px;   /* NRH Job Sidebar v2.9        */
  --nrh-stack-at:       900px;   /* two-col -> one-col          */
}
