/* =============================================================================
   SFD OnePortal - shared design tokens
   Linked by every page before its own <style> block.

   House style is aligned to hrconnect.depedmasbate.ph: white surfaces, one
   soft shadow, 12px card radius, Poppins headings, navy footer, one accent.

   TO RETHEME THE WHOLE SUITE: change the four --accent* values below.
   Bump the ?v= number on every <link> when you edit this file.
   ============================================================================= */

:root {
  /* --- Surfaces: white everywhere, separated by hairlines not fills --- */
  --bg: #ffffff;
  --surface: #ffffff;
  --wash: #fafbfd;                       /* faintest possible tint */
  --accent-wash: rgba(42, 76, 219, 0.045);
  --navy: #1e2b4d;                       /* footer + PST bar */

  /* --- Ink --- */
  --ink: #212529;
  --ink-heading: #1b2436;
  --ink-2: #5b6472;
  --ink-3: #8a93a3;

  /* --- Lines --- */
  --line: #e9edf3;
  --line-2: #d8dee8;

  /* --- The single accent. Change these four to restyle the suite. --- */
  --accent: #2a4cdb;
  --accent-hover: #2244c4;
  --accent-press: #1c39a6;
  --accent-text: #1f39a8;

  --accent-on: #ffffff;
  --accent-soft: #eef2ff;
  --accent-line: #dbe3ff;
  --ring: rgba(42, 76, 219, 0.28);

  /* --- Categorical tints, all in the accent hue family --- */
  --tint-1: #eef2ff; --tint-1-ink: #2a4cdb;
  --tint-2: #eaeef8; --tint-2-ink: #1c2f6b;
  --tint-3: #e9f1fe; --tint-3-ink: #1d4ed8;
  --tint-4: #eeeefc; --tint-4-ink: #4338ca;

  /* --- Status --- */
  --ok: #0f7a45; --ok-soft: #eaf7f0; --ok-line: #c8e6d5;
  --warn: #a35b06; --warn-soft: #fdf5e9; --warn-line: #f3e0c2;
  --stop: #b42318; --stop-soft: #fdeeed; --stop-line: #f7d3d0;

  /* --- Spacing: 4px scale --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 60px; --s10: 80px;

  /* --- Radius --- */
  --r1: 6px; --r2: 8px; --r3: 12px; --r4: 15px; --rf: 999px;

  /* --- Elevation: the house soft shadow, plus two lifted steps --- */
  --sh1: 0 5px 20px rgba(0, 0, 0, 0.03);
  --sh2: 0 8px 28px rgba(0, 0, 0, 0.07);
  --sh3: 0 20px 50px rgba(0, 0, 0, 0.10);

  /* --- Type --- */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Poppins", "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-eyebrow: 11px;
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 16px;
  --t-lg: 19px; --t-xl: 24px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.16s;
  --maxw: 1140px;

  /* ---------------------------------------------------------------------
     Legacy aliases.
     The pages were written against these names before the token extraction.
     They are kept so no page-level rule has to be rewritten, and so that
     retheming still only means editing --accent above.

     Note --primary-2 deliberately equals --primary: every old
     linear-gradient(180deg, var(--primary-2), var(--primary)) button
     collapses to a flat fill on its own, which is what we want.
     --------------------------------------------------------------------- */
  --primary: var(--accent);
  --primary-2: var(--accent);
  --primary-press: var(--accent-press);
  --primary-tint: var(--accent-soft);
  --primary-ring: var(--ring);
  --ink-soft: var(--ink-2);
  --line-strong: var(--line-2);
  --field-bg: #ffffff;
  --soft: var(--wash);
  --danger: var(--stop);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: var(--head); color: var(--ink-heading); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}