/* ============================================================
   WOW Studio CRM — Design Tokens (Phase 1)
   Single source of truth for colour, type, spacing, radius,
   shadow and layout. Every prototype page loads this file first.
   Admin portal: desktop-first, light theme only in v1.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --color-primary-50:  #F3EFFB;
  --color-primary-100: #E6DDF6;
  --color-primary-200: #CBB9EC;
  --color-primary-300: #A98EDD;
  --color-primary-400: #8663CB;
  --color-primary-500: #6B44B5;
  --color-primary-600: #57339A;
  --color-primary-700: #46287C;
  --color-primary-800: #351E5E;
  --color-primary-900: #241440;

  /* Accent (gold) — trials, highlights, "attention" without alarm */
  --color-accent-50:  #FBF4E3;
  --color-accent-100: #F5E6BF;
  --color-accent-500: #C99A2E;
  --color-accent-700: #8F6C1B;

  /* ---------- Neutrals ---------- */
  --color-gray-0:   #FFFFFF;
  --color-gray-50:  #F8F8FA;
  --color-gray-100: #F1F1F4;
  --color-gray-200: #E3E3E8;
  --color-gray-300: #CFCFD6;
  --color-gray-400: #A2A2AD;
  --color-gray-500: #737380;
  --color-gray-600: #55555F;
  --color-gray-700: #3F3F47;
  --color-gray-800: #2A2A31;
  --color-gray-900: #17171B;

  /* ---------- Semantic ---------- */
  --color-success-50:  #EAF7EF;
  --color-success-100: #CDEBD9;
  --color-success-500: #1E8E4E;
  --color-success-700: #15693A;

  --color-warning-50:  #FFF6E5;
  --color-warning-100: #FEE7B8;
  --color-warning-500: #D98A0B;
  --color-warning-700: #9A6208;

  --color-danger-50:  #FDECEC;
  --color-danger-100: #F9CFCF;
  --color-danger-500: #D23F3F;
  --color-danger-700: #A32B2B;

  --color-info-50:  #E9F1FC;
  --color-info-100: #CCDDF7;
  --color-info-500: #2E6FD1;
  --color-info-700: #21519A;

  /* ---------- Aliases (use these in components) ---------- */
  --bg-app:        var(--color-gray-50);
  --bg-surface:    var(--color-gray-0);
  --bg-subtle:     var(--color-gray-100);
  --bg-sidebar:    var(--color-primary-900);
  --bg-sidebar-hover: rgba(255,255,255,0.06);
  --bg-sidebar-active: rgba(255,255,255,0.12);

  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted:     var(--color-gray-500);
  --text-inverse:   var(--color-gray-0);
  --text-link:      var(--color-primary-600);

  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-focus:   var(--color-primary-500);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radius ---------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(23,23,27,0.06);
  --shadow-md: 0 4px 12px rgba(23,23,27,0.10);
  --shadow-lg: 0 12px 32px rgba(23,23,27,0.16);

  /* ---------- Layout ---------- */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --topbar-height: 56px;
  --content-padding: var(--space-6);
  --admin-min-width: 1280px;
  --mobile-min-width: 360px;

  /* ---------- Motion ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Z-index ---------- */
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-drawer: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* ---------- Status colour map ----------
   Every status in the requirements has exactly one colour family.
   Badge/chip components read these via data-status attributes.   */
:root {
  /* Slot lifecycle (6.3) */
  --status-scheduled:   var(--color-info-500);
  --status-used:        var(--color-success-500);
  --status-cancelled:   var(--color-gray-500);
  --status-released:    var(--color-gray-400);
  --status-rescheduled: var(--color-warning-500);

  /* Invoice (6.7) */
  --status-draft:          var(--color-gray-500);
  --status-issued:         var(--color-info-500);
  --status-partially-paid: var(--color-warning-500);
  --status-paid:           var(--color-success-500);
  --status-void:           var(--color-danger-500);

  /* Fee Run buckets (6.7.1) */
  --status-unpaid:         var(--color-danger-500);
  --status-needs-checking: var(--color-primary-500);

  /* Salary sheet (6.8) */
  --status-confirmed:  var(--color-info-500);
  --status-signed-off: var(--color-success-500);
  --status-rejected:   var(--color-danger-500);

  /* Lead pipeline (6.1) */
  --status-new:            var(--color-info-500);
  --status-contacted:      var(--color-primary-500);
  --status-trial-booked:   var(--color-accent-500);
  --status-trial-attended: var(--color-accent-700);
  --status-converted:      var(--color-success-500);
  --status-lost:           var(--color-gray-500);

  /* Room booking (6.4) */
  --status-tentative: var(--color-warning-500);
  --status-locked:    var(--color-success-500);

  /* Attendance (6.5) */
  --status-present: var(--color-success-500);
  --status-absent:  var(--color-danger-500);
  --status-late:    var(--color-warning-500);
  --status-pending: var(--color-gray-400);
}