/* ============================================
   Satellite Home Watch — Design System
   CSS Custom Properties & Variables
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --navy-900: #0a1628;
  --navy-800: #0f2040;
  --navy-700: #162d56;
  --navy-600: #1e3a6e;
  --navy-500: #2a4f8f;
  --navy-400: #3d67b0;
  --navy-300: #6189c8;
  --navy-200: #94b3df;
  --navy-100: #c8d9f0;
  --navy-50:  #eaf0f9;

  --cream-900: #8a7d6a;
  --cream-800: #a89880;
  --cream-700: #c4b49a;
  --cream-600: #d8c9b4;
  --cream-500: #e8dece;
  --cream-400: #f0e8da;
  --cream-300: #f5efe4;
  --cream-200: #f8f4ed;
  --cream-100: #fbf8f3;
  --cream-50:  #fefcf9;

  --blue-gray-900: #2c3a4e;
  --blue-gray-800: #3d4f66;
  --blue-gray-700: #4f647e;
  --blue-gray-600: #637a96;
  --blue-gray-500: #7a92ae;
  --blue-gray-400: #94aac3;
  --blue-gray-300: #b0c2d6;
  --blue-gray-200: #ccd8e6;
  --blue-gray-100: #e4ecf4;
  --blue-gray-50:  #f2f6fb;

  /* ── Semantic Colors ── */
  --color-bg-primary:    var(--cream-100);
  --color-bg-secondary:  var(--cream-200);
  --color-bg-tertiary:   var(--cream-300);
  --color-surface:       #ffffff;
  --color-surface-raised: #ffffff;
  --color-navy-surface:  var(--navy-800);
  --color-navy-deep:     var(--navy-900);

  --color-primary:       var(--navy-700);
  --color-primary-hover: var(--navy-600);
  --color-primary-light: var(--navy-50);

  --color-accent:        var(--blue-gray-600);
  --color-accent-hover:  var(--blue-gray-700);
  --color-accent-light:  var(--blue-gray-50);

  --color-text-primary:  var(--navy-900);
  --color-text-secondary: #4a5568;
  --color-text-muted:    #718096;
  --color-text-light:    #a0aec0;
  --color-text-inverse:  #ffffff;
  --color-text-navy:     var(--cream-50);

  /* ── Status Colors ── */
  --status-scheduled-bg:    #eff6ff;
  --status-scheduled-text:  #1d4ed8;
  --status-scheduled-border: #bfdbfe;

  --status-inprogress-bg:   #fffbeb;
  --status-inprogress-text: #b45309;
  --status-inprogress-border: #fde68a;

  --status-completed-bg:    #f0fdf4;
  --status-completed-text:  #15803d;
  --status-completed-border: #bbf7d0;

  --status-cancelled-bg:    #fef2f2;
  --status-cancelled-text:  #dc2626;
  --status-cancelled-border: #fecaca;

  --status-open-bg:         #fef2f2;
  --status-open-text:       #b91c1c;
  --status-open-border:     #fca5a5;

  --status-resolved-bg:     #f0fdf4;
  --status-resolved-text:   #15803d;
  --status-resolved-border: #86efac;

  --status-neutral-bg:      var(--blue-gray-50);
  --status-neutral-text:    var(--blue-gray-700);
  --status-neutral-border:  var(--blue-gray-200);

  --priority-low-bg:        #f0fdf4;
  --priority-low-text:      #15803d;
  --priority-medium-bg:     #fffbeb;
  --priority-medium-text:   #b45309;
  --priority-high-bg:       #fff7ed;
  --priority-high-text:     #c2410c;
  --priority-urgent-bg:     #fef2f2;
  --priority-urgent-text:   #b91c1c;

  /* ── Typography ── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'DM Sans', 'Inter', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  2;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(10, 22, 40, 0.05);
  --shadow-sm:  0 1px 3px rgba(10, 22, 40, 0.08), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md:  0 4px 6px rgba(10, 22, 40, 0.07), 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-lg:  0 10px 15px rgba(10, 22, 40, 0.08), 0 4px 6px rgba(10, 22, 40, 0.04);
  --shadow-xl:  0 20px 25px rgba(10, 22, 40, 0.10), 0 8px 10px rgba(10, 22, 40, 0.05);
  --shadow-2xl: 0 25px 50px rgba(10, 22, 40, 0.15);
  --shadow-navy: 0 4px 16px rgba(10, 22, 40, 0.25);
  --shadow-glow: 0 0 0 3px rgba(30, 58, 110, 0.15);

  /* ── Borders ── */
  --border-light: 1px solid rgba(10, 22, 40, 0.08);
  --border-medium: 1px solid rgba(10, 22, 40, 0.14);
  --border-strong: 1px solid rgba(10, 22, 40, 0.22);
  --border-navy: 1px solid rgba(255, 255, 255, 0.1);

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Layout ── */
  --sidebar-width:         260px;
  --sidebar-collapsed:     72px;
  --topbar-height:         64px;
  --container-max:         1280px;
  --container-narrow:      960px;
  --container-wide:        1440px;
}