/**
 * 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 {
    /* ========================================
       PRIMARY COLORS
       ======================================== */

    /* Turquoise - Primary actions, navigation, calendar */
    --color-primary-turquoise: #1AB0CD;
    --color-primary-turquoise-hover: #1899B3;
    --color-primary-turquoise-active: #167A91;
    --color-primary-turquoise-light: #F0FAFB;

    /* Magenta - Accents, highlights, special offers */
    --color-primary-magenta: #D94F9D;
    --color-primary-magenta-hover: #C23E8A;
    --color-primary-magenta-active: #A32D77;

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

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

    --color-neutral-900: #0F1941;  /* Dark text */
    --color-neutral-600: #64748B;  /* Secondary text, captions */
    --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 */

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

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

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

    /* Error */
    --color-error: #EF4444;
    --color-error-bg: #FEE2E2;
    --color-error-text: #991B1B;

    /* Info */
    --color-info: #3B82F6;
    --color-info-bg: #DBEAFE;
    --color-info-text: #1E40AF;

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

    --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: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* 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 rgba(26, 176, 205, 0.1);
    --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);

    /* ========================================
       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: 400;
    --z-index-modal: 500;
    --z-index-popover: 600;
    --z-index-tooltip: 700;
    --z-toast: 800;

    /* ========================================
       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 #E2E8F0;
    --input-border-focus: 1px solid var(--color-primary-turquoise);

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

    --gradient-primary: linear-gradient(135deg, var(--color-primary-turquoise) 0%, var(--color-primary-magenta) 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%);
}

/* ========================================
   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 support (future enhancement) */
@media (prefers-color-scheme: dark) {
    /*
     * Dark mode variables would go here
     * Currently not required, but prepared for future implementation
     */
}