/* ==========================================================================
   Vetri Jobs – design tokens
   --------------------------------------------------------------------------
   The interface is built from exactly two brand colours plus neutral greys:

     #1B5FEB   brand blue   (--blue-600) - primary
     #2BD9C3   brand teal   (--teal-500) - accent and success

   White, black and ash (grey) are the only other colours used, so every ramp
   below is a tint or a shade of those two hues: navy/blue are dark-to-light
   blue, green is the teal ramp under a status name, and the old violet/sky
   names are kept as aliases of the blue ramp so the markup keeps working.

   Red (--rose-*) and amber (--amber-*) are the single deliberate exception:
   they are reserved for error and warning states, where a two-colour palette
   cannot carry the meaning on its own.
   ========================================================================== */
:root {
  /* Brand blue - the deep shades used by the header, footer and sidebar ---- */
  --navy-950: #061229;
  --navy-900: #08162e;
  --navy-850: #0a1a36;
  --navy-800: #0c1e3e;
  --navy-700: #122c58;
  --navy-600: #1a3d78;
  --footer-bg: #0a1a36;
  --footer-bar: #08162e;

  --blue-700: #1548b8;
  --blue-600: #1b5feb;
  --blue-500: #2f74f0;
  --blue-200: #bcd4fb;
  --blue-100: #e8f0fe;
  --blue-050: #f2f7ff;

  --teal-600: #13bda7;
  --teal-500: #2bd9c3;
  --teal-100: #c3f2ea;
  --teal-050: #e9fbf7;

  /* Success = the teal ramp (no third hue) ------------------------------- */
  --green-600: #0f9b86;
  --green-500: #2bd9c3;
  --green-200: #bfeee6;
  --green-100: #d9f7f1;
  --green-050: #e9fbf7;

  /* Secondary tint = the blue ramp (legacy "violet" names) --------------- */
  --violet-600: #1b4fc4;
  --violet-500: #1b5feb;
  --violet-100: #dbe6fe;
  --violet-050: #f2f6ff;

  --amber-600: #d98200;
  --amber-500: #f5a623;
  --amber-100: #fdeccd;
  --amber-050: #fff7e8;

  /* Errors only ---------------------------------------------------------- */
  --rose-500: #f2517c;
  --rose-100: #ffe1ea;

  /* Neutrals ------------------------------------------------------------- */
  --ink-900: #0e1f33;
  --ink-800: #17293f;
  --ink-700: #26374d;
  --ink-600: #41536b;
  --ink-500: #5a6b82;
  --ink-400: #7d8ca1;
  --ink-300: #a4b0c0;

  --line:       #e4e9f0;
  --line-soft:  #eef2f7;
  --line-strong:#d5dde9;

  --surface:     #ffffff;
  --surface-alt: #f6f8fc;
  --surface-soft:#fafbfe;

  /* Metrics -------------------------------------------------------------- */
  --header-h:   64px;
  --container:  1344px;
  --container-wide:   1448px;
  --container-narrow: 1240px;
  --gutter: 24px;

  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(14,31,51,.05);
  --sh-sm: 0 2px 8px rgba(14,31,51,.06);
  --sh-md: 0 6px 20px rgba(14,31,51,.08);
  --sh-lg: 0 18px 44px rgba(14,31,51,.12);
  --sh-focus: 0 0 0 3px rgba(27,95,235,.18);

  /* Typography ----------------------------------------------------------- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;

  --t-fast: 140ms ease;
  --t-base: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-header: 60;
  --z-drawer: 80;
  --z-modal:  100;
  --z-toast:  120;
}

/* Theme helper classes */
.t-navy   { --accent: var(--navy-800);   --accent-soft: #e7eef8; }
.t-blue   { --accent: var(--blue-600);   --accent-soft: var(--blue-100); }
.t-teal   { --accent: var(--teal-600);   --accent-soft: var(--teal-050); }
.t-violet { --accent: var(--violet-500); --accent-soft: var(--violet-050); }
.t-amber  { --accent: var(--amber-500);  --accent-soft: var(--amber-050); }
.t-green  { --accent: var(--green-500);  --accent-soft: var(--green-050); }
.t-sky    { --accent: var(--blue-500);   --accent-soft: var(--blue-050); }
.t-rose   { --accent: var(--rose-500);   --accent-soft: var(--rose-100); }
.t-slate  { --accent: var(--ink-600);    --accent-soft: #eef2f7; }
.t-white  { --accent: var(--ink-600);    --accent-soft: var(--surface-alt); }