/* JobBoard Design Tokens
 * Single source of truth for colour, spacing, typography across React + Blazor.
 * Inspired by Salesforce Lightning's information density and patterns,
 * with our own brand identity (deep teal primary + warm amber accent).
 *
 * Token naming: --jb-{category}-{role}-{variant}
 *   e.g. --jb-color-brand-primary, --jb-space-md, --jb-text-heading-lg
 */

:root {
  /* ───────────────────────── Colour ───────────────────────── */

  /* Brand */
  --jb-color-brand-primary: #0E7C7B;        /* deep teal — primary CTAs, links */
  --jb-color-brand-primary-hover: #0B6362;
  --jb-color-brand-primary-active: #084948;
  --jb-color-brand-accent: #F59E0B;         /* warm amber — highlights, badges */
  --jb-color-brand-accent-hover: #D97E07;

  /* Neutral scale (slate) */
  --jb-color-neutral-0: #FFFFFF;
  --jb-color-neutral-50: #F8FAFC;
  --jb-color-neutral-100: #F1F5F9;
  --jb-color-neutral-200: #E2E8F0;
  --jb-color-neutral-300: #CBD5E1;
  --jb-color-neutral-400: #94A3B8;
  --jb-color-neutral-500: #64748B;
  --jb-color-neutral-600: #475569;
  --jb-color-neutral-700: #334155;
  --jb-color-neutral-800: #1E293B;
  --jb-color-neutral-900: #0F172A;

  /* Semantic — status workflows (Path component, badges, alerts) */
  --jb-color-status-success: #16A34A;
  --jb-color-status-success-bg: #DCFCE7;
  --jb-color-status-warning: #CA8A04;
  --jb-color-status-warning-bg: #FEF9C3;
  /* Darkened from #DC2626 (≈3.7:1 over status-error-bg — below WCAG
     AA 4.5:1) to #991B1B (≈7.4:1). Still unmistakably error-red. */
  --jb-color-status-error: #991B1B;
  --jb-color-status-error-bg: #FEE2E2;
  --jb-color-status-info: #0284C7;
  --jb-color-status-info-bg: #E0F2FE;
  /* Short aliases. A lot of in-page CSS reaches for `--jb-color-success`,
     `--jb-color-error`, etc. Without these declared, every such reference
     fell back to its hard-coded literal (light bg + dark fg) and broke
     dark mode — pills stayed light-on-dark, illegible. Aliasing here
     means dark mode's overrides of the canonical status-* tokens flow
     through automatically. */
  --jb-color-success:    var(--jb-color-status-success);
  --jb-color-success-bg: var(--jb-color-status-success-bg);
  --jb-color-warning:    var(--jb-color-status-warning);
  --jb-color-warning-bg: var(--jb-color-status-warning-bg);
  --jb-color-error:      var(--jb-color-status-error);
  --jb-color-error-bg:   var(--jb-color-status-error-bg);
  --jb-color-info:       var(--jb-color-status-info);
  --jb-color-info-bg:    var(--jb-color-status-info-bg);
  /* Same story for the muted-surface alias — used in pills and the
     "subtle button" hover. */
  --jb-color-surface-muted: var(--jb-color-surface-sunken);

  /* Surface — backgrounds layered by elevation */
  --jb-color-surface-canvas: var(--jb-color-neutral-50);     /* page background */
  --jb-color-surface-card: var(--jb-color-neutral-0);        /* cards, panels */
  --jb-color-surface-raised: var(--jb-color-neutral-0);      /* modals, popovers */
  --jb-color-surface-sunken: var(--jb-color-neutral-100);    /* table headers, wells */
  /* Hover tint — used by clickable rows + cards. Has to be a token so
     dark mode can flip it; hard-coding `--jb-color-neutral-50` (or
     #f9fafb) loses text contrast under [data-theme="dark"] because the
     hover stays light while text-primary flips to white. */
  --jb-color-surface-hover: var(--jb-color-neutral-100);

  /* Border */
  --jb-color-border-subtle: var(--jb-color-neutral-200);
  --jb-color-border-default: var(--jb-color-neutral-300);
  --jb-color-border-strong: var(--jb-color-neutral-400);
  --jb-color-border-focus: var(--jb-color-brand-primary);

  /* High-contrast keyboard-focus ring. Distinct from the brand teal so
     the focus indicator is visible even on brand-coloured CTAs (a teal
     ring would disappear into the button). Gold/amber meets WCAG
     1.4.11 (Non-text Contrast ≥ 3:1) against both white and the brand
     teal. Used by the global :focus-visible rule in app.css. */
  --jb-color-focus: #FFD23F;

  /* Text */
  --jb-color-text-primary: var(--jb-color-neutral-900);
  --jb-color-text-secondary: var(--jb-color-neutral-600);
  --jb-color-text-muted: var(--jb-color-neutral-500);
  --jb-color-text-inverse: var(--jb-color-neutral-0);
  --jb-color-text-link: var(--jb-color-brand-primary);
  --jb-color-text-link-hover: var(--jb-color-brand-primary-hover);

  /* ──────────────────────── Spacing ──────────────────────── */
  /* 4px base unit. Use multiples; avoid arbitrary values in components. */

  --jb-space-3xs: 2px;
  --jb-space-2xs: 4px;
  --jb-space-xs: 8px;
  --jb-space-sm: 12px;
  --jb-space-md: 16px;
  --jb-space-lg: 24px;
  --jb-space-xl: 32px;
  --jb-space-2xl: 48px;
  --jb-space-3xl: 64px;
  --jb-space-4xl: 96px;

  /* ─────────────────────── Typography ─────────────────────── */

  --jb-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --jb-font-family-mono: 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Body sizes */
  --jb-text-body-xs: 0.75rem;     /* 12px — fine print, table metadata */
  --jb-text-body-sm: 0.875rem;    /* 14px — dense data tables, secondary text */
  --jb-text-body-md: 1rem;        /* 16px — default body */
  --jb-text-body-lg: 1.125rem;    /* 18px — emphasised body */

  /* Heading sizes */
  --jb-text-heading-sm: 1.125rem;   /* 18px — card titles */
  --jb-text-heading-md: 1.25rem;    /* 20px — section headings */
  --jb-text-heading-lg: 1.5rem;     /* 24px — page subheadings */
  --jb-text-heading-xl: 1.875rem;   /* 30px — page titles */
  --jb-text-heading-2xl: 2.25rem;   /* 36px — hero, marketing */

  /* Weights */
  --jb-text-weight-regular: 400;
  --jb-text-weight-medium: 500;
  --jb-text-weight-semibold: 600;
  --jb-text-weight-bold: 700;

  /* Line heights */
  --jb-text-leading-tight: 1.25;
  --jb-text-leading-snug: 1.4;
  --jb-text-leading-normal: 1.5;
  --jb-text-leading-relaxed: 1.625;

  /* ──────────────────────── Radius ──────────────────────── */

  --jb-radius-none: 0;
  --jb-radius-sm: 2px;
  --jb-radius-md: 4px;
  --jb-radius-lg: 8px;
  --jb-radius-xl: 12px;
  --jb-radius-pill: 9999px;

  /* ──────────────────────── Shadow ──────────────────────── */

  --jb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.06);
  --jb-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.08);
  --jb-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.08), 0 12px 24px rgba(15, 23, 42, 0.12);
  --jb-shadow-focus: 0 0 0 3px rgba(14, 124, 123, 0.25);

  /* ──────────────────────── Z-index ──────────────────────── */

  --jb-z-base: 0;
  --jb-z-dropdown: 100;
  --jb-z-sticky: 200;
  --jb-z-overlay: 300;
  --jb-z-modal: 400;
  --jb-z-popover: 500;
  --jb-z-toast: 600;

  /* ────────────────────── Breakpoints ────────────────────── */
  /* Reference values. Use in @media queries directly — CSS vars don't work in @media. */
  /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */

  /* ────────────────────── Motion ─────────────────────────── */

  --jb-motion-duration-fast: 150ms;
  --jb-motion-duration-base: 200ms;
  --jb-motion-duration-slow: 300ms;
  --jb-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --jb-motion-easing-emphasis: cubic-bezier(0.2, 0, 0, 1);
}

/* Dark mode.
 *
 * Two activation paths:
 *   1. Explicit user choice — `<html data-theme="dark">` set by the
 *      theme toggle component. Wins over system preference.
 *   2. System preference — `prefers-color-scheme: dark` on the OS,
 *      *unless* the user has opted into a specific theme via
 *      `data-theme="light"` on <html>.
 *
 * The split lets us honour OS dark mode by default while still letting
 * a recruiter who's locked their OS to dark force the admin portal
 * into light mode for a screen-share. Same token names in both
 * branches so component CSS never has to test the theme.
 */
:root[data-theme="dark"] {
  --jb-color-surface-canvas: #0B1220;
  --jb-color-surface-card: #131C2E;
  --jb-color-surface-raised: #1A2540;
  --jb-color-surface-sunken: #0F172A;
  --jb-color-surface-hover: #1E2A44;
  --jb-color-text-primary: var(--jb-color-neutral-50);
  --jb-color-text-secondary: var(--jb-color-neutral-300);
  --jb-color-text-muted: var(--jb-color-neutral-400);
  --jb-color-border-subtle: #1F2A44;
  --jb-color-border-default: #2A3656;
  --jb-color-border-strong: var(--jb-color-neutral-500);
  /* Brand teal stays the same hue but shifts to a slightly lighter
     stop so the contrast against the dark surface holds at AA. */
  --jb-color-brand-primary: #2EA8A6;
  --jb-color-brand-primary-hover: #3FBFBE;
  --jb-color-brand-primary-active: #58D1D0;
  --jb-color-text-link: #4FD1D0;
  --jb-color-text-link-hover: #6FE7E5;
  /* Status backgrounds need to be re-tinted — light bg + dark fg
     swaps to a dark-bg + bright-fg pairing. */
  --jb-color-status-success: #4ADE80;
  --jb-color-status-success-bg: #052E1A;
  --jb-color-status-warning: #FACC15;
  --jb-color-status-warning-bg: #2A1F00;
  --jb-color-status-error: #F87171;
  --jb-color-status-error-bg: #2D0B0B;
  --jb-color-status-info: #38BDF8;
  --jb-color-status-info-bg: #052236;
  /* Shadows in dark mode: pure black at higher alpha so they read
     against the dark surface instead of disappearing. */
  --jb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --jb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.45);
  --jb-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.55);
  --jb-shadow-focus: 0 0 0 3px rgba(79, 209, 208, 0.4);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jb-color-surface-canvas: #0B1220;
    --jb-color-surface-card: #131C2E;
    --jb-color-surface-raised: #1A2540;
    --jb-color-surface-sunken: #0F172A;
    --jb-color-surface-hover: #1E2A44;
    --jb-color-text-primary: var(--jb-color-neutral-50);
    --jb-color-text-secondary: var(--jb-color-neutral-300);
    --jb-color-text-muted: var(--jb-color-neutral-400);
    --jb-color-border-subtle: #1F2A44;
    --jb-color-border-default: #2A3656;
    --jb-color-border-strong: var(--jb-color-neutral-500);
    --jb-color-brand-primary: #2EA8A6;
    --jb-color-brand-primary-hover: #3FBFBE;
    --jb-color-brand-primary-active: #58D1D0;
    --jb-color-text-link: #4FD1D0;
    --jb-color-text-link-hover: #6FE7E5;
    --jb-color-status-success: #4ADE80;
    --jb-color-status-success-bg: #052E1A;
    --jb-color-status-warning: #FACC15;
    --jb-color-status-warning-bg: #2A1F00;
    --jb-color-status-error: #F87171;
    --jb-color-status-error-bg: #2D0B0B;
    --jb-color-status-info: #38BDF8;
    --jb-color-status-info-bg: #052236;
    --jb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
    --jb-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.45);
    --jb-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 24px rgba(0, 0, 0, 0.55);
    --jb-shadow-focus: 0 0 0 3px rgba(79, 209, 208, 0.4);
    color-scheme: dark;
  }
}