/* ============================================================================
   WorkForce — Design tokens
   Two related brand voices sharing one warm palette:
     • Employee (mobile)  — coral/red, high energy, big touch targets
     • Admin (web console) — amber-orange with a categorical accent set
   ========================================================================= */

:root {
  /* ── Employee brand: coral ──────────────────────────────────────────── */
  --color-primary: #e8384f;
  --color-primary-dark: #c31e37;
  --color-primary-light: #ffe6e8;
  --color-primary-mid: #ff8a8f;
  --color-primary-pale: #fff2f3;
  --color-primary-rgb: 232, 56, 79;
  --color-accent: #ff7a5c;

  --grad-primary: linear-gradient(135deg, #ff8a6b 0%, #f4485c 48%, #d8213c 100%);
  --grad-primary-soft: linear-gradient(135deg, #fff1ef 0%, #ffe4e7 100%);
  --grad-page: linear-gradient(180deg, #fff5f4 0%, #fdf1f3 45%, #fbeef4 100%);

  /* ── Categorical accents (used by both apps) ────────────────────────── */
  --c-coral: #f4485c;
  --c-orange: #ff8534;
  --c-amber: #f5a524;
  --c-green: #12b886;
  --c-teal: #0fb5a7;
  --c-blue: #3b82f6;
  --c-sky: #4dabf7;
  --c-violet: #7c5cfc;
  --c-pink: #ec4e8c;

  --c-coral-soft: #ffe7e9;
  --c-orange-soft: #fff0e3;
  --c-amber-soft: #fff5df;
  --c-green-soft: #dcfaef;
  --c-teal-soft: #d9f7f4;
  --c-blue-soft: #e5efff;
  --c-sky-soft: #e4f2ff;
  --c-violet-soft: #eee9ff;
  --c-pink-soft: #ffe6f0;

  /* ── Status ─────────────────────────────────────────────────────────── */
  --color-success: #0b8f68;
  --color-success-bg: #dcfaef;
  --color-success-solid: #12b886;
  --color-danger: #d1293d;
  --color-danger-bg: #ffe4e6;
  --color-danger-dark: #a4162a;
  --color-warning: #b45309;
  --color-warning-bg: #fff2d9;
  --color-info: #2f74e0;
  --color-info-bg: #e5efff;
  --color-navy: #24243a;

  /* ── Neutrals ───────────────────────────────────────────────────────── */
  --color-bg: #fdf7f7;
  --color-surface: #ffffff;
  --color-surface-2: #fff9f9;
  --color-border: #f0e0e2;
  --color-border-strong: #e6d2d5;
  --color-text: #221d26;
  --color-text-muted: #746a72;
  --color-text-faint: #a2969d;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Radius & elevation ─────────────────────────────────────────────── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(70, 30, 40, 0.05), 0 1px 3px rgba(70, 30, 40, 0.04);
  --shadow-md: 0 4px 18px rgba(90, 40, 55, 0.08);
  --shadow-lg: 0 16px 40px rgba(90, 40, 55, 0.14);
  --shadow-glow: 0 10px 26px rgba(232, 56, 79, 0.32);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-numeric: "Plus Jakarta Sans", ui-monospace, "SF Mono", "Segoe UI", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;
  --font-size-2xl: 32px;
  --font-size-3xl: 42px;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --bottom-nav-height: 68px;
  --header-height: 56px;
  --max-content-width: 480px;
  --z-header: 100;
  --z-nav: 100;
  --z-modal: 500;
  --z-toast: 600;
}