/* ============================================
   AUBA Beauty Studio — Design Tokens v1.0
   Single source of truth for colors, spacing,
   typography, shadows, and radii across all pages.
============================================ */

:root {
    /* ── Colors ────────────────────────── */
    /* Neutrals (tinted gray, not pure) */
    --color-white: #ffffff;
    --color-gray-50: #fafaf9;
    --color-gray-100: #f5f5f7;
    --color-gray-200: #e5e5ea;
    --color-gray-300: #d2d2dc;
    --color-gray-500: #868686;
    --color-gray-600: #6e6e73;
    --color-gray-700: #4b4b4b;
    --color-gray-800: #2c2c3e;
    --color-gray-900: #1d1d1f;

    /* Brand — gold palette with proper contrast steps */
    --color-brand-50: #fffaed;
    --color-brand-100: #fef9e6;
    --color-brand-200: #fdebcc;
    --color-brand-300: #fbd4a3;
    --color-brand-400: #f9bda7;
    --color-brand-500: #e8c988;
    --color-brand-600: #d4af37;  /* PRIMARY — used for buttons/accents */
    --color-brand-700: #b59325;  /* darker hover variant */
    --color-brand-800: #8a6e1b;  /* text on light bg — meets 4.5:1 on white */

    /* Semantic colors */
    --color-accent: var(--color-brand-600);    /* primary gold */
    --color-accent-hover: var(--color-brand-700); /* darker gold for hover */
    --color-accent-text: var(--color-gray-900);  /* dark text on gold backgrounds */
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-gray-50);
    --color-bg-dark: var(--color-gray-900);
    --color-text-main: var(--color-gray-800);
    --color-text-secondary: var(--color-gray-600);
    --color-text-light: var(--color-gray-500);
    --color-border: var(--color-gray-200);
    --color-success: #34c759;
    --color-warning: #ff9500;
    --color-error: #ff3b30;

    /* ── Typography ────────────────────── */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-display: 'Playfair Display', 'Georgia', serif;

    /* Constrained type scale (1.25 ratio) */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-h3: 1.5rem;      /* 24px */
    --font-size-h2: 1.875rem;    /* 30px */
    --font-size-h1: 2.34rem;     /* 38px */
    --font-size-hero: 2.93rem;   /* 47px */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.7;

    /* ── Spacing Scale ─────────────────── */
    --space-xs: 0.25rem;   /* 4px  */
    --space-sm: 0.5rem;    /* 8px  */
    --space-md: 0.875rem;   /* 14px */
    --space-lg: 1.25rem;   /* 20px */
    --space-xl: 1.75rem;   /* 28px */
    --space-2xl: 2.5rem;   /* 40px */
    --space-3xl: 3.5rem;   /* 56px */
    --space-4xl: 4.75rem;  /* 76px */
    --space-5xl: 6.25rem;  /* 100px */

    /* Aliases for backward compat (deprecated, use --space-* instead) */
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);

    /* ── Border Radius ────────────────── */
    --radius-sm: 0.5rem;    /* 8px  */
    --radius-md: 0.75rem;    /* 12px */
    --radius-lg: 1.25rem;    /* 20px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-full: 999px;

    /* ── Shadows (neutral, not colored) ── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(29, 29, 31, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 20px 40px rgba(29, 29, 31, 0.08);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12), 0 30px 60px rgba(29, 29, 31, 0.1);

    /* ── Transitions ──────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Layout ───────────────────────── */
    --container-max-width: 1200px;
    --logo-height: 120px;
}