/* ===================================================================
   VISUAL POLISH - CSS VARIABLES
   Extracted from frontend/app.html (100% polish implementation)
   =================================================================== */

:root {
    /* ===== Enhanced Shadow System ===== */
    --shadow-xl: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 16px rgba(0, 0, 0, 0.08), 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 12px 24px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.15);

    /* Focus Ring Shadows */
    --shadow-focus: 0 0 0 3px rgba(91, 108, 255, 0.15);
    --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.15);
    --shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.15);

    /* ===== Typography Scale ===== */
    --text-xs: 0.6875rem;    /* 11px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.9375rem;  /* 15px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.375rem;     /* 22px */
    --text-2xl: 1.75rem;     /* 28px */
    --text-3xl: 2.25rem;     /* 36px */

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: -0.01em;
    --tracking-wide: 0.01em;

    /* ===== Transition System ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Border Radius ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

/* Dark Mode Shadow Adjustments */
[data-theme="dark"] {
    --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 16px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-2xl: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.6), 0 32px 64px rgba(0, 0, 0, 0.7);
    --shadow-focus: 0 0 0 3px rgba(124, 122, 255, 0.25);
}