/* ============================================================
   MATCHPOINTE HR COMMAND — DESIGN TOKENS
   Light enterprise workspace.
   Clean white canvas • cyan signal • Matchpointe red
   ============================================================ */

/* --- Webfonts --------------------------------------------------
   Primary family: Helvetica Neue (licensed, uploaded by brand).
   Used for ALL UI, display, headings, body, micro-labels.
   Mono (tabular data, IDs, code): JetBrains Mono via Google Fonts.
   ---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueUltraLight.otf") format("opentype");       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueUltraLightItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueThin.otf") format("opentype");             font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueThinItalic.otf") format("opentype");       font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueLight.otf") format("opentype");            font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueLightItalic.otf") format("opentype");      font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueRoman.otf") format("opentype");            font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueItalic.ttf") format("truetype");           font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueMedium.otf") format("opentype");           font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueMediumItalic.otf") format("opentype");     font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueBold.otf") format("opentype");             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueBoldItalic.otf") format("opentype");       font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueHeavy.otf") format("opentype");            font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueHeavyItalic.otf") format("opentype");      font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueBlack.otf") format("opentype");            font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue"; src: url("/fonts/HelveticaNeue/HelveticaNeueBlackItalic.otf") format("opentype");      font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- CORE CANVAS ---------- */
  --bg-0: #ffffff;           /* page/base */
  --bg-1: #ffffff;           /* app shell */
  --bg-2: #ffffff;           /* sidebar, headers */
  --bg-3: #ffffff;           /* cards (resting) */
  --bg-4: #f6f8fb;           /* cards (hover) / raised surface */
  --bg-5: #e8edf5;           /* selected rows, subtle highlight */

  /* ---------- FOREGROUND / TEXT ---------- */
  --fg-1: #111827;           /* primary text */
  --fg-2: #374151;           /* secondary text */
  --fg-3: #6b7280;           /* tertiary / meta */
  --fg-4: #9ca3af;           /* muted, disabled */
  --fg-on-accent: #04131a;   /* text on teal/cyan surfaces */

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border-1: rgba(15, 23, 42, 0.08);      /* subtle hairline */
  --border-2: rgba(15, 23, 42, 0.12);      /* standard card border */
  --border-3: rgba(15, 23, 42, 0.18);      /* stronger divider */
  --border-accent: rgba(45, 212, 191, 0.35); /* teal glow edge */

  /* ---------- ACCENT: TEAL/CYAN (primary signal) ---------- */
  --accent-50:  #ecfeff;
  --accent-100: #cffafe;
  --accent-200: #a5f3fc;
  --accent-300: #67e8f9;
  --accent-400: #22d3ee;     /* primary */
  --accent-500: #06b6d4;     /* primary pressed */
  --accent-600: #0891b2;
  --accent-700: #0e7490;
  --accent-glow: rgba(34, 211, 238, 0.35);

  /* ---------- BRAND: MATCHPOINTE RED ---------- */
  --brand-50:  #fef2f1;
  --brand-300: #f3796b;
  --brand-500: #d63b2d;       /* Matchpointe core red */
  --brand-600: #b82b20;
  --brand-700: #8f2017;

  /* ---------- SEMANTIC ---------- */
  --success-400: #34d399;
  --success-500: #10b981;
  --success-bg:  rgba(16, 185, 129, 0.12);

  --warn-400:    #fbbf24;
  --warn-500:    #f59e0b;
  --warn-bg:     rgba(245, 158, 11, 0.14);

  --danger-400:  #f87171;
  --danger-500:  #ef4444;
  --danger-bg:   rgba(239, 68, 68, 0.14);

  --info-400:    #60a5fa;
  --info-500:    #3b82f6;
  --info-bg:     rgba(59, 130, 246, 0.14);

  /* ---------- CATEGORICAL (for charts/dept tags) ---------- */
  --cat-design:      #ec4899;  /* pink */
  --cat-engineering: #8b5cf6;  /* violet */
  --cat-finance:     #22d3ee;  /* cyan */
  --cat-hr:          #10b981;  /* emerald */
  --cat-marketing:   #f59e0b;  /* amber */
  --cat-operations:  #f97316;  /* orange */

  /* ---------- GRADIENTS ---------- */
  --grad-card-edge: linear-gradient(135deg, rgba(34,211,238,0.22) 0%, rgba(34,211,238,0) 35%, rgba(236,72,153,0.0) 65%, rgba(139,92,246,0.18) 100%);
  --grad-tile-teal: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  --grad-tile-brand: linear-gradient(135deg, #f3796b 0%, #d63b2d 100%);
  --grad-app-bg: #f4f6f8;

  /* ---------- OPERATIONS REFRESH ---------- */
  --ops-frame: #f4f6f8;
  --ops-rail: #fbfcfd;
  --ops-surface: #ffffff;
  --ops-surface-soft: #f8fafc;
  --ops-border: #dfe5ec;
  --ops-border-soft: #eef2f6;
  --ops-red: #d71920;
  --ops-red-soft: #fff0f0;
  --ops-red-line: #f4c9cc;
  --ops-teal: #008f95;
  --ops-teal-soft: #e9f8f8;
  --grad-kpi-hover: linear-gradient(180deg, rgba(34,211,238,0.06) 0%, rgba(34,211,238,0) 100%);

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:  0 10px 24px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.08);
  --shadow-lg:  0 18px 44px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.08);
  --shadow-glow-teal: 0 0 0 1px rgba(34,211,238,0.18), 0 8px 28px rgba(34,211,238,0.10);
  --shadow-glow-brand: 0 0 0 1px rgba(214,59,45,0.22), 0 8px 28px rgba(214,59,45,0.10);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.8);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

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

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* ---------- TYPE SCALE ---------- */
  --font-sans: "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Helvetica Neue", "Helvetica", "Arial", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro: 11px;   /* uppercase micro-labels */
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;   /* default UI */
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;   /* KPI numbers */
  --fs-4xl:   48px;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.5;

  --tracking-tight:  0;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.14em;   /* uppercase micro-labels */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--grad-app-bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4, h4 {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg-1);
}

.p, p {
  font-size: var(--fs-base);
  color: var(--fg-2);
  line-height: var(--lh-base);
}

/* Micro-label — the signature uppercase tracked caps that title cards */
.micro, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* KPI / hero numbers */
.kpi {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.meta {
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

.code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent-300);
}