/**
 * Arvira Design Tokens
 * Figma: Arvira - Final Pages
 * Canonical --arvira-* names + legacy aliases for existing CSS.
 */

:root {
    /* ---------- Canonical colors ---------- */
    --arvira-purple: #5349DD;
    --arvira-pink: #E968D6;
    --arvira-green: #00B84D;
    --arvira-red: #FF0004;
    --arvira-text: #1E1E1E;
    --arvira-text-light: #666666;
    --arvira-text-muted: #8A8A8A;
    --arvira-bg: #FFFFFF;
    --arvira-bg-muted: #F6F6F6;
    --arvira-border: #E5E5E5;
    --arvira-badge-appointment: #CBC8FF;
    --arvira-badge-notify: #FDD9E7;

    /* ---------- Spacing (4px scale) ---------- */
    --arvira-space-1: 4px;
    --arvira-space-2: 8px;
    --arvira-space-3: 12px;
    --arvira-space-4: 16px;
    --arvira-space-5: 20px;
    --arvira-space-6: 24px;
    --arvira-space-8: 32px;
    --arvira-space-10: 40px;

    /* ---------- Radius (Figma) ---------- */
    --arvira-radius-sm: 5px;
    --arvira-radius-md: 10px;
    --arvira-radius-pill: 9999px;

    /* ---------- Shadows ---------- */
    --arvira-shadow: 0px 0px 25px rgba(138, 138, 138, 0.05);
    --arvira-shadow-nav: 0px 0px 25px rgba(138, 138, 138, 0.15);
    --arvira-shadow-medium: 0px 4px 15px rgba(0, 0, 0, 0.1);

    /* ---------- Typography ---------- */
    --arvira-font: 'Vazirmatn', Tahoma, Arial, sans-serif;
    --arvira-font-display: 'Vazirmatn', Tahoma, Arial, sans-serif;
    --arvira-font-weight-regular: 400;
    --arvira-font-weight-medium: 500;
    --arvira-font-weight-semibold: 600;
    --arvira-font-weight-bold: 700;

    /* ---------- Layout (shared measures) ---------- */
    --arvira-filter-panel-width: 291px;
    --arvira-top-nav-height: 100px;
    --arvira-bottom-nav-height: 90px;
    --arvira-page-gutter: 100px;
    --arvira-page-gutter-mobile: 20px;

    /* ---------- Z-index ---------- */
    --arvira-z-dropdown: 1000;
    --arvira-z-sticky: 1020;
    --arvira-z-fixed: 1030;
    --arvira-z-modal-backdrop: 1040;
    --arvira-z-modal: 1050;
    --arvira-z-popover: 1060;
    --arvira-z-tooltip: 1070;

    /* ---------- Motion ---------- */
    --arvira-transition-fast: 150ms;
    --arvira-transition-normal: 250ms;
    --arvira-transition-slow: 350ms;

    /* ---------- Legacy aliases (arvira-main / existing pages) ---------- */
    --primary-purple: var(--arvira-purple);
    --primary-pink: var(--arvira-pink);
    --success-green: var(--arvira-green);
    --error-red: var(--arvira-red);
    --text-dark: var(--arvira-text);
    --text-light: var(--arvira-text-light);
    --text-muted: var(--arvira-text-muted);
    --bg-white: var(--arvira-bg);
    --bg-gray: var(--arvira-bg-muted);
    --border-color: var(--arvira-border);
    --badge-appointment: var(--arvira-badge-appointment);
    --badge-notify: var(--arvira-badge-notify);
    --shadow: var(--arvira-shadow);
    --shadow-nav: var(--arvira-shadow-nav);
    --shadow-medium: var(--arvira-shadow-medium);
    --border-radius-sm: var(--arvira-radius-sm);
    --border-radius-md: var(--arvira-radius-md);
    --filter-panel-width: var(--arvira-filter-panel-width);
    --top-nav-height: var(--arvira-top-nav-height);
    --bottom-nav-height: var(--arvira-bottom-nav-height);
    --page-gutter: var(--arvira-page-gutter);
    --page-gutter-mobile: var(--arvira-page-gutter-mobile);
    --font-main: var(--arvira-font);
    --font-display: var(--arvira-font-display);

    /* ---------- Legacy accent aliases (old ThemeDesign / beauty-salon) ---------- */
    --accent-primary: var(--arvira-purple);
    --accent-secondary: var(--arvira-pink);
    --accent-success: var(--arvira-green);
    --accent-warning: #FFC107;
    --accent-danger: var(--arvira-red);
}