/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01B
   Design Tokens
   File: /opt/simplpay/static/css/001-tokens.css
   ========================================================== */

:root {

    /* ------------------------------------------------------
       Brand Colors
       ------------------------------------------------------ */

    --sp-primary-50: #eef2ff;
    --sp-primary-100: #e0e7ff;
    --sp-primary-200: #c7d2fe;
    --sp-primary-300: #a5b4fc;
    --sp-primary-400: #818cf8;
    --sp-primary-500: #6366f1;
    --sp-primary-600: #4f46e5;
    --sp-primary-700: #4338ca;
    --sp-primary-800: #3730a3;
    --sp-primary-900: #312e81;

    --sp-cyan-50: #ecfeff;
    --sp-cyan-100: #cffafe;
    --sp-cyan-200: #a5f3fc;
    --sp-cyan-300: #67e8f9;
    --sp-cyan-400: #22d3ee;
    --sp-cyan-500: #06b6d4;
    --sp-cyan-600: #0891b2;
    --sp-cyan-700: #0e7490;

    --sp-violet-50: #f5f3ff;
    --sp-violet-100: #ede9fe;
    --sp-violet-200: #ddd6fe;
    --sp-violet-300: #c4b5fd;
    --sp-violet-400: #a78bfa;
    --sp-violet-500: #8b5cf6;
    --sp-violet-600: #7c3aed;
    --sp-violet-700: #6d28d9;

    --sp-emerald-50: #ecfdf5;
    --sp-emerald-100: #d1fae5;
    --sp-emerald-500: #10b981;
    --sp-emerald-600: #059669;
    --sp-emerald-700: #047857;

    --sp-amber-50: #fffbeb;
    --sp-amber-100: #fef3c7;
    --sp-amber-500: #f59e0b;
    --sp-amber-600: #d97706;
    --sp-amber-700: #b45309;

    --sp-red-50: #fef2f2;
    --sp-red-100: #fee2e2;
    --sp-red-500: #ef4444;
    --sp-red-600: #dc2626;
    --sp-red-700: #b91c1c;

    /* ------------------------------------------------------
       Neutral Scale
       ------------------------------------------------------ */

    --sp-white: #ffffff;
    --sp-black: #000000;

    --sp-gray-25: #fcfcfd;
    --sp-gray-50: #f9fafb;
    --sp-gray-100: #f3f4f6;
    --sp-gray-200: #e5e7eb;
    --sp-gray-300: #d1d5db;
    --sp-gray-400: #9ca3af;
    --sp-gray-500: #6b7280;
    --sp-gray-600: #4b5563;
    --sp-gray-700: #374151;
    --sp-gray-800: #1f2937;
    --sp-gray-900: #111827;
    --sp-gray-950: #030712;

    /* ------------------------------------------------------
       Semantic Colors
       ------------------------------------------------------ */

    --sp-primary: var(--sp-primary-600);
    --sp-primary-hover: var(--sp-primary-700);
    --sp-secondary: var(--sp-cyan-500);
    --sp-accent: var(--sp-violet-500);

    --sp-success: var(--sp-emerald-500);
    --sp-success-strong: var(--sp-emerald-700);

    --sp-warning: var(--sp-amber-500);
    --sp-warning-strong: var(--sp-amber-700);

    --sp-danger: var(--sp-red-500);
    --sp-danger-strong: var(--sp-red-700);

    --sp-info: var(--sp-cyan-500);

    /* ------------------------------------------------------
       Surface System
       ------------------------------------------------------ */

    --sp-bg: #f4f7fb;
    --sp-bg-soft: #eef3f9;
    --sp-bg-elevated: rgba(255, 255, 255, 0.72);

    --sp-surface-1: rgba(255, 255, 255, 0.52);
    --sp-surface-2: rgba(255, 255, 255, 0.64);
    --sp-surface-3: rgba(255, 255, 255, 0.78);
    --sp-surface-4: rgba(255, 255, 255, 0.90);

    --sp-surface-dark-1: rgba(17, 24, 39, 0.60);
    --sp-surface-dark-2: rgba(17, 24, 39, 0.72);

    /* ------------------------------------------------------
       Text
       ------------------------------------------------------ */

    --sp-text-primary: #111827;
    --sp-text-secondary: #4b5563;
    --sp-text-tertiary: #6b7280;
    --sp-text-muted: #9ca3af;
    --sp-text-inverse: #ffffff;

    --sp-link: var(--sp-primary-600);
    --sp-link-hover: var(--sp-primary-700);

    /* ------------------------------------------------------
       Glass
       ------------------------------------------------------ */

    --sp-glass-bg:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.68),
            rgba(255, 255, 255, 0.34)
        );

    --sp-glass-bg-strong:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.52)
        );

    --sp-glass-bg-soft:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.46),
            rgba(255, 255, 255, 0.22)
        );

    --sp-glass-border: rgba(255, 255, 255, 0.55);
    --sp-glass-border-soft: rgba(255, 255, 255, 0.32);
    --sp-glass-highlight: rgba(255, 255, 255, 0.78);

    --sp-glass-blur-sm: 12px;
    --sp-glass-blur-md: 20px;
    --sp-glass-blur-lg: 28px;
    --sp-glass-blur-xl: 40px;

    /* ------------------------------------------------------
       Aurora
       ------------------------------------------------------ */

    --sp-aurora-blue: rgba(59, 130, 246, 0.34);
    --sp-aurora-indigo: rgba(79, 70, 229, 0.32);
    --sp-aurora-violet: rgba(139, 92, 246, 0.30);
    --sp-aurora-cyan: rgba(6, 182, 212, 0.28);
    --sp-aurora-white: rgba(255, 255, 255, 0.40);

    --sp-gradient-primary:
        linear-gradient(
            135deg,
            var(--sp-primary-600),
            var(--sp-violet-500),
            var(--sp-cyan-500)
        );

    --sp-gradient-primary-soft:
        linear-gradient(
            135deg,
            rgba(79, 70, 229, 0.14),
            rgba(139, 92, 246, 0.12),
            rgba(6, 182, 212, 0.12)
        );

    --sp-gradient-success:
        linear-gradient(
            135deg,
            var(--sp-emerald-600),
            var(--sp-cyan-600)
        );

    --sp-gradient-danger:
        linear-gradient(
            135deg,
            var(--sp-red-600),
            #f97316
        );

    /* ------------------------------------------------------
       Borders
       ------------------------------------------------------ */

    --sp-border-subtle: rgba(148, 163, 184, 0.16);
    --sp-border-default: rgba(148, 163, 184, 0.26);
    --sp-border-strong: rgba(100, 116, 139, 0.38);

    --sp-border-primary: rgba(99, 102, 241, 0.28);
    --sp-border-success: rgba(16, 185, 129, 0.28);
    --sp-border-danger: rgba(239, 68, 68, 0.28);

    /* ------------------------------------------------------
       Shadows / Elevation
       ------------------------------------------------------ */

    --sp-shadow-xs:
        0 2px 8px rgba(15, 23, 42, 0.04);

    --sp-shadow-sm:
        0 6px 18px rgba(15, 23, 42, 0.07);

    --sp-shadow-md:
        0 12px 34px rgba(15, 23, 42, 0.10);

    --sp-shadow-lg:
        0 20px 52px rgba(15, 23, 42, 0.14);

    --sp-shadow-xl:
        0 30px 80px rgba(15, 23, 42, 0.18);

    --sp-shadow-glow-primary:
        0 14px 42px rgba(79, 70, 229, 0.24);

    --sp-shadow-glow-cyan:
        0 14px 42px rgba(6, 182, 212, 0.22);

    --sp-shadow-glow-violet:
        0 14px 42px rgba(139, 92, 246, 0.22);

    /* ------------------------------------------------------
       Radius
       ------------------------------------------------------ */

    --sp-radius-xs: 8px;
    --sp-radius-sm: 12px;
    --sp-radius-md: 16px;
    --sp-radius-lg: 20px;
    --sp-radius-xl: 24px;
    --sp-radius-2xl: 30px;
    --sp-radius-3xl: 38px;
    --sp-radius-pill: 999px;

    /* ------------------------------------------------------
       Spacing
       4px base scale
       ------------------------------------------------------ */

    --sp-space-0: 0;
    --sp-space-1: 4px;
    --sp-space-2: 8px;
    --sp-space-3: 12px;
    --sp-space-4: 16px;
    --sp-space-5: 20px;
    --sp-space-6: 24px;
    --sp-space-7: 28px;
    --sp-space-8: 32px;
    --sp-space-9: 36px;
    --sp-space-10: 40px;
    --sp-space-12: 48px;
    --sp-space-14: 56px;
    --sp-space-16: 64px;
    --sp-space-20: 80px;
    --sp-space-24: 96px;

    /* ------------------------------------------------------
       Typography
       ------------------------------------------------------ */

    --sp-font-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --sp-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --sp-font-size-2xs: 10px;
    --sp-font-size-xs: 11px;
    --sp-font-size-sm: 12px;
    --sp-font-size-md: 14px;
    --sp-font-size-lg: 16px;
    --sp-font-size-xl: 18px;
    --sp-font-size-2xl: 22px;
    --sp-font-size-3xl: 28px;
    --sp-font-size-4xl: 36px;
    --sp-font-size-5xl: 48px;

    --sp-line-xs: 1.25;
    --sp-line-sm: 1.35;
    --sp-line-md: 1.5;
    --sp-line-lg: 1.65;

    --sp-weight-regular: 400;
    --sp-weight-medium: 500;
    --sp-weight-semibold: 600;
    --sp-weight-bold: 700;
    --sp-weight-extrabold: 800;
    --sp-weight-black: 900;

    --sp-letter-tight: -0.03em;
    --sp-letter-normal: 0;
    --sp-letter-wide: 0.04em;

    /* ------------------------------------------------------
       Motion
       ------------------------------------------------------ */

    --sp-duration-instant: 80ms;
    --sp-duration-fast: 160ms;
    --sp-duration-normal: 240ms;
    --sp-duration-slow: 380ms;
    --sp-duration-slower: 620ms;

    --sp-ease-standard:
        cubic-bezier(
            0.2,
            0,
            0,
            1
        );

    --sp-ease-emphasized:
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    --sp-ease-spring:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

    --sp-transition-fast:
        var(--sp-duration-fast)
        var(--sp-ease-standard);

    --sp-transition-normal:
        var(--sp-duration-normal)
        var(--sp-ease-standard);

    --sp-transition-spring:
        var(--sp-duration-normal)
        var(--sp-ease-spring);

    /* ------------------------------------------------------
       Z Index
       ------------------------------------------------------ */

    --sp-z-base: 0;
    --sp-z-raised: 10;
    --sp-z-sticky: 100;
    --sp-z-nav: 500;
    --sp-z-overlay: 1000;
    --sp-z-modal: 1200;
    --sp-z-toast: 1400;
    --sp-z-lock: 2147483647;

    /* ------------------------------------------------------
       Layout
       ------------------------------------------------------ */

    --sp-page-max-width: 1180px;
    --sp-content-max-width: 720px;

    --sp-header-height: 72px;
    --sp-bottom-nav-height: 78px;

    --sp-page-gutter:
        clamp(
            16px,
            3vw,
            28px
        );

    --sp-safe-top:
        env(
            safe-area-inset-top,
            0px
        );

    --sp-safe-bottom:
        env(
            safe-area-inset-bottom,
            0px
        );

    --sp-safe-left:
        env(
            safe-area-inset-left,
            0px
        );

    --sp-safe-right:
        env(
            safe-area-inset-right,
            0px
        );

    /* ------------------------------------------------------
       Controls
       ------------------------------------------------------ */

    --sp-control-height-sm: 40px;
    --sp-control-height-md: 48px;
    --sp-control-height-lg: 56px;

    --sp-input-bg: rgba(255, 255, 255, 0.64);
    --sp-input-border: rgba(148, 163, 184, 0.24);
    --sp-input-focus:
        rgba(99, 102, 241, 0.42);

    /* ------------------------------------------------------
       Interaction
       ------------------------------------------------------ */

    --sp-hover-lift: -2px;
    --sp-active-scale: 0.98;

    --sp-focus-ring:
        0 0 0 4px
        rgba(99, 102, 241, 0.14);

    /* ------------------------------------------------------
       Compatibility Aliases
       ------------------------------------------------------ */

    --primary: var(--sp-primary);
    --secondary: var(--sp-secondary);
    --accent: var(--sp-accent);

    --success: var(--sp-success);
    --warning: var(--sp-warning);
    --danger: var(--sp-danger);

    --background: var(--sp-bg);
    --surface: var(--sp-surface-2);

    --glass: var(--sp-glass-bg);
    --glass-border: var(--sp-glass-border);
    --glass-shadow: var(--sp-shadow-lg);
    --glass-highlight: var(--sp-glass-highlight);
    --glass-blur: var(--sp-glass-blur-lg);

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

    --space-xs: var(--sp-space-2);
    --space-sm: var(--sp-space-3);
    --space-md: var(--sp-space-4);
    --space-lg: var(--sp-space-6);
    --space-xl: var(--sp-space-8);
    --space-2xl: var(--sp-space-12);

    --font-family: var(--sp-font-sans);
    --font-size-xs: var(--sp-font-size-xs);
    --font-size-sm: var(--sp-font-size-sm);
    --font-size-md: var(--sp-font-size-md);
    --font-size-lg: var(--sp-font-size-lg);
    --font-size-xl: var(--sp-font-size-xl);

    --transition-fast: var(--sp-transition-fast);
    --transition-normal: var(--sp-transition-normal);
    --transition-slow:
        var(--sp-duration-slow)
        var(--sp-ease-standard);

    --shadow-sm: var(--sp-shadow-sm);
    --shadow-md: var(--sp-shadow-md);
    --shadow-lg: var(--sp-shadow-lg);
    --shadow-xl: var(--sp-shadow-xl);

}


/* ==========================================================
   System Dark Preference Tokens
   Theme engine may override these later.
   ========================================================== */

@media (prefers-color-scheme: dark) {

    :root {

        --sp-bg: #090b12;
        --sp-bg-soft: #101522;
        --sp-bg-elevated:
            rgba(
                17,
                24,
                39,
                0.76
            );

        --sp-surface-1:
            rgba(
                17,
                24,
                39,
                0.42
            );

        --sp-surface-2:
            rgba(
                17,
                24,
                39,
                0.58
            );

        --sp-surface-3:
            rgba(
                17,
                24,
                39,
                0.72
            );

        --sp-surface-4:
            rgba(
                17,
                24,
                39,
                0.90
            );

        --sp-text-primary:
            #f9fafb;

        --sp-text-secondary:
            #d1d5db;

        --sp-text-tertiary:
            #9ca3af;

        --sp-text-muted:
            #6b7280;

        --sp-glass-bg:
            linear-gradient(
                145deg,
                rgba(
                    17,
                    24,
                    39,
                    0.72
                ),
                rgba(
                    17,
                    24,
                    39,
                    0.42
                )
            );

        --sp-glass-bg-strong:
            linear-gradient(
                145deg,
                rgba(
                    17,
                    24,
                    39,
                    0.86
                ),
                rgba(
                    17,
                    24,
                    39,
                    0.64
                )
            );

        --sp-glass-border:
            rgba(
                255,
                255,
                255,
                0.12
            );

        --sp-glass-border-soft:
            rgba(
                255,
                255,
                255,
                0.08
            );

        --sp-glass-highlight:
            rgba(
                255,
                255,
                255,
                0.16
            );

        --sp-input-bg:
            rgba(
                17,
                24,
                39,
                0.72
            );

        --sp-input-border:
            rgba(
                148,
                163,
                184,
                0.20
            );

        --background:
            var(--sp-bg);

        --surface:
            var(--sp-surface-2);

        --glass:
            var(--sp-glass-bg);

        --glass-border:
            var(--sp-glass-border);

    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    :root {

        --sp-duration-instant: 0ms;
        --sp-duration-fast: 0ms;
        --sp-duration-normal: 0ms;
        --sp-duration-slow: 0ms;
        --sp-duration-slower: 0ms;

    }

}