/* 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;
  --jb-color-status-error: #DC2626;
  --jb-color-status-error-bg: #FEE2E2;
  --jb-color-status-info: #0284C7;
  --jb-color-status-info-bg: #E0F2FE;

  /* 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 */

  /* 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);

  /* 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 — placeholder, refined when admin dark theme lands */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override only what changes; structure stays the same so components don't branch */
    --jb-color-surface-canvas: var(--jb-color-neutral-900);
    --jb-color-surface-card: var(--jb-color-neutral-800);
    --jb-color-surface-raised: var(--jb-color-neutral-800);
    --jb-color-surface-sunken: var(--jb-color-neutral-900);
    --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: var(--jb-color-neutral-700);
    --jb-color-border-default: var(--jb-color-neutral-600);
    --jb-color-border-strong: var(--jb-color-neutral-500);
  }
}