/* ==========================================================================
   ABHYASIKA OWNER MANAGEMENT SYSTEM — MODERN DESIGN SYSTEM TOKENS
   Calm, Clean, Modern, Elegant, and Ultra-Adaptable
   ========================================================================== */

:root {
  /* ==========================================================================
     1. COLOR PALETTES
     ========================================================================== */

  /* Primary Warm Saffron/Orange Brand */
  --color-orange-900: #7C2D12;
  --color-orange-800: #9A3412;
  --color-orange-700: #C2410C;
  --color-orange-600: #EA580C;
  --color-orange-500: #F97316;      /* Primary Brand Action (#F97316) */
  --color-orange-400: #FB923C;
  --color-orange-200: #FED7AA;
  --color-orange-100: #FFEDD5;      /* Soft Orange Border */
  --color-orange-50:  #FFF7ED;      /* Soft Orange Surface */

  /* Deep Slate & Navy (Neutral Slate Hierarchy) */
  --color-slate-950: #090D16;       /* Ultra-Deep Slate */
  --color-slate-900: #0F172A;       /* Primary Text Slate (#0F172A) */
  --color-slate-800: #1E293B;       /* Sidebar / Headers */
  --color-slate-700: #334155;       /* Secondary Text / Icons */
  --color-slate-600: #475569;       /* Secondary Labels */
  --color-slate-500: #64748B;       /* Muted / Tertiary Text */
  --color-slate-400: #94A3B8;       /* Placeholders / Dim Text */
  --color-slate-300: #CBD5E1;       /* Medium Borders */
  --color-slate-200: #E2E8F0;       /* Standard Divider / Border (#E2E8F0) */
  --color-slate-100: #F1F5F9;       /* Light Gray Surface (#F1F5F9) */
  --color-slate-50:  #F8FAFC;       /* App Background (#F8FAFC) */
  --color-white:     #FFFFFF;       /* Pure White Card Surface */

  /* Success Emerald / Green */
  --color-green-800: #065F46;
  --color-green-700: #047857;
  --color-green-600: #059669;       /* Text Success */
  --color-green-500: #10B981;       /* Emerald Green */
  --color-green-200: #A7F3D0;
  --color-green-100: #D1FAE5;       /* Green Border */
  --color-green-50:  #ECFDF5;       /* Green Soft Surface */

  /* Warning Amber / Gold */
  --color-amber-800: #92400E;
  --color-amber-700: #B45309;
  --color-amber-600: #D97706;       /* Text Warning */
  --color-amber-500: #F59E0B;       /* Amber Primary */
  --color-amber-200: #FDE68A;
  --color-amber-100: #FEF3C7;       /* Amber Border */
  --color-amber-50:  #FFFBEB;       /* Amber Soft Surface */

  /* Danger Crimson / Rose */
  --color-red-800:   #991B1B;
  --color-red-700:   #B91C1C;
  --color-red-600:   #DC2626;       /* Text Danger */
  --color-red-500:   #EF4444;       /* Rose Red Primary */
  --color-red-200:   #FECACA;
  --color-red-100:   #FEE2E2;       /* Red Border */
  --color-red-50:    #FEF2F2;       /* Red Soft Surface */

  /* Purple / Indigo (Reserved, Bookings, Analytics) */
  --color-purple-800: #5B21B6;
  --color-purple-700: #6D28D9;
  --color-purple-600: #7C3AED;
  --color-purple-500: #8B5CF6;
  --color-purple-200: #DDD6FE;
  --color-purple-100: #EDE9FE;
  --color-purple-50:  #F5F3FF;

  --color-indigo-600: #4F46E5;
  --color-indigo-100: #E0E7FF;
  --color-indigo-50:  #EEF2FF;

  /* ==========================================================================
     2. SEMANTIC TOKENS
     ========================================================================== */
  --bg-primary: #F8FAFC;
  --bg-secondary: #F1F5F9;
  --bg-canvas: #F8FAFC;

  --surface-primary: #FFFFFF;
  --surface-secondary: #F8FAFC;
  --surface-subtle: #F1F5F9;
  --surface-hover: #F8FAFC;
  --surface-card: #FFFFFF;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #64748B;
  --text-dim: #94A3B8;
  --text-inverse: #FFFFFF;

  --border-primary: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-strong: #CBD5E1;
  --border-focus: #F97316;

  --brand-primary: #F97316;
  --brand-hover: #EA580C;
  --brand-navy: #0F172A;
  --brand-accent: #F97316;
  --brand-light: #FFF7ED;
  --brand-border: #FFEDD5;

  --status-success: #10B981;
  --status-success-bg: #ECFDF5;
  --status-success-border: #A7F3D0;
  --status-success-text: #065F46;

  --status-warning: #F59E0B;
  --status-warning-bg: #FFFBEB;
  --status-warning-border: #FDE68A;
  --status-warning-text: #92400E;

  --status-danger: #EF4444;
  --status-danger-bg: #FEF2F2;
  --status-danger-border: #FECACA;
  --status-danger-text: #991B1B;

  --status-booked: #8B5CF6;
  --status-booked-bg: #F5F3FF;
  --status-booked-border: #DDD6FE;
  --status-booked-text: #5B21B6;

  /* Aliases for compatibility */
  --color-primary: var(--brand-primary);
  --color-primary-hover: var(--brand-hover);
  --color-primary-accent: var(--brand-accent);
  --color-primary-light: var(--brand-light);
  --color-primary-border: var(--brand-border);

  --color-navy-950: var(--color-slate-950);
  --color-navy-900: var(--color-slate-900);
  --color-navy-800: var(--color-slate-800);
  --color-navy-700: var(--color-slate-700);
  --color-navy-100: var(--color-slate-200);
  --color-navy-50:  var(--color-slate-50);

  --color-success: var(--status-success);
  --color-success-hover: var(--color-green-700);
  --color-success-bg: var(--status-success-bg);
  --color-success-border: var(--status-success-border);
  --color-success-text: var(--status-success-text);

  --color-warning: var(--status-warning);
  --color-warning-hover: var(--color-amber-700);
  --color-warning-bg: var(--status-warning-bg);
  --color-warning-border: var(--status-warning-border);
  --color-warning-text: var(--status-warning-text);

  --color-danger: var(--status-danger);
  --color-danger-hover: var(--color-red-700);
  --color-danger-bg: var(--status-danger-bg);
  --color-danger-border: var(--status-danger-border);
  --color-danger-text: var(--status-danger-text);

  --color-booked: var(--status-booked);
  --color-booked-bg: var(--status-booked-bg);
  --color-booked-border: var(--status-booked-border);
  --color-booked-text: var(--status-booked-text);

  --color-bg-app: var(--bg-primary);
  --color-surface: var(--surface-primary);
  --color-surface-subtle: var(--surface-subtle);
  --color-surface-hover: var(--surface-hover);

  --color-border: var(--border-primary);
  --color-border-subtle: var(--border-subtle);
  --color-border-strong: var(--border-strong);

  --color-text-main: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-dim: var(--text-dim);
  --color-text-inverse: var(--text-inverse);

  /* ==========================================================================
     3. SPACING SYSTEM (Clean 4px Grid)
     ========================================================================== */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Legacy space aliases */
  --space-1: var(--space-4);
  --space-3: var(--space-12);
  --space-5: var(--space-24);
  --space-7: var(--space-48);
  --space-8: var(--space-64);

  /* ==========================================================================
     4. TYPOGRAPHY HIERARCHY
     ========================================================================== */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Devanagari', sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  /* Sizes */
  --font-size-display: 30px;
  --font-size-page-title: 22px;
  --font-size-section-title: 17px;
  --font-size-card-title: 14px;
  --font-size-metric: 26px;
  --font-size-body: 14px;
  --font-size-body-lg: 15px;
  --font-size-metadata: 12px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 30px;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.65;

  /* ==========================================================================
     5. BORDER RADIUS
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-input: 8px;
  --radius-btn: 8px;
  --radius-md: 10px;
  --radius-card: 14px;
  --radius-lg: 14px;
  --radius-modal: 16px;
  --radius-xl: 18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ==========================================================================
     6. MODERN ELEVATION & SHADOWS
     ========================================================================== */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-card-hover: 0 6px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-modal: 0 20px 40px -8px rgba(15, 23, 42, 0.16), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --shadow-floating: 0 14px 28px -4px rgba(15, 23, 42, 0.14), 0 6px 12px -2px rgba(15, 23, 42, 0.05);

  --shadow-md: var(--shadow-card-hover);
  --shadow-lg: var(--shadow-modal);
  --shadow-xl: var(--shadow-modal);

  /* ==========================================================================
     7. MOTION & TRANSITIONS
     ========================================================================== */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-medium: 240ms;
  --motion-slow: 320ms;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --motion-btn: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-card: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-modal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-drawer: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-sidebar: 240ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     8. LAYOUT & DIMENSIONS
     ========================================================================== */
  --sidebar-width: 256px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --content-max-width: 1400px;

  --layout-page-padding: 24px 28px 36px;
  --layout-card-padding: 20px 24px;
  --layout-grid-gap: 20px;

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sticky: 50;
  --z-topbar: 100;
  --z-sidebar: 150;
  --z-fab: 200;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}