/**
 * بِسَاط (Bisaat) — Design System Tokens
 * Master Style Sheet v2.0 (Kajabi-Aligned Aesthetic)
 * High-Contrast, Minimalist Luxury SaaS Palette
 */

:root {
  /* ==========================================================================
     1. Color Palette (Obsidian Dark & Clean Neutral SaaS)
     ========================================================================== */

  /* Dark Theme Surfaces (Kajabi Dark Canvas) */
  --bg-dark-base: #080B11;          /* Deepest obsidian background */
  --bg-dark-surface: #0E131E;       /* Card and elevated surface */
  --bg-dark-elevated: #151C2C;      /* Dropdowns, tooltips, modals */
  --bg-dark-glass: rgba(14, 19, 30, 0.75);
  --bg-dark-glass-card: rgba(255, 255, 255, 0.04);
  --bg-dark-glass-hover: rgba(255, 255, 255, 0.07);

  /* Light Theme Surfaces (Kajabi Clean Light Section) */
  --bg-light-base: #FFFFFF;         /* Crisp pure white */
  --bg-light-surface: #F8F9FB;      /* Off-white section background */
  --bg-light-elevated: #FFFFFF;     /* Elevated light cards */
  --bg-light-muted: #F0F2F6;        /* Subtle secondary light containers */

  /* Text Colors on Dark */
  --text-dark-primary: #FFFFFF;     /* High contrast white titles */
  --text-dark-secondary: #9CA3AF;   /* Muted readable paragraphs */
  --text-dark-tertiary: #6B7280;    /* Captions and micro-labels */
  --text-dark-muted: #4B5563;

  /* Text Colors on Light */
  --text-light-primary: #0F172A;    /* Deep slate black */
  --text-light-secondary: #475569;  /* Balanced body text */
  --text-light-tertiary: #94A3B8;   /* Subtle labels */

  /* Borders & Dividers */
  --border-dark-subtle: rgba(255, 255, 255, 0.08);
  --border-dark-medium: rgba(255, 255, 255, 0.14);
  --border-dark-highlight: rgba(255, 255, 255, 0.25);
  
  --border-light-subtle: #E2E8F0;
  --border-light-medium: #CBD5E1;

  /* Restrained Brand Accents (Used Sparingly & Focused) */
  --color-primary: #4655E5;         /* Bisaat Signature Royal Blue */
  --color-primary-hover: #3E4CD8;
  --color-primary-subtle: rgba(70, 85, 229, 0.12);
  --color-primary-glow: rgba(70, 85, 229, 0.25);

  --color-accent: #6366F1;          /* Indigo accent */
  --color-accent-subtle: rgba(99, 102, 241, 0.1);

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Status Colors */
  --color-success: #10B981;
  --color-success-subtle: rgba(16, 185, 129, 0.12);
  --color-warning: #F59E0B;
  --color-warning-subtle: rgba(245, 158, 11, 0.12);
  --color-error: #EF4444;
  --color-error-subtle: rgba(239, 68, 68, 0.12);

  /* Legacy aliases for backward compatibility */
  --color-primary-950: #080B11;
  --color-primary-900: #0E131E;
  --color-primary-800: #151C2C;
  --color-primary-700: #3642C9;
  --color-primary-600: #3E4CD8;
  --color-primary-500: #4655E5;
  --color-primary-400: #6B79EB;
  --color-primary-300: #9BA5F2;
  --color-primary-200: #C7CEF8;
  --color-primary-100: #ECEEFC;
  --color-primary-50: #F5F6FE;

  --color-accent-700: #4655E5;
  --color-accent-600: #5C6CF2;
  --color-accent-500: #6366F1;
  --color-accent-100: #EEF1FE;
  --color-accent-50: #F6F8FE;

  --color-neutral-950: #080B11;
  --color-neutral-900: #0F172A;
  --color-neutral-800: #1E293B;
  --color-neutral-700: #334155;
  --color-neutral-600: #475569;
  --color-neutral-500: #64748B;
  --color-neutral-400: #94A3B8;
  --color-neutral-300: #CBD5E1;
  --color-neutral-200: #E2E8F0;
  --color-neutral-100: #F1F5F9;
  --color-neutral-50: #F8FAFC;

  /* ==========================================================================
     2. Typography (§4.2)
     ========================================================================== */

  --font-family-primary: "ThmanyahSans", "Thmanyah Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'IBM Plex Mono', monospace;

  /* Scale */
  --font-display-1: clamp(2.5rem, 5.2vw, 4rem);    /* Hero Display */
  --font-display-2: clamp(2rem, 3.8vw, 3rem);      /* Section H2 */
  --font-h3: clamp(1.35rem, 2.2vw, 1.85rem);       /* Section Sub-headers */
  --font-h4: 1.25rem;                              /* Card titles */
  --font-h5: 1.125rem;                             /* Mini headers */
  --font-body-lg: 1.125rem;                        /* Lead paragraphs */
  --font-body: 1rem;                               /* Base body text */
  --font-body-sm: 0.875rem;                        /* Captions and secondary notes */
  --font-caption: 0.75rem;                         /* Badges, tags, micro-labels */

  /* Line Heights */
  --leading-none: 1.0;
  --leading-tight: 1.18;
  --leading-snug: 1.38;
  --leading-normal: 1.62;
  --leading-relaxed: 1.8;

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

  /* ==========================================================================
     3. Spacing Scale (§4.3)
     ========================================================================== */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-14: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */

  /* ==========================================================================
     4. Border Radius & Shadows (12px Unified Card & Button System)
     ========================================================================== */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-2xl: 12px;
  --radius-pill: 12px;     /* Unified 12px radius for buttons, inputs, tabs & pills */
  --radius-card: 12px;     /* 12px for all cards */
  --radius-btn: 12px;      /* 12px for all buttons */

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.28);
  
  --shadow-card-dark: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(255, 255, 255, 0.05) inset;
  --shadow-card-light: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);

  /* ==========================================================================
     5. Container & Layout Grid
     ========================================================================== */

  --container-max-width: 1240px;
  --container-narrow-width: 860px;
  --container-wide-width: 1360px;
  --container-padding: clamp(1rem, 3.5vw, 2.5rem);

  /* ==========================================================================
     6. Transitions
     ========================================================================== */

  --ease-base: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-slow: 400ms;

  --transition-fast: all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-base);
  --transition-slow: all var(--duration-slow) var(--ease-base);

  /* Z-Indices */
  --z-header: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}