/**
 * Design Tokens - Etherea Derma Clinic
 */

:root {
    /* Colors */
    --color-primary: #3B3A40;
    --color-secondary: #80848C;
    --color-neutral-light: #D2D6D9;
    --color-accent-light: #F2E3B6;
    --color-accent-warm: #BFA688;

    --color-bg: #FFFFFF;
    --color-bg-soft: #F8F6F1;
    --color-text: #3B3A40;
    --color-text-muted: #80848C;
    --color-border: rgba(59, 58, 64, 0.12);
    --color-overlay: rgba(59, 58, 64, 0.48);

    /* Typography Scale (Fluid) */
    --fs-h1: clamp(2.5rem, 6vw, 4.5rem);
    --fs-h2: clamp(1.8rem, 4vw, 2.8rem);
    --fs-h3: clamp(1.4rem, 2.5vw, 2rem);
    --fs-body: 1.1rem;
    --fs-small: clamp(0.8125rem, 1vw, 0.9375rem);

    /* Fonts */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Century Gothic', AppleGothic, sans-serif;
    --font-serif: 'Bellastra', Georgia, serif;

    /* Line Heights */
    --lh-heading: 1.15;
    --lh-body: 1.65;

    /* Spacing System */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1.25rem, 2.5vw, 2rem);
    --space-lg: clamp(2.5rem, 5vw, 4rem);
    --space-xl: clamp(4rem, 8vw, 7rem);

    /* Borders & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}