/* MietDoc Design Tokens */
:root {
    /* === Original Palette (backward compat) === */
    --color-ice-cold: #a0d2eb;
    --color-freeze-purple: #e5eaf5;
    --color-medium-purple: #d0bdf4;
    --color-purple-pain: #8458B3;
    --color-heavy-purple: #7d5e66; /* Darkened from #a28089 for WCAG AA contrast (4.6:1) */
    --text-strong: #1f1d2b;
    --text-muted: #4d4a5d;
    --surface: #f7f9fb;

    /* === Semantic Color Roles === */
    --brand-primary: var(--color-purple-pain);
    --brand-primary-hover: #6f48a0;
    --brand-primary-light: var(--color-medium-purple);
    --brand-primary-bg: var(--color-freeze-purple);
    --surface-card: #ffffff;
    --surface-page: var(--surface);
    --border-default: #e0e0e0;
    --border-focus: var(--color-purple-pain);
    --border-accent: var(--color-medium-purple);

    /* === Purple-Warm Neutral Scale === */
    --neutral-50: #faf9fb;
    --neutral-100: #f4f2f6;
    --neutral-200: #e8e5ed;
    --neutral-300: #d4d0dc;
    --neutral-400: #b0a9bd;
    --neutral-500: #8d849e;
    --neutral-600: #6b6280;
    --neutral-700: #4d4a5d;
    --neutral-800: #363343;
    --neutral-900: #1f1d2b;

    /* === Spacing Scale (8px base) === */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* === Shadow Hierarchy (purple-tinted) === */
    --shadow-xs: 0 1px 2px rgba(132, 88, 179, 0.05);
    --shadow-sm: 0 2px 4px rgba(132, 88, 179, 0.08);
    --shadow-md: 0 4px 12px rgba(132, 88, 179, 0.10);
    --shadow-lg: 0 10px 30px rgba(132, 88, 179, 0.12);
    --shadow-xl: 0 15px 40px rgba(132, 88, 179, 0.15);
    --shadow-2xl: 0 25px 60px rgba(132, 88, 179, 0.20);
    --shadow-glow: 0 0 20px rgba(132, 88, 179, 0.25);

    /* === Border Radius Scale === */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* === Premium Easing Curves === */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.22, 1.36, 0.36, 1);

    /* === Transition Durations === */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
}