/* Oktai Logistics — design tokens.
   Values copied verbatim from the Claude Design export
   (frontend-design/Oktai Recruiter Portal.html, decoded <helmet> block).
   Do not round/approximate these — if a value needs to change, change
   it here, in one place. */

:root {
  /* ---- Navy ramp (brand core) ---- */
  --navy-950: #0c1e33;
  --navy-900: #11263f;
  --navy-800: #16375a;
  --navy-700: #1b3859;
  --navy-600: #244972;
  --navy-500: #2f568a;

  /* ---- Royal blue accent ---- */
  --blue-700: #1f4f9e;
  --blue-600: #2258ab;
  --blue-500: #2c6ed1;
  --blue-400: #4a86e0;
  --blue-300: #7ba9ec;

  /* ---- Steel blue ---- */
  --steel-500: #5f81ab;
  --steel-400: #7ba0c9;
  --steel-300: #9abad1;
  --steel-200: #b9d0e2;

  /* ---- Neutrals ---- */
  --white: #ffffff;
  --paper: #f4f7fa;
  --cloud: #e6edf3;
  --smoke: #cdd8e2;
  --slate: #5a6b7d;

  /* ---- Typography ---- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;
  --fw-black: 900;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ---- Radius ---- */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (navy-tinted, never gray) ---- */
  --shadow-sm: 0 1px 2px rgba(12,30,51,0.08);
  --shadow-md: 0 6px 18px rgba(12,30,51,0.10);
  --shadow-lg: 0 18px 44px rgba(12,30,51,0.16);
  --shadow-btn: 0 8px 20px rgba(44,110,209,0.32);
  --shadow-card: 0 2px 8px rgba(15,40,70,0.08);
  --shadow-popover: 0 12px 30px rgba(12,30,51,0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms;

  /* ---- Page-level surface tokens (light theme, default) ---- */
  --page: #dde5ed; --surface: #ffffff; --surface-2: #f7fafd; --surface-3: #eef3f8;
  --line: #c3d0dc; --line-soft: #f0f4f7; --hover: #eff5fd;
  --ink: #16375a; --ink-2: #5a6b7d; --ink-3: #8c9196; --ink-4: #a4b0bc;
  --chip-on: #e4edfb; --chip-on-fg: #1f4f9e; --chip-on-line: #a9c6ee;
  --flag-tint: #fdf2f1; --warm-tint: #fffaf0;
}

html[data-theme="dark"] {
  --page: #0f1d2e; --surface: #16283d; --surface-2: #1b3149; --surface-3: #223b56;
  --line: #2f4a68; --line-soft: #23394f; --hover: #1f3a58;
  --ink: #e8f0f8; --ink-2: #b3c5d7; --ink-3: #8ba0b6; --ink-4: #7c8fa4;
  --chip-on: #1d3f6b; --chip-on-fg: #a8ccf5; --chip-on-line: #305c92;
  --flag-tint: #3a2429; --warm-tint: #2d2a1c;
}