/**
 * SalonSync Design System - CSS Variables
 * Version: 1.1
 * Based on: DESIGN_GUIDELINES.md
 *
 * This file contains all design tokens for the SalonSync platform.
 * Use these variables throughout the application for consistency.
 */

:root {
   /* ========================================
       THEME BRANDING - Can be overridden per customer
       ======================================== */

   /* Brand colors - set these for customer-specific theming */
   --brand-primary: #1AB0CD;
   --brand-primary-hover: #1899B3;
   --brand-primary-active: #167A91;
   --brand-primary-light: #F0FAFB;
   --brand-primary-subtle: rgba(26, 176, 205, 0.1);

   --brand-secondary: #D94F9D;
   --brand-secondary-hover: #C23E8A;
   --brand-secondary-active: #A32D77;
   --brand-secondary-subtle: rgba(217, 79, 157, 0.1);

   --brand-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

   /* ========================================
       PRIMARY COLORS - Legacy aliases (using brand variables)
       ======================================== */

   /* Turquoise - Primary actions, navigation, calendar */
   --color-primary-turquoise: var(--brand-primary);
   --color-primary-turquoise-hover: var(--brand-primary-hover);
   --color-primary-turquoise-active: var(--brand-primary-active);
   --color-primary-turquoise-light: var(--brand-primary-light);
   --color-primary-turquoise-subtle: var(--brand-primary-subtle);

   /* Magenta - Accents, highlights, special offers */
   --color-primary-magenta: var(--brand-secondary);
   --color-primary-magenta-hover: var(--brand-secondary-hover);
   --color-primary-magenta-active: var(--brand-secondary-active);
   --color-primary-magenta-subtle: var(--brand-secondary-subtle);

   /* Deep Navy - Primary text, headings */
   --color-primary-navy: #0F1941;

   /* ========================================
       DARK MODE - Override for dark theme
       ======================================== */

   --dark-bg-primary: #020617;
   /* Deeper navy-black */
   --dark-bg-secondary: #0F172A;
   --dark-bg-tertiary: #1E293B;
   --dark-text-primary: #F8FAFC;
   --dark-text-secondary: #94A3B8;
   --dark-border: rgba(255, 255, 255, 0.1);

   /* Glassmorphism */
   --glass-bg: rgba(255, 255, 255, 0.7);
   --glass-border: rgba(255, 255, 255, 0.3);
   --glass-blur: 12px;

   --dark-glass-bg: rgba(15, 23, 42, 0.7);
   --dark-glass-border: rgba(255, 255, 255, 0.08);

   /* ========================================
       NEUTRAL COLORS
       ======================================== */

   --color-neutral-900: #0F1941;
   /* Dark text */
   --color-neutral-700: #334155;
   /* Medium-dark text */
   --color-neutral-600: #64748B;
   /* Secondary text, captions */
   --color-neutral-500: #94A3B8;
   /* Tertiary text, icons */
   --color-neutral-200: #E2E8F0;
   /* Borders, dividers */
   --color-neutral-100: #F1F5F9;
   /* Light backgrounds, borders */
   --color-neutral-50: #F8FAFC;
   /* Very light backgrounds */
   --color-neutral-0: #FFFFFF;
   /* Pure white */

   /* ========================================
       ACCENT COLORS
       ======================================== */

   --color-accent-blush: #FFF1F3;
   /* Soft backgrounds for featured content */

   /* ========================================
       NEUTRAL SEMANTIC - For skeleton, placeholders
       ======================================== */

   --color-skeleton-bg: var(--color-neutral-100);
   --color-skeleton-highlight: var(--color-neutral-50);
   --color-overlay: rgba(15, 25, 65, 0.5);
   --color-backdrop: rgba(255, 255, 255, 0.9);

   /* ========================================
       SEMANTIC COLORS
       ======================================== */

   /* Success */
   --color-success: #10B981;
   --color-success-bg: #D1FAE5;
   --color-success-text: #065F46;
   --color-success-light: #ECFDF5;

   /* Warning */
   --color-warning: #F59E0B;
   --color-warning-bg: #FEF3C7;
   --color-warning-text: #92400E;
   --color-warning-light: #FFFBEB;

   /* Error */
   --color-error: #EF4444;
   --color-error-hover: #DC2626;
   --color-error-active: #B91C1C;
   --color-error-bg: #FEE2E2;
   --color-error-text: #991B1B;
   --color-error-light: #FEF2F2;

   /* Info */
   --color-info: #3B82F6;
   --color-info-hover: #2563EB;
   --color-info-active: #1D4ED8;
   --color-info-bg: #DBEAFE;
   --color-info-text: #1E40AF;
   --color-info-light: #EFF6FF;

   /* ========================================
       SPACING SCALE (8px grid system)
       ======================================== */

   --spacing-2xs: 2px;
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
   --spacing-2xl: 48px;
   --spacing-3xl: 64px;
   --spacing-4xl: 96px;

   /* ========================================
       TYPOGRAPHY
       ======================================== */

   /* Font Families */
   --font-family-primary: var(--brand-font-family);

   /* Font Sizes */
   --font-size-xs: 0.75rem;
   /* 12px - Captions */
   --font-size-sm: 0.875rem;
   /* 14px - Small body */
   --font-size-base: 1rem;
   /* 16px - Body text */
   --font-size-lg: 1.125rem;
   /* 18px - Large body */
   --font-size-xl: 1.25rem;
   /* 20px - H5 */
   --font-size-2xl: 1.5rem;
   /* 24px - H4 */
   --font-size-3xl: 1.75rem;
   /* 28px - H3 */
   --font-size-4xl: 2.25rem;
   /* 36px - H2 */
   --font-size-5xl: 3rem;
   /* 48px - H1 */

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

   /* Line Heights */
   --line-height-tight: 1.2;
   --line-height-snug: 1.4;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.6;

   /* Letter Spacing */
   --letter-spacing-tight: -0.02em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.01em;
   --letter-spacing-wider: 0.02em;

   /* ========================================
       BORDERS & RADIUS
       ======================================== */

   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-xl: 16px;
   --border-radius-full: 9999px;

   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 3px;

   /* ========================================
       SHADOWS
       ======================================== */

   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
   --shadow-focus: 0 0 0 3px var(--brand-primary-subtle);
   --shadow-focus-brand: 0 0 0 3px var(--brand-primary-subtle);
   --shadow-focus-error: 0 0 0 3px var(--color-error-bg);

   /* ========================================
       TRANSITIONS
       ======================================== */

   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;

   --transition-all: all var(--transition-base);
   --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
   --transition-transform: transform var(--transition-base);
   --transition-shadow: box-shadow var(--transition-base);

   /* ========================================
       Z-INDEX SCALE
       ======================================== */

   --z-index-dropdown: 100;
   --z-index-sticky: 200;
   --z-index-fixed: 300;
   --z-index-modal-backdrop: 9998;
   --z-index-modal: 9999;
   --z-index-popover: 600;
   --z-index-tooltip: 700;
   --z-index-toast: 10000;

   /* ========================================
       BREAKPOINTS (for reference in media queries)
       ======================================== */

   --breakpoint-sm: 640px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;

   /* ========================================
       LAYOUT
       ======================================== */

   --max-content-width: 1440px;
   --container-padding-mobile: 24px;
   --container-padding-desktop: 48px;

   /* ========================================
       COMPONENT-SPECIFIC
       ======================================== */

   /* Buttons */
   --button-padding-sm: var(--spacing-sm) var(--spacing-md);
   --button-padding-md: var(--spacing-md) var(--spacing-lg);
   --button-padding-lg: var(--spacing-md) var(--spacing-xl);

   /* Cards */
   --card-padding: var(--spacing-lg);
   --card-border: 1px solid var(--color-neutral-100);

   /* Inputs */
   --input-padding: var(--spacing-md) var(--spacing-md);
   --input-border: 1px solid var(--color-neutral-200);
   --input-border-focus: 1px solid var(--brand-primary);

   /* ========================================
       GRADIENTS
       ======================================== */

   --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
   --gradient-soft-background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-neutral-100) 100%);
   --gradient-blush: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-accent-blush) 100%);

   /* ========================================
       SEMANTIC SURFACES & TEXT
       ======================================== */

   --surface-page: var(--color-neutral-50);
   --surface-elevated: var(--color-neutral-0);
   --surface-card: var(--color-neutral-0);
   --surface-card-muted: var(--glass-bg);
   --surface-header: var(--glass-bg);
   --surface-sidebar: #0F1941;
   --surface-sidebar-hover: rgba(248, 250, 252, 0.1);
   --surface-sidebar-active: var(--brand-primary);
   --surface-table-header: var(--color-neutral-50);

   --border-subtle: var(--color-neutral-100);
   --border-default: var(--color-neutral-200);

   --text-primary: var(--color-neutral-900);
   --text-secondary: var(--color-neutral-600);
   --text-tertiary: var(--color-neutral-500);
   --text-inverse: #F8FAFC;
   --text-on-accent: #FFFFFF;
}

html {
   color-scheme: light;
}

html[data-theme-mode="dark"] {
   color-scheme: dark;
}

html[data-theme-mode="system"] {
   color-scheme: light dark;
}

/* ========================================
   ACCESSIBILITY - Respect user preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
   :root {
      --transition-fast: 0.01ms;
      --transition-base: 0.01ms;
      --transition-slow: 0.01ms;
   }

   * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
   }
}

/* ========================================
   DARK MODE - Respect user preferences
   ======================================== */

@media (prefers-color-scheme: dark) {
   html[data-theme-mode="system"] {
      /* Override neutral colors for dark mode */
      --color-neutral-900: #F8FAFC;
      --color-neutral-700: #E2E8F0;
      --color-neutral-600: #94A3B8;
      --color-neutral-500: #64748B;
      --color-neutral-200: #1E293B;
      --color-neutral-100: #0F172A;
      --color-neutral-50: #020617;
      --color-neutral-0: #0F172A;

      /* Apply Dark Glassmorphism */
      --glass-bg: var(--dark-glass-bg);
      --glass-border: var(--dark-glass-border);

      /* Update shadows for dark mode */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
      --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);

      /* Update focus shadow for dark mode */
      --shadow-focus: 0 0 0 3px rgba(26, 176, 205, 0.25);
      --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.25);

      /* Semantic surfaces */
      --surface-page: #020617;
      --surface-elevated: #0F172A;
      --surface-card: #0F172A;
      --surface-card-muted: rgba(15, 23, 42, 0.78);
      --surface-header: rgba(15, 23, 42, 0.78);
      --surface-sidebar: #020617;
      --surface-sidebar-hover: rgba(148, 163, 184, 0.12);
      --surface-sidebar-active: var(--brand-primary);
      --surface-table-header: #111827;
      --border-subtle: #1E293B;
      --border-default: #334155;
      --text-primary: #F8FAFC;
      --text-secondary: #CBD5E1;
      --text-tertiary: #94A3B8;
      --text-inverse: #F8FAFC;
      --text-on-accent: #FFFFFF;
   }
}

/* ========================================
   FORCED DARK MODE - Application controlled
   ======================================== */

html[data-theme-mode="dark"],
[data-theme="dark"] {
   /* Override neutral colors for dark mode */
   --color-neutral-900: #F8FAFC;
   --color-neutral-700: #E2E8F0;
   --color-neutral-600: #94A3B8;
   --color-neutral-500: #64748B;
   --color-neutral-200: #1E293B;
   --color-neutral-100: #0F172A;
   --color-neutral-50: #020617;
   --color-neutral-0: #0F172A;

   /* Apply Dark Glassmorphism */
   --glass-bg: var(--dark-glass-bg);
   --glass-border: var(--dark-glass-border);

   /* Update shadows for dark mode */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
   --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.8);

   /* Update focus shadow for dark mode */
   --shadow-focus: 0 0 0 3px rgba(26, 176, 205, 0.25);
   --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.25);

   /* Background gradients */
   --gradient-soft-background: linear-gradient(180deg, #020617 0%, #0F172A 100%);

   /* Semantic surfaces */
   --surface-page: #020617;
   --surface-elevated: #0F172A;
   --surface-card: #0F172A;
   --surface-card-muted: rgba(15, 23, 42, 0.78);
   --surface-header: rgba(15, 23, 42, 0.78);
   --surface-sidebar: #020617;
   --surface-sidebar-hover: rgba(148, 163, 184, 0.12);
   --surface-sidebar-active: var(--brand-primary);
   --surface-table-header: #111827;
   --border-subtle: #1E293B;
   --border-default: #334155;
   --text-primary: #F8FAFC;
   --text-secondary: #CBD5E1;
   --text-tertiary: #94A3B8;
   --text-inverse: #F8FAFC;
   --text-on-accent: #FFFFFF;
}

/* ========================================
   THEME PRESET CLASSES - For customer-specific branding
   ======================================== */

/* Luxury Theme - Premium gold accents */
[data-theme-preset="luxury"],
[data-theme="luxury"] {
   --brand-primary: #B8860B;
   --brand-primary-hover: #DAA520;
   --brand-primary-active: #8B6914;
   --brand-primary-light: #FFFAEB;
   --brand-primary-subtle: rgba(184, 134, 11, 0.1);

   --brand-secondary: #4B0082;
   --brand-secondary-hover: #6B238E;
   --brand-secondary-active: #3B0066;
   --brand-secondary-subtle: rgba(75, 0, 130, 0.1);

   --brand-font-family: 'Playfair Display', Georgia, serif;
}

/* Minimal Theme - Clean black & white */
[data-theme-preset="minimal"],
[data-theme="minimal"] {
   --brand-primary: #000000;
   --brand-primary-hover: #333333;
   --brand-primary-active: #000000;
   --brand-primary-light: #F5F5F5;
   --brand-primary-subtle: rgba(0, 0, 0, 0.05);

   --brand-secondary: #666666;
   --brand-secondary-hover: #888888;
   --brand-secondary-active: #444444;
   --brand-secondary-subtle: rgba(102, 102, 102, 0.1);

   --brand-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Nature Theme - Green/earth tones */
[data-theme-preset="nature"],
[data-theme="nature"] {
   --brand-primary: #228B22;
   --brand-primary-hover: #2EAD2E;
   --brand-primary-active: #1A6B1A;
   --brand-primary-light: #E8F5E9;
   --brand-primary-subtle: rgba(34, 139, 34, 0.1);

   --brand-secondary: #8B4513;
   --brand-secondary-hover: #A0522D;
   --brand-secondary-active: #6B3410;
   --brand-secondary-subtle: rgba(139, 69, 19, 0.1);

   --brand-font-family: 'Lora', Georgia, serif;
}

/* Coral Theme - Warm vibrant colors */
[data-theme-preset="coral"],
[data-theme="coral"] {
   --brand-primary: #FF6F61;
   --brand-primary-hover: #FF8577;
   --brand-primary-active: #E05548;
   --brand-primary-light: #FFF0EE;
   --brand-primary-subtle: rgba(255, 111, 97, 0.1);

   --brand-secondary: #6B5B95;
   --brand-secondary-hover: #8577AB;
   --brand-secondary-active: #554878;
   --brand-secondary-subtle: rgba(107, 91, 149, 0.1);

   --brand-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
}