/* CareerInPharma design tokens. Fluent-style structure on the CareerInPharma palette (Marketing's, the careerinpharma.com
   site's own globals): the navy is the primary and the orange the accent. One source of truth for both surfaces: the
   member app (mobile-first) and the admin panel (dense desktop) both import this file first. The ramps are derived from
   the palette by scripts/brand/build-assets.py; every text-on-fill pair is proved AA by scripts/brand/contrast.mjs
   (docs/DESIGN.md 2a). */
/* Poppins (Marketing's typeface), self-hosted from public/shared/fonts (SIL Open Font License 1.1, OFL.txt there): weights
   400, 500 and 600 in the Latin, Latin-ext and Devanagari subsets, each file loaded only when the page uses its range.
   No request leaves the origin (font-src 'self'). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/fonts/poppins-400-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/fonts/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/shared/fonts/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/shared/fonts/poppins-500-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/shared/fonts/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/shared/fonts/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/shared/fonts/poppins-600-devanagari.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/shared/fonts/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/shared/fonts/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  /* The palette's colours (Marketing, 22 Oct 2026). Reach them through the ramps and roles below. */
  --brand-primary: #070761; /* navy: primary buttons, links, focus rings, headings */
  --brand-accent: #ff6a07; /* orange: accents, the progress meter, hover highlights; never text on white (2.87:1), never under white text */
  --brand-tint: #e3e3fc; /* the secondary tint: selected and hover surfaces */
  --brand-muted: #454584; /* muted indigo: secondary text and icons */

  /* Brand ramp (navy), the primary. 80 is the palette's navy, 100 its muted indigo, 160 its tint. Darker = lower number.
     70 and 60 (the primary's hover and pressed states) step 9.8 and 17.7 (CIELAB dE76) from the state before them, so
     each state reads; 60 to 130 step evenly in lightness (the admin funnel). */
  --brand-10: #000109; --brand-20: #000111; --brand-30: #01021a; --brand-40: #010224;
  --brand-50: #01022d; --brand-60: #020337; --brand-70: #04034d; --brand-80: var(--brand-primary);
  --brand-90: #252a73; --brand-100: var(--brand-muted); --brand-110: #5e5f9b; --brand-120: #797ab2;
  --brand-130: #9999c9; --brand-140: #b9b9e1; --brand-150: #ceceee; --brand-160: var(--brand-tint);

  /* Accent ramp (orange). 80 is the palette's orange: 2.87:1 on white, so never text and never under white text. 70 is
     the orange that marks things on light surfaces (icons, dots, the progress meter): 3:1 or more on white, the tints and
     the progress tracks. 140 to 160 are the orange tints. */
  --accent-10: #3c180d; --accent-20: #52200f; --accent-30: #692810; --accent-40: #81300f;
  --accent-50: #993a0e; --accent-60: #b2440a; --accent-70: #c14b06; --accent-80: var(--brand-accent);
  --accent-90: #ff8443; --accent-100: #ff9a64; --accent-110: #ffae81; --accent-120: #ffc29e;
  --accent-130: #ffd1b4; --accent-140: #ffdfcb; --accent-150: #ffecdf; --accent-160: #fff5ee;

  /* Neutrals */
  --n-0: #ffffff; --n-2: #fafafa; --n-4: #f5f5f5; --n-6: #f0f0f0; --n-8: #ebebeb; --n-10: #e0e0e0;
  --n-14: #d1d1d1; --n-20: #c7c7c7; --n-30: #adadad; --n-40: #8a8a8a; --n-50: #707070;
  --n-60: #616161; --n-70: #424242; --n-80: #333333; --n-90: #242424; --n-100: #1b1b1b;

  /* Semantic colours (status only, never decoration) */
  --ok: #107c10; --ok-bg: #e7f4e7; --ok-fg: #0e700e;
  --warn: #c56e00; --warn-bg: #fff4e5; --warn-fg: #8a4b00;
  --danger: #c50f1f; --danger-bg: #fdf3f4; --danger-fg: #a4262c;
  --info: var(--brand-80); --info-bg: var(--brand-160); --info-fg: var(--brand-60);

  /* Surfaces and text. The canvas is the palette's background, the text its near-black, the secondary text its muted
     indigo, the control strokes its grey; the lighter dividers stay neutral. --fg-3 is the darkest neutral that keeps
     4.5:1 on the tints (4.91:1 on --brand-160). */
  --bg: var(--n-0); --bg-subtle: var(--n-2); --bg-muted: var(--n-4); --bg-canvas: #f0f0fa;
  --surface: var(--n-0); --surface-raised: var(--n-0);
  --stroke: var(--n-10); --stroke-strong: #b6b6c1; --stroke-subtle: var(--n-8);
  --fg: #272729; --fg-2: var(--brand-muted); --fg-3: var(--n-60); --fg-disabled: var(--n-30); --fg-on-brand: #ffffff;
  --link: var(--brand-80); --link-hover: var(--brand-70);
  --primary: var(--brand-80); --primary-hover: var(--brand-70); --primary-pressed: var(--brand-60);
  --primary-subtle: var(--brand-160); --primary-subtle-hover: var(--brand-150);
  /* The secondary (orange): brand moments beside the navy, never the primary action, never text and never under white
     text. --secondary is the palette's orange and takes dark text only (--fg-on-secondary); --secondary-strong is the
     orange for icons, dots and indicators on light surfaces (3:1 or more); --secondary-fg is the text on
     --secondary-subtle (navy: orange is never text); --secondary-halo is a decorative orange ring around a navy mark (the
     current step), never the only cue. The brand moments that use them are listed in docs/DESIGN.md 2a. */
  --secondary: var(--accent-80); --secondary-strong: var(--accent-70); --fg-on-secondary: var(--brand-80);
  --secondary-subtle: var(--accent-160); --secondary-subtle-hover: var(--accent-150); --secondary-fg: var(--brand-80);
  --secondary-halo: var(--accent-140);
  /* The progress meter (the chat's progress rail and the CV upload bar): the orange that holds 3:1 on its tracks. */
  --progress: var(--accent-70);
  /* Hover highlight: the underline a link shows on hover, in the palette's orange (a decoration, never the text). */
  --highlight: var(--accent-80);
  /* Focus ring: the navy, 3:1 or more on every light surface. */
  --focus: var(--brand-80);
  /* Native checkboxes, radios, range and progress draw in the primary navy on every page that loads this file (it
     inherits), never the browser's own blue beside the navy controls. */
  accent-color: var(--primary);
  /* The member canvas wash: the orange tint at the start edge turning to the app background by 70 % of the width, held
     for the first 64 px and faded to white by 400 px. Every text colour keeps AA on it (fg-3 is 4.5:1 or more on both
     ends). Use as `background: var(--brand-wash), var(--bg);`. */
  --brand-wash: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 64px, var(--bg) 400px), linear-gradient(100deg, var(--accent-160) 0%, var(--bg-canvas) 70%);

  /* Typography: Poppins (self-hosted, above), then the Segoe-first system stack while it loads or where it cannot. */
  --font: "Poppins", "Segoe UI", "Segoe UI Variable Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-body: 14px;    --lh-body: 20px;
  --fs-body-lg: 16px; --lh-body-lg: 22px;
  --fs-subtitle: 20px; --lh-subtitle: 28px;
  --fs-title: 24px;   --lh-title: 32px;
  --fs-title-lg: 32px; --lh-title-lg: 40px;
  --fs-display: 40px; --lh-display: 52px;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Spacing (4px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radii, strokes, elevation */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px;
  --stroke-w: 1px;
  --shadow-2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow-4: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --shadow-8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow-16: 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);

  /* Motion */
  --dur-fast: 100ms; --dur-normal: 200ms; --dur-slow: 300ms;
  --ease-standard: cubic-bezier(.33,0,.67,1); --ease-decelerate: cubic-bezier(0,0,0,1); --ease-accelerate: cubic-bezier(1,0,1,1);

  /* Layout */
  --nav-w: 248px; --nav-w-collapsed: 56px; --bar-h: 48px; --pane-w: 420px; --content-max: 1440px; --member-max: 600px;
  --row-h: 48px; --row-h-compact: 40px; --overlay-backdrop: rgba(0,0,0,.4);
  --z-nav: 20; --z-bar: 30; --z-pane: 40; --z-overlay: 50; --z-toast: 60;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-normal: 0ms; --dur-slow: 0ms; } }

/* Base */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--brand-150); }
a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-decoration-color: var(--highlight); }
.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; }