/* ==========================================================================
   OrbisX Design System — CSS Custom Properties
   Palette: Cyan primary (logo) · Graphite neutrals
   Note: brand tokens are still named --color-brand-emerald-* for backward
   compatibility; values now map to the logo cyan scale.
   ========================================================================== */

:root {
  /* ── Brand Colours (Logo Cyan) ───────────────────────────────────────── */
  --color-brand-emerald:       #00C4E0; /* logo cyan */
  --color-brand-emerald-dark:  #00A8C2;
  --color-brand-emerald-deep:  #007F93;
  --color-brand-emerald-light: #CFF5FB;
  --color-brand-emerald-50:    #E6F9FD;
  --color-brand-emerald-glow:  rgba(0, 196, 224, 0.15);

  /* Legacy brand navy/gunmetal kept for marketing/login artwork */
  --color-brand-navy:       #1A2E44;
  --color-brand-gunmetal:   #1C2333;
  --color-brand-silver:     #C8D0DC;

  /* Accent */
  --color-brand-cyan:       #00C4E0;
  --color-brand-cyan-dark:  #00A8C2;
  --color-brand-cyan-glow:  rgba(0, 196, 224, 0.15);
  --color-brand-cyan-light: #E6F9FD;

  /* ── Light Mode Palette (Default — graphite canvas) ──────────────────── */
  --color-bg-primary:     #FFFFFF;
  --color-bg-secondary:   #F7F7FB;   /* app canvas */
  --color-bg-tertiary:    #EEF0F5;
  --color-border:         #E5E7EB;
  --color-border-subtle:  #F0F2F6;
  --color-text-primary:   #0F1115;
  --color-text-body:      #3D4452;
  --color-text-secondary: #6B7280;
  --color-text-disabled:  #9CA3AF;

  /* ── Sidebar (Light — Dashly-style) ──────────────────────────────────── */
  --color-sidebar-bg:        #FFFFFF;
  --color-sidebar-border:    #F0F2F6;
  --color-sidebar-text:      #6B7280;
  --color-sidebar-text-hover:#0F1115;
  --color-sidebar-active:    var(--color-brand-emerald);
  --color-sidebar-hover:     #F4F6FB;
  --color-sidebar-active-bg: var(--color-brand-emerald);

  /* ── Semantic Colours ────────────────────────────────────────────────── */
  --color-success:       #10B981;
  --color-success-light: #D1FAE5;
  --color-success-dark:  #065F46;
  --color-warning:       #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-warning-dark:  #92400E;
  --color-danger:        #EF4444;
  --color-danger-light:  #FEE2E2;
  --color-danger-dark:   #991B1B;
  --color-info:          #3B82F6;
  --color-info-light:    #DBEAFE;
  --color-info-dark:     #1E40AF;

  /* ── Accent Tints (for icon tiles on cards) ──────────────────────────── */
  --tile-emerald-bg: #D1FAE5; --tile-emerald-fg: #047857;
  --tile-cyan-bg:    #CFF5FB; --tile-cyan-fg:    #087990;
  --tile-violet-bg:  #EDE9FE; --tile-violet-fg:  #5B21B6;
  --tile-amber-bg:   #FEF3C7; --tile-amber-fg:   #92400E;
  --tile-rose-bg:    #FFE4E6; --tile-rose-fg:    #9F1239;
  --tile-slate-bg:   #E5E7EB; --tile-slate-fg:   #374151;

  /* ── Status Badge Colours (Soft Pastel) ──────────────────────────────── */
  --badge-success-bg:   #D1FAE5;  --badge-success-text:   #065F46;
  --badge-scheduled-bg: #DBEAFE;  --badge-scheduled-text: #1E40AF;
  --badge-pending-bg:   #F1F5F9;  --badge-pending-text:   #475569;
  --badge-warning-bg:   #FEF3C7;  --badge-warning-text:   #92400E;
  --badge-danger-bg:    #FEE2E2;  --badge-danger-text:    #991B1B;
  --badge-paused-bg:    #EDE9FE;  --badge-paused-text:    #5B21B6;

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --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;

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

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --space-0:   0px;
  --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;
  --space-20: 80px;

  /* ── Border Radius (softer, Dashly-style) ────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows (softer, closer to template) ────────────────────────────── */
  --shadow-xs:   0 1px 2px 0 rgba(15, 17, 21, 0.04);
  --shadow-sm:   0 1px 3px 0 rgba(15, 17, 21, 0.06), 0 1px 2px -1px rgba(15, 17, 21, 0.04);
  --shadow-md:   0 4px 12px -2px rgba(15, 17, 21, 0.08), 0 2px 4px -2px rgba(15, 17, 21, 0.04);
  --shadow-lg:   0 12px 24px -6px rgba(15, 17, 21, 0.10), 0 4px 8px -4px rgba(15, 17, 21, 0.04);
  --shadow-xl:   0 24px 48px -12px rgba(15, 17, 21, 0.14), 0 8px 16px -8px rgba(15, 17, 21, 0.06);
  --shadow-card: 0 1px 3px 0 rgba(15, 17, 21, 0.04), 0 1px 2px 0 rgba(15, 17, 21, 0.03);

  /* ── Easing ──────────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.12, 0.64, 1); /* subtle overshoot */
  --ease-bounce:  cubic-bezier(0.68, -0.2, 0.265, 1.2); /* toned-down bounce */

  /* ── Duration ────────────────────────────────────────────────────────── */
  --duration-fast:   100ms;
  --duration-normal: 200ms;
  --duration-medium: 300ms;
  --duration-slow:   500ms;

  /* ── Breakpoints (reference only — use in media queries) ─────────────── */
  --screen-sm:  640px;
  --screen-md:  768px;
  --screen-lg:  1024px;
  --screen-xl:  1280px;
  --screen-2xl: 1536px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --sidebar-width: 260px;
  --topbar-height: 68px;
  --tabbar-height: 60px;
}