/* === FIXHOME CRM — Design Tokens v2 === */
/* Single source of truth. All CSS must use these variables. */
/* Never hardcode a color, font-size, spacing, or radius. */

:root {
  /* ── Brand ── */
  --brand:        #5856D6;
  --brand-dark:   #4240C4;
  --brand-hover:  #4240C4;
  --brand-light:  #EEEEFF;
  --brand-border: #C9C8F2;
  --brand-rgb:    88, 86, 214;

  /* ── Semantic colours ── */
  --success:        #34C759;
  --success-light:  #E8F9ED;
  --success-bg:     #E8F9ED;
  --success-border: #B7ECC5;
  --warning:        #FF9500;
  --warning-light:  #FFF3E0;
  --warning-bg:     #FFF3E0;
  --warning-border: #FFD9A1;
  --danger:         #FF3B30;
  --danger-light:   #FFECEB;
  --danger-bg:      #FFEBEA;
  --danger-border:  #FFC9C5;
  --info:           #007AFF;
  --info-light:     #EAF3FF;
  --info-bg:        #EAF3FF;
  --info-border:    #B3D4FF;

  /* ── Neutral scale ── */
  --gray-50:  #F9F9FB;
  --gray-100: #F2F2F7;
  --gray-200: #E5E5EA;
  --gray-300: #D1D1D6;
  --gray-400: #AEAEB2;
  --gray-500: #8E8E93;
  --gray-600: #636366;
  --gray-700: #48484A;
  --gray-800: #3A3A3C;
  --gray-900: #1C1C1E;

  /* ── Backward-compat aliases (--slate-* = --gray-*) ── */
  --slate-50:  var(--gray-50);
  --slate-100: var(--gray-100);
  --slate-200: var(--gray-200);
  --slate-300: var(--gray-300);
  --slate-400: var(--gray-400);
  --slate-500: var(--gray-500);
  --slate-600: var(--gray-600);
  --slate-700: var(--gray-700);
  --slate-800: var(--gray-800);
  --slate-900: var(--gray-900);

  /* ── Semantic surface tokens ── */
  --page-bg:        var(--gray-100);
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary:  var(--gray-400);

  /* ── Status: Lead ── */
  --status-new:                var(--info);
  --status-new-bg:             var(--info-bg);
  --status-estimate-needed:    var(--warning);
  --status-estimate-needed-bg: var(--warning-bg);
  --status-estimate-sent:      var(--brand);
  --status-estimate-sent-bg:   var(--brand-light);
  --status-followup:           #FF6B00;
  --status-followup-bg:        #FFF0E6;
  --status-approved:           var(--success);
  --status-approved-bg:        var(--success-bg);
  --status-converted:          #30D158;
  --status-converted-bg:       #E5F9EC;
  --status-done:               var(--gray-600);
  --status-done-bg:            var(--gray-100);
  --status-paid:               var(--gray-900);
  --status-paid-bg:            var(--gray-200);
  --status-lost:               var(--danger);
  --status-lost-bg:            var(--danger-bg);

  /* ── Typography ── */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-ui: var(--font-family);

  /* Scale — 4 semantic sizes + 3 display sizes */
  --font-xs:   12px;   /* caption, badge */
  --font-sm:   13px;   /* small label */
  --font-base: 14px;   /* body, table cell */
  --font-md:   16px;   /* card title */
  --font-lg:   18px;   /* section heading */
  --font-xl:   22px;   /* sub-page title */
  --font-2xl:  28px;   /* page title */
  --font-3xl:  34px;   /* hero (login) */

  /* Backward-compat aliases */
  --font-size-xs:   var(--font-xs);
  --font-size-sm:   var(--font-sm);
  --font-size-base: var(--font-base);
  --font-size-md:   var(--font-md);
  --font-size-lg:   var(--font-lg);
  --font-size-xl:   var(--font-xl);
  --font-size-2xl:  var(--font-2xl);
  --font-size-3xl:  var(--font-3xl);

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

  --line-height-tight:  1.2;
  --line-height-snug:   1.35;
  --line-height-normal: 1.5;

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

  /* Backward-compat gap shorthands */
  --gap:    12px;
  --gap-sm: 8px;
  --gap-lg: 20px;

  /* ── Layout ── */
  --page-max-width:       1600px;
  --page-padding-desktop: var(--space-6);    /* 24px */
  --page-padding-tablet:  var(--space-5);    /* 20px */
  --page-padding-mobile:  var(--space-4);    /* 16px */

  /* ── Navigation ── */
  --topbar-height:     58px;
  --desktop-sidebar-width: 240px;
  --nav-height-mobile: 56px;
  --nav-width-desktop: 240px;

  /* ── Control heights ── */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* ── Table ── */
  --table-row-height:    56px;
  --table-header-height: 44px;

  /* ── Cards ── */
  --card-padding:       var(--space-5);    /* 20px */
  --card-padding-sm:    var(--space-4);    /* 16px */
  --card-gap:           var(--space-4);    /* 16px */
  --card-shadow:        0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --card-shadow-hover:  0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-full: 999px;

  /* Backward-compat radius aliases */
  --r-sm:  var(--radius-sm);
  --r:     10px;
  --r-md:  var(--radius-md);
  --r-lg:  var(--radius-lg);
  --r-xl:  var(--radius-xl);
  --r-2xl: 22px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);

  /* ── Touch targets ── */
  --tap-min: 44px;

  /* ── Z-index ── */
  --z-nav:   100;
  --z-fab:   150;
  --z-sheet: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Motion ── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;
  --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
}