/* 
   Design Tokens - Centralized Scaling System
   Target: Modern, SaaS-style aesthetics for Nailsbykiki
*/

:root {
    /* --- Typography --- */
    --font-primary: 'Montserrat', sans-serif;
    
    /* Font Scale (Base 16px) */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */
    --text-7xl: 4.5rem;     /* 72px */

    /* --- Colors (Semantic) --- */
    
    /* Brand */
    --color-primary: #ac2a5d;
    --color-primary-hover: #911f4d;
    --color-primary-container: #ff6b9d;
    --color-secondary: #884c63;
    
    /* Surface & Background */
    --color-bg: #fff8f8;
    --color-surface: #ffffff;
    --color-surface-container: #ffe8ec;
    
    /* Text & Content */
    --color-text: #24181b;         /* On Surface High */
    --color-text-muted: #574146;   /* On Surface Variant */
    --color-border: #fce4e9;       /* Standard Border */
    
    /* States */
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* --- Spacing System (4px base) --- */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    /* --- Radius --- */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-primary: 0 10px 15px -3px rgba(172, 42, 93, 0.2);
}