/* ============================================================================= */
 /* WFM design tokens — the standardized base-utility layer. */
 /*  */
 /* Imported from the WorkforceMgr Design System (claude.ai/design project */
 /* "WorkforceMgr Design System"). These --wfm-* custom properties are the single */
 /* source recruiter-portal screens should reference for colour, type, spacing, */
 /* radii and elevation, so every screen stays on-brand. */
 /*  */
 /* Values mirror the Materialize Bootstrap 5 theme used by the "/v2" app */
 /* (resources/materialize/scss/vendor/_bootstrap-extended/_variables.scss); they */
 /* re-expose those theme decisions as plain CSS custom properties. */
 /*  */
 /* Inter (300–700) is already loaded via the Google Fonts <link> in */
 /* includes/materialize/head.blade.php, so no @font-face is needed here. */
 /* ============================================================================= */

:root {
 /* ---- Base neutrals -------------------------------------------------------- */
  --wfm-white: #ffffff;
  --wfm-black: #262b43; /* the WFM "ink" base — not pure black */
  --wfm-pure-black: #000000;
  --wfm-paper: #ffffff; /* card / surface paper background */

 /* Gray ramp (Materialize) */
  --wfm-gray-25:  #fafafa;
  --wfm-gray-50:  #f2f3f4;
  --wfm-gray-75:  #eeeef0;
  --wfm-gray-100: #e9e9ec;
  --wfm-gray-200: #d4d5d9;
  --wfm-gray-300: #bdbfc6;
  --wfm-gray-400: #a8aab4;
  --wfm-gray-500: #9295a1;
  --wfm-gray-600: #7d808e;
  --wfm-gray-700: #676a7b;
  --wfm-gray-800: #515569;
  --wfm-gray-900: #3b4055;

 /* ---- Brand / theme colours ------------------------------------------------ */
  --wfm-primary:   #666cff; /* indigo — primary actions, active nav */
  --wfm-secondary: #6d788d; /* slate — neutral buttons */
  --wfm-success:   #72e128; /* green */
  --wfm-info:      #26c6f9; /* sky */
  --wfm-warning:   #fdb528; /* amber */
  --wfm-danger:    #ff4d49; /* red */
  --wfm-light:     #dfdfe3;
  --wfm-dark:      #312d4b;

 /* RGB triplets for rgba() composition */
  --wfm-primary-rgb:   102, 108, 255;
  --wfm-secondary-rgb: 109, 120, 141;
  --wfm-success-rgb:   114, 225, 40;
  --wfm-info-rgb:      38, 198, 249;
  --wfm-warning-rgb:   253, 181, 40;
  --wfm-danger-rgb:    255, 77, 73;
  --wfm-black-rgb:     38, 43, 67;

 /* "Label" tints — soft pastel fills behind colored text/badges. */
  --wfm-primary-label:   #e7e8ff;
  --wfm-secondary-label: #e8eaee;
  --wfm-success-label:   #e9fbdd;
  --wfm-info-label:      #def6fe;
  --wfm-warning-label:   #fff3dd;
  --wfm-danger-label:    #ffe5e4;

 /* Hover / active darken steps for primary */
  --wfm-primary-hover:  #5b60e6;
  --wfm-primary-active: #5256cc;

 /* Text-safe shades — #666cff is 4.07:1 on white (fails AA for text) and the danger red */
 /* likewise, so text/links in these hues use these (5.90:1 / 5.44:1 on white). */
  --wfm-primary-text:   #5256cc;
  --wfm-danger-text:    #c0392b;

 /* ---- Semantic aliases ----------------------------------------------------- */
  --wfm-body-bg:        #f7f7f9; /* app canvas behind cards */
  --wfm-surface:        var(--wfm-paper);
  --wfm-surface-muted:  #f9fafb; /* inner panels (bg-body-tertiary) */
  --wfm-border:         #dbdce0; /* color-mix(black 12%, white) */
  --wfm-border-light:   var(--wfm-gray-75);

  --wfm-text-heading:   #404256; /* headings (black @ 90%) */
  --wfm-text-body:      #676a7b; /* default body copy (gray-700) */
  --wfm-text-muted:     #a8aab4; /* secondary / placeholder (gray-400) */
  --wfm-text-disabled:  #bdbfc6;

  --wfm-link:           var(--wfm-primary);
  --wfm-focus-ring:     rgba(103, 106, 123, 0.75);

 /* ---- Typography ----------------------------------------------------------- */
  --wfm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --wfm-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --wfm-font-size-root: 16px;
  --wfm-font-size-base: 0.9375rem; /* 15px — body text */
  --wfm-line-height-base: 1.375;

  --wfm-font-size-xs: 0.75rem; /* 12px */
  --wfm-font-size-sm: 0.8125rem; /* 13px */
  --wfm-font-size-md: 0.9375rem; /* 15px */
  --wfm-font-size-lg: 1.0625rem; /* 17px */
  --wfm-font-size-xl: 1.25rem; /* 20px */

  --wfm-line-height-xs: 1;
  --wfm-line-height-sm: 1.125;
  --wfm-line-height-lg: 1.625;

  --wfm-font-weight-light: 300;
  --wfm-font-weight-normal: 400;
  --wfm-font-weight-medium: 500; /* buttons, nav links, table headers */
  --wfm-font-weight-semibold: 600;
  --wfm-font-weight-bold: 700;

  --wfm-h1: 2.875rem; /* 46px */
  --wfm-h2: 2.375rem; /* 38px */
  --wfm-h3: 1.75rem; /* 28px */
  --wfm-h4: 1.5rem; /* 24px */
  --wfm-h5: 1.125rem; /* 18px */
  --wfm-h6: 0.9375rem; /* 15px */
  --wfm-headings-line-height: 1.1;
  --wfm-headings-weight: var(--wfm-font-weight-medium);

  --wfm-tracking-tight: -0.01em;
  --wfm-tracking-normal: 0;

 /* ---- Spacing -------------------------------------------------------------- */
  --wfm-space-0: 0;
  --wfm-space-1: 0.25rem; /* 4px */
  --wfm-space-2: 0.5rem; /* 8px */
  --wfm-space-3: 1rem; /* 16px — base spacer */
  --wfm-space-4: 1.5rem; /* 24px */
  --wfm-space-5: 3rem; /* 48px */

  --wfm-space-card: 1.25rem; /* card-body padding (x & y) */
  --wfm-space-card-sm: 1rem; /* compact card padding */
  --wfm-gutter: 1.5rem; /* row/col gutter */

  --wfm-sidebar-width: 260px;
  --wfm-sidebar-collapsed: 80px;
  --wfm-navbar-height: 64px;
  --wfm-content-padding-y: 1.5rem;

 /* ---- Radii ---------------------------------------------------------------- */
  --wfm-radius-xs: 0.125rem; /* 2px */
  --wfm-radius-sm: 0.25rem; /* 4px */
  --wfm-radius: 0.375rem; /* 6px — base */
  --wfm-radius-lg: 0.5rem; /* 8px — buttons, inputs */
  --wfm-radius-xl: 0.625rem; /* 10px — cards, modals, dropdowns */
  --wfm-radius-xxl: 1rem; /* 16px */
  --wfm-radius-badge: 0.1875rem; /* 3px — square badges */
  --wfm-radius-pill: 50rem;

 /* ---- Elevation — soft, low-contrast, ink-tinted --------------------------- */
  --wfm-shadow-xs: 0 0.125rem 0.375rem 0 rgba(38, 43, 67, 0.14);
  --wfm-shadow-sm: 0 0.125rem 0.625rem 0 rgba(38, 43, 67, 0.16);
  --wfm-shadow:    0 0.25rem 0.875rem 0 rgba(38, 43, 67, 0.16); /* card default */
  --wfm-shadow-lg: 0 0.375rem 1.25rem 0 rgba(38, 43, 67, 0.18); /* dropdowns, modals */
  --wfm-shadow-xl: 0 0.5rem 1.625rem 0 rgba(38, 43, 67, 0.18);

  --wfm-border-width: 1px;

 /* ---- Motion --------------------------------------------------------------- */
  --wfm-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --wfm-transition-fast: 0.15s;
  --wfm-transition: 0.25s;
}

 /* Dark skin — mirrors data-bs-theme="dark" in the app. */
[data-bs-theme="dark"] {
  --wfm-body-bg:         #25293c;
  --wfm-paper:           #2f3349;
  --wfm-surface:         #2f3349;
  --wfm-surface-muted:   #353a52;
  --wfm-border:          #44485e;
  --wfm-border-light:    #3a3f55;
  --wfm-gray-25:         #353a52;
  --wfm-gray-50:         #3a3f55;
  --wfm-gray-75:         #353a52;
  --wfm-gray-100:        #44485e;
  --wfm-gray-200:        #4f5468;
  --wfm-gray-300:        #5a5f73;
  --wfm-text-heading:    #d5d6de;
  --wfm-text-body:       #b6b8c4;
  --wfm-text-muted:      #7b7f9a;
  --wfm-text-disabled:   #5a5f73;
  --wfm-primary-text:    #a3a7ff; /* #666cff is 3.05:1 on dark paper */
  --wfm-danger-text:     #ff8a8a;
  --wfm-primary-label:   rgba(102, 108, 255, 0.16);
  --wfm-secondary-label: rgba(109, 120, 141, 0.18);
  --wfm-success-label:   rgba(114, 225, 40, 0.14);
  --wfm-info-label:      rgba(38, 198, 249, 0.14);
  --wfm-warning-label:   rgba(253, 181, 40, 0.14);
  --wfm-danger-label:    rgba(255, 77, 73, 0.14);
  --wfm-shadow-xs:       0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.24);
  --wfm-shadow-sm:       0 0.125rem 0.625rem 0 rgba(0, 0, 0, 0.28);
  --wfm-shadow:          0 0.25rem 0.875rem 0 rgba(0, 0, 0, 0.28);
  --wfm-shadow-lg:       0 0.375rem 1.25rem 0 rgba(0, 0, 0, 0.32);
  --wfm-shadow-xl:       0 0.5rem 1.625rem 0 rgba(0, 0, 0, 0.32);
}