/*
   Public UI Tokens
   ----------------
   Semantic token layer for the public website, auth pages, checkout and user panel.

   Boundary:
   - Admin panel has a deliberately different UI and keeps its own tokens/styles in
     admin-panel.css, admin-overrides.css and iq-admin-* classes.
   - This file does not define Dark Mode. It only centralizes the current Light UI
     values so future refactors can change one layer instead of many page files.
*/

:root {
    --ui-color-primary: var(--color-primary);
    --ui-color-primary-strong: var(--color-primary-600);
    --ui-color-primary-soft: var(--color-primary-50);
    --ui-color-secondary: var(--color-secondary);

    --ui-color-success: var(--color-success);
    --ui-color-success-soft: var(--color-success-50);
    --ui-color-warning: var(--color-warning);
    --ui-color-warning-soft: var(--color-warning-50);
    --ui-color-danger: var(--color-danger);
    --ui-color-danger-soft: var(--color-danger-50);
    --ui-color-info: var(--color-info);
    --ui-color-info-soft: var(--color-info-50);

    --ui-app-bg: var(--color-bg);
    --ui-app-surface: var(--color-surface);
    --ui-app-surface-soft: var(--color-surface-soft);
    --ui-app-surface-elevated: #ffffff;
    --ui-app-surface-glass: rgba(255, 255, 255, .92);
    --ui-app-surface-muted-glass: rgba(255, 255, 255, .72);

    --ui-text-primary: var(--color-text);
    --ui-text-muted: var(--color-muted);
    --ui-text-soft: var(--color-soft);
    --ui-text-on-primary: #ffffff;

    --ui-stroke: var(--color-border);
    --ui-stroke-strong: var(--color-border-strong);
    --ui-focus-ring: rgba(37, 99, 235, .12);
    --ui-focus-border: rgba(37, 99, 235, .70);

    --ui-radius-xs: var(--radius-xs);
    --ui-radius-sm: var(--radius-sm);
    --ui-radius-md: var(--radius-md);
    --ui-radius-lg: var(--radius-lg);
    --ui-radius-xl: var(--radius-xl);
    --ui-radius-2xl: var(--radius-2xl);
    --ui-radius-pill: var(--radius-pill);

    --ui-shadow-xs: var(--shadow-xs);
    --ui-shadow-sm: var(--shadow-sm);
    --ui-shadow-md: var(--shadow-md);
    --ui-shadow-lg: var(--shadow-lg);

    --ui-space-1: var(--space-1);
    --ui-space-2: var(--space-2);
    --ui-space-3: var(--space-3);
    --ui-space-4: var(--space-4);
    --ui-space-5: var(--space-5);
    --ui-space-6: var(--space-6);
    --ui-space-8: var(--space-8);
    --ui-space-10: var(--space-10);
    --ui-space-12: var(--space-12);
    --ui-space-16: var(--space-16);

    --ui-container-width: var(--container);
    --ui-transition-fast: var(--transition-fast);
    --ui-transition-base: var(--transition-base);
    --ui-transition-slow: var(--transition-slow);
}