/* ==========================================================================
   TOPPERWORK - GLOBAL DESIGN TOKENS
   ==========================================================================
   Phase: 2A.1

   Purpose:
   - Centralized reusable design variables
   - Semantic color architecture
   - Dark-first modern visual system
   - Future light mode support
   - Mobile-first foundation
   - WebView-safe UI architecture
   - Backward compatibility with Phase 1 components

   Default Theme:
   - Modern deep navy
   - Blue primary action system
   - Purple brand accent system
   ========================================================================== */


:root {

    /* ======================================================================
       1. PRIMARY & SECONDARY BRAND COLORS
       ====================================================================== */

    --color-primary: #3B82F6;

    --color-primary-hover: #60A5FA;

    --color-primary-active: #2563EB;

    --color-primary-soft:
        rgba(59, 130, 246, 0.12);

    --color-secondary: #172033;

    --color-secondary-hover: #222D42;


    /* ======================================================================
       2. BRAND ACCENT
       ====================================================================== */

    --color-accent: #8B5CF6;

    --color-accent-hover: #A78BFA;


    /* ======================================================================
       3. BRAND GRADIENTS
       ====================================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #3B82F6 48%,
            #8B5CF6 100%
        );

    --gradient-primary-hover:
        linear-gradient(
            135deg,
            #3B82F6 0%,
            #60A5FA 48%,
            #A78BFA 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #3B82F6,
            #8B5CF6
        );


    /* ----------------------------------------------------------------------
       Brand Gradient Components
       ---------------------------------------------------------------------- */

    --color-brand-gradient-start: #2563EB;

    --color-brand-gradient-middle: #3B82F6;

    --color-brand-gradient-end: #8B5CF6;


    /* ======================================================================
       4. DECORATIVE COLORS
       ====================================================================== */

    --color-glow-primary:
        rgba(37, 99, 235, 0.22);

    --color-glow-primary-soft:
        rgba(59, 130, 246, 0.12);

    --color-glow-accent:
        rgba(139, 92, 246, 0.18);

    --color-glow-accent-soft:
        rgba(139, 92, 246, 0.10);


    /* ----------------------------------------------------------------------
       Phase 2A.1 Decorative Background Tokens
       ---------------------------------------------------------------------- */

    --color-page-gradient-start: #081120;

    --color-page-glow-primary:
        rgba(37, 99, 235, 0.18);

    --color-page-glow-accent:
        rgba(124, 58, 237, 0.14);

    --color-page-glow-primary-soft:
        rgba(37, 99, 235, 0.10);


    /* ----------------------------------------------------------------------
       Accent Soft States
       ---------------------------------------------------------------------- */

    --color-accent-soft:
        rgba(139, 92, 246, 0.10);

    --color-accent-soft-strong:
        rgba(124, 58, 237, 0.20);


    /* ======================================================================
       5. SELECTION COLORS
       ====================================================================== */

    --color-selection-bg:
        rgba(59, 130, 246, 0.42);

    --color-selection-text:
        #FFFFFF;


    /* ======================================================================
       6. SEMANTIC STATUS COLORS
       ====================================================================== */

    /* ----------------------------------------------------------------------
       SUCCESS
       ---------------------------------------------------------------------- */

    --color-success: #22C55E;

    --color-success-hover: #4ADE80;

    --color-success-soft:
        rgba(34, 197, 94, 0.12);

    --color-success-bg:
        var(--color-success-soft);

    --color-success-border:
        rgba(34, 197, 94, 0.28);


    /* ----------------------------------------------------------------------
       ERROR
       ---------------------------------------------------------------------- */

    --color-error: #EF4444;

    --color-error-hover: #F87171;

    --color-error-soft:
        rgba(239, 68, 68, 0.12);

    --color-error-bg:
        var(--color-error-soft);

    --color-error-border:
        rgba(239, 68, 68, 0.28);


    /* ----------------------------------------------------------------------
       WARNING
       ---------------------------------------------------------------------- */

    --color-warning: #F59E0B;

    --color-warning-hover: #FBBF24;

    --color-warning-soft:
        rgba(245, 158, 11, 0.12);

    --color-warning-bg:
        var(--color-warning-soft);

    --color-warning-border:
        rgba(245, 158, 11, 0.28);


    /* ----------------------------------------------------------------------
       INFO
       ---------------------------------------------------------------------- */

    --color-info: #38BDF8;

    --color-info-hover: #7DD3FC;

    --color-info-soft:
        rgba(56, 189, 248, 0.12);

    --color-info-bg:
        var(--color-info-soft);

    --color-info-border:
        rgba(56, 189, 248, 0.28);


    /* ======================================================================
       7. BACKGROUND SYSTEM
       ====================================================================== */

    --color-background: #07111F;

    --color-page-bg: #07111F;

    --color-page-bg-deep: #040B14;

    --color-page-bg-elevated: #0A1626;


    /* ----------------------------------------------------------------------
       Primary UI Surfaces
       ---------------------------------------------------------------------- */

    --color-surface: #0D1929;

    --color-surface-hover: #122136;

    --color-surface-active: #162942;

    --color-surface-secondary: #101E30;

    --color-surface-tertiary: #14243A;

    --color-surface-muted: #18283D;

    --color-surface-elevated:
        var(--color-surface-secondary);

    --color-card:
        var(--color-surface);


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

    --color-surface-glass:
        rgba(13, 25, 41, 0.78);

    --color-surface-glass-strong:
        rgba(13, 25, 41, 0.92);


    /* ----------------------------------------------------------------------
       Overlay
       ---------------------------------------------------------------------- */

    --color-overlay:
        rgba(2, 6, 14, 0.72);

    --color-overlay-strong:
        rgba(2, 6, 14, 0.86);


    /* ======================================================================
       8. TEXT COLORS
       ====================================================================== */

    --color-text:
        #FFFFFF;

    --color-text-primary:
        #FFFFFF;

    --color-text-secondary:
        #B3C0D1;

    --color-text-on-dark:
        #FFFFFF;

    --color-text-on-dark-secondary:
        #B3C0D1;

    --color-text-muted:
        #7F90A8;

    --color-text-disabled:
        #536278;

    --color-text-inverse:
        #07111F;


    /* ======================================================================
       9. BORDER COLORS
       ====================================================================== */

    --color-border:
        rgba(148, 163, 184, 0.16);

    --color-border-soft:
        rgba(148, 163, 184, 0.10);

    --color-border-subtle:
        var(--color-border-soft);

    --color-border-strong:
        rgba(148, 163, 184, 0.28);

    --color-border-focus:
        var(--color-primary);


    /* ======================================================================
       10. FOCUS RINGS
       ====================================================================== */

    --color-focus-ring:
        rgba(59, 130, 246, 0.34);

    --color-danger-focus-ring:
        rgba(239, 68, 68, 0.28);

    --color-success-focus-ring:
        rgba(34, 197, 94, 0.28);


    /* ======================================================================
       11. TYPOGRAPHY
       ====================================================================== */

    /* ==========================================================================
       TOPPERWORK - FONT SYSTEM
       ========================================================================== */

    /*
     * Available project fonts:
     * 1. Nunito Sans
     * 2. Roboto
     *
     * Change these two variables only when selecting a different font.
     */

    --font-primary: "Roboto";
    --font-secondary: "Nunito Sans";

    /* Global font roles */

    --font-family-base:
        var(--font-primary);

    --font-family-heading:
        var(--font-primary);

    /* Generic fallback stack */

    --font-fallback:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;


    --font-size-xs: 0.75rem;

    --font-size-sm: 0.875rem;

    --font-size-base: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.25rem;

    --font-size-2xl: 1.5rem;

    --font-size-3xl: 1.875rem;

    --font-size-4xl: 2.25rem;

    --font-size-5xl: 3rem;


    --line-height-tight: 1.2;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.7;


    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;


    /* ======================================================================
       12. SPACING SCALE
       ====================================================================== */

    --space-0: 0;

    --space-1: 0.25rem;

    --space-2: 0.5rem;

    --space-3: 0.75rem;

    --space-4: 1rem;

    --space-5: 1.25rem;

    --space-6: 1.5rem;

    --space-7: 1.75rem;

    --space-8: 2rem;

    --space-10: 2.5rem;

    --space-12: 3rem;

    --space-16: 4rem;

    --space-20: 5rem;

    --space-24: 6rem;


    /* ======================================================================
       13. BORDER RADIUS
       ====================================================================== */

    --radius-sm: 0.375rem;

    --radius-md: 0.75rem;

    --radius-lg: 0.75rem;

    --radius-xl: 1rem;

    --radius-2xl: 1.5rem;

    --radius-full: 9999px;


    /* ======================================================================
       14. SHADOW SYSTEM
       ====================================================================== */

    --shadow-sm:
        0 1px 2px
        rgba(0, 0, 0, 0.18);

    --shadow-md:
        0 4px 12px
        rgba(0, 0, 0, 0.20);

    --shadow-lg:
        0 12px 28px
        rgba(0, 0, 0, 0.28);

    --shadow-xl:
        0 24px 48px
        rgba(0, 0, 0, 0.38);

    --shadow-glow-primary:
        0 10px 32px
        rgba(37, 99, 235, 0.22);

    --shadow-glow-accent:
        0 12px 36px
        rgba(139, 92, 246, 0.18);


    /* ======================================================================
       15. TRANSITIONS & ANIMATION
       ====================================================================== */

    --duration-fast: 120ms;

    --duration-normal: 200ms;

    --duration-slow: 320ms;


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

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


    /* ======================================================================
       16. LAYOUT
       ====================================================================== */

    --container-max-width: 1440px;

    --container-wide-max-width: 1440px;

    --content-max-width: 900px;


    --page-padding-mobile:
        var(--space-4);

    --page-padding-tablet:
        var(--space-6);

    --page-padding-desktop:
        var(--space-8);


    /* ======================================================================
       17. TOUCH / MOBILE FOUNDATION
       ====================================================================== */

    --touch-target-min: 44px;


    /* ======================================================================
       18. SAFE AREA SUPPORT
       ====================================================================== */

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

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

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

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


    /* ======================================================================
       19. Z-INDEX SYSTEM
       ====================================================================== */

    --z-base: 1;

    --z-header: 100;

    --z-dropdown: 500;

    --z-sticky: 700;

    --z-loader: 9000;

    --z-modal-backdrop: 10000;

    --z-modal: 10001;

    --z-critical: 11000;


    /* ======================================================================
       19.1 REGISTER PAGE COLOR TOKENS
       ====================================================================== */

    /*
     * Register page uses a dedicated green action system.
     * Global primary remains blue so other pages/components are unaffected.
     */

    --color-register-primary: #22C55E;

    --color-register-primary-hover: #4ADE80;

    --color-register-primary-active: #16A34A;

    --color-register-selected-background: #FFFFFF;

    --color-register-selected-text: #0F172A;

    --color-register-selected-icon-background: #22C55E;

    --color-register-selected-icon-text: #FFFFFF;

    --color-register-selected-border: transparent;

    /*
     * Password strength indicator intentionally remains blue.
     */

    --color-register-strength: #3B82F6;


    /* ======================================================================
       20. CORE UI COMPATIBILITY TOKENS
       ====================================================================== */

    /* ----------------------------------------------------------------------
       Primary / Secondary Contrast
       ---------------------------------------------------------------------- */

    --color-primary-contrast:
        #FFFFFF;

    --color-secondary-contrast:
        var(--color-text-primary);


    /* ----------------------------------------------------------------------
       Danger Compatibility
       ---------------------------------------------------------------------- */

    --color-danger:
        var(--color-error);

    --color-danger-hover:
        var(--color-error-hover);

    --color-danger-contrast:
        #FFFFFF;

    --color-danger-soft:
        var(--color-error-soft);


    /* ----------------------------------------------------------------------
       Loader
       ---------------------------------------------------------------------- */

    --color-loader-track:
        rgba(148, 163, 184, 0.16);


    /* ----------------------------------------------------------------------
       Font Compatibility
       ---------------------------------------------------------------------- */

    --font-family-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;


    /* ----------------------------------------------------------------------
       Line Height Compatibility
       ---------------------------------------------------------------------- */

    --line-height-base:
        var(--line-height-normal);

    --line-height-heading:
        var(--line-height-tight);


    /* ----------------------------------------------------------------------
       Spacing Compatibility
       ---------------------------------------------------------------------- */

    --spacing-xs:
        var(--space-1);

    --spacing-sm:
        var(--space-2);

    --spacing-md:
        var(--space-4);

    --spacing-lg:
        var(--space-6);

    --spacing-xl:
        var(--space-8);


    /* ----------------------------------------------------------------------
       Container Compatibility
       ---------------------------------------------------------------------- */

    --container-padding:
        var(--page-padding-mobile);

    --container-tablet-width: 720px;

    --container-desktop-width: 960px;

    --container-large-width:
        var(--container-max-width);

    --grid-min-column-width: 240px;


    /* ----------------------------------------------------------------------
       Transition Compatibility
       ---------------------------------------------------------------------- */

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

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

    --transition-slow:
        var(--duration-slow)
        var(--ease-standard);


    /* ----------------------------------------------------------------------
       Form System
       ---------------------------------------------------------------------- */

    --color-input-background:
        rgba(13, 25, 41, 0.94);

    --color-input-border:
        var(--color-border);

    --color-input-placeholder:
        var(--color-text-muted);


    --input-padding-y:
        var(--space-3);

    --input-padding-x:
        var(--space-4);

    --input-radius:
        var(--radius-md);


    /* ----------------------------------------------------------------------
       Button Tokens
       ---------------------------------------------------------------------- */

    --button-padding-y:
        var(--space-3);

    --button-padding-x:
        var(--space-5);

    --button-padding-sm-y:
        var(--space-2);

    --button-padding-sm-x:
        var(--space-3);

    --button-padding-lg-y:
        var(--space-4);

    --button-padding-lg-x:
        var(--space-6);

    --button-radius:
        var(--radius-md);


    /* ----------------------------------------------------------------------
       Badge Tokens
       ---------------------------------------------------------------------- */

    --badge-padding-y:
        var(--space-1);

    --badge-padding-x:
        var(--space-2);

    --badge-radius:
        var(--radius-full);


    /* ----------------------------------------------------------------------
       Component States
       ---------------------------------------------------------------------- */

    --opacity-disabled: 0.55;


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

    --z-index-loader:
        var(--z-loader);

    --z-index-modal:
        var(--z-modal);


    /* ----------------------------------------------------------------------
       Component Shadow Tokens
       ---------------------------------------------------------------------- */

    --shadow-header:
        0 1px 0
        rgba(255, 255, 255, 0.02),
        0 12px 40px
        rgba(0, 0, 0, 0.18);

    --shadow-header-menu:
        0 4px 14px
        rgba(0, 0, 0, 0.16);

    --shadow-mobile-navigation:
        0 18px 40px
        rgba(0, 0, 0, 0.28);

    --shadow-modal:
        0 24px 48px
        rgba(15, 23, 42, 0.20);

}


/* ==========================================================================
   TOPPERWORK - LIGHT THEME
   ==========================================================================
   Phase: 2A.2

   Purpose:
   - Secondary light theme
   - Same semantic token architecture as dark theme
   - Dark theme remains the default
   - Components do not need separate light-theme CSS
   ========================================================================== */

[data-theme="light"] {

    /* ======================================================================
       PRIMARY & SECONDARY
       ====================================================================== */

    --color-primary: #2563EB;

    --color-primary-hover: #1D4ED8;

    --color-primary-active: #1E40AF;

    --color-primary-soft:
        rgba(37, 99, 235, 0.10);

    --color-secondary: #E2E8F0;

    --color-secondary-hover: #CBD5E1;


    /* ======================================================================
       BRAND ACCENT
       ====================================================================== */

    --color-accent: #7C3AED;

    --color-accent-hover: #6D28D9;


    /* ======================================================================
       BRAND GRADIENTS
       ====================================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #1D4ED8 0%,
            #2563EB 48%,
            #7C3AED 100%
        );

    --gradient-primary-hover:
        linear-gradient(
            135deg,
            #2563EB 0%,
            #3B82F6 48%,
            #8B5CF6 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            #2563EB,
            #7C3AED
        );


    --color-brand-gradient-start: #1D4ED8;

    --color-brand-gradient-middle: #2563EB;

    --color-brand-gradient-end: #7C3AED;


    /* ======================================================================
       DECORATIVE
       ====================================================================== */

    --color-glow-primary:
        rgba(37, 99, 235, 0.14);

    --color-glow-primary-soft:
        rgba(59, 130, 246, 0.08);

    --color-glow-accent:
        rgba(124, 58, 237, 0.12);

    --color-glow-accent-soft:
        rgba(124, 58, 237, 0.07);


    --color-page-gradient-start: #F8FAFC;

    --color-page-glow-primary:
        rgba(37, 99, 235, 0.08);

    --color-page-glow-accent:
        rgba(124, 58, 237, 0.06);

    --color-page-glow-primary-soft:
        rgba(37, 99, 235, 0.04);


    --color-accent-soft:
        rgba(124, 58, 237, 0.08);

    --color-accent-soft-strong:
        rgba(124, 58, 237, 0.16);


    /* ======================================================================
       SELECTION
       ====================================================================== */

    --color-selection-bg:
        rgba(37, 99, 235, 0.20);

    --color-selection-text:
        #0F172A;


    /* ======================================================================
       SUCCESS
       ====================================================================== */

    --color-success: #16A34A;

    --color-success-hover: #15803D;

    --color-success-soft:
        rgba(22, 163, 74, 0.10);

    --color-success-border:
        rgba(22, 163, 74, 0.24);


    /* ======================================================================
       ERROR
       ====================================================================== */

    --color-error: #DC2626;

    --color-error-hover: #B91C1C;

    --color-error-soft:
        rgba(220, 38, 38, 0.10);

    --color-error-border:
        rgba(220, 38, 38, 0.24);


    /* ======================================================================
       WARNING
       ====================================================================== */

    --color-warning: #D97706;

    --color-warning-hover: #B45309;

    --color-warning-soft:
        rgba(217, 119, 6, 0.10);

    --color-warning-border:
        rgba(217, 119, 6, 0.24);


    /* ======================================================================
       INFO
       ====================================================================== */

    --color-info: #0284C7;

    --color-info-hover: #0369A1;

    --color-info-soft:
        rgba(2, 132, 199, 0.10);

    --color-info-border:
        rgba(2, 132, 199, 0.24);


    /* ======================================================================
       BACKGROUND SYSTEM
       ====================================================================== */

    --color-background: #F8FAFC;

    --color-page-bg: #F8FAFC;

    --color-page-bg-deep: #F1F5F9;

    --color-page-bg-elevated: #FFFFFF;


    --color-surface: #FFFFFF;

    --color-surface-hover: #F1F5F9;

    --color-surface-active: #E2E8F0;

    --color-surface-secondary: #F8FAFC;

    --color-surface-tertiary: #F1F5F9;

    --color-surface-muted: #E2E8F0;

    --color-surface-elevated: #FFFFFF;

    --color-card: #FFFFFF;


    /* ======================================================================
       GLASS SURFACES
       ====================================================================== */

    --color-surface-glass:
        rgba(255, 255, 255, 0.82);

    --color-surface-glass-strong:
        rgba(255, 255, 255, 0.94);


    /* ======================================================================
       OVERLAY
       ====================================================================== */

    --color-overlay:
        rgba(15, 23, 42, 0.48);

    --color-overlay-strong:
        rgba(15, 23, 42, 0.64);


    /* ======================================================================
       TEXT
       ====================================================================== */

    --color-text:
        #0F172A;

    --color-text-primary:
        #0F172A;

    --color-text-secondary:
        #475569;

    --color-text-on-dark:
        #FFFFFF;

    --color-text-on-dark-secondary:
        #B3C0D1;

    --color-text-muted:
        #64748B;

    --color-text-disabled:
        #94A3B8;

    --color-text-inverse:
        #F8FAFC;


    /* ======================================================================
       BORDERS
       ====================================================================== */

    --color-border:
        rgba(15, 23, 42, 0.10);

    --color-border-soft:
        rgba(15, 23, 42, 0.06);

    --color-border-subtle:
        var(--color-border-soft);

    --color-border-strong:
        rgba(15, 23, 42, 0.18);

    --color-border-focus:
        var(--color-primary);


    /* ======================================================================
       FOCUS
       ====================================================================== */

    --color-focus-ring:
        rgba(37, 99, 235, 0.28);

    --color-danger-focus-ring:
        rgba(220, 38, 38, 0.24);

    --color-success-focus-ring:
        rgba(22, 163, 74, 0.24);


    /* ======================================================================
       REGISTER PAGE COLOR TOKENS
       ====================================================================== */

    /*
     * Register page keeps its own green action system.
     * Global primary remains blue.
     */

    --color-register-primary: #16A34A;

    --color-register-primary-hover: #15803D;

    --color-register-primary-active: #166534;

    --color-register-selected-background: #FFFFFF;

    --color-register-selected-text: #0F172A;

    --color-register-selected-icon-background: #16A34A;

    --color-register-selected-icon-text: #FFFFFF;

    --color-register-selected-border: transparent;

    /*
     * Password strength indicator intentionally remains blue.
     */

    --color-register-strength: #3B82F6;


    /* ======================================================================
       SHADOW SYSTEM
       ====================================================================== */

    --shadow-sm:
        0 1px 2px
        rgba(15, 23, 42, 0.06);

    --shadow-md:
        0 4px 12px
        rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 12px 28px
        rgba(15, 23, 42, 0.10);

    --shadow-xl:
        0 24px 48px
        rgba(15, 23, 42, 0.14);

    --shadow-glow-primary:
        0 10px 32px
        rgba(37, 99, 235, 0.14);

    --shadow-glow-accent:
        0 12px 36px
        rgba(124, 58, 237, 0.12);


    /* ======================================================================
       COMPONENT SHADOW TOKENS
       ====================================================================== */

    --shadow-header:
        0 1px 0
        rgba(15, 23, 42, 0.04),
        0 12px 40px
        rgba(15, 23, 42, 0.08);

    --shadow-header-menu:
        0 4px 14px
        rgba(15, 23, 42, 0.08);

    --shadow-mobile-navigation:
        0 18px 40px
        rgba(15, 23, 42, 0.12);

    --shadow-modal:
        0 24px 48px
        rgba(15, 23, 42, 0.14);


    /* ======================================================================
       LOADER
       ====================================================================== */

    --color-loader-track:
        rgba(15, 23, 42, 0.10);


    /* ======================================================================
       FORM
       ====================================================================== */

    --color-input-background:
        rgba(255, 255, 255, 0.96);

    --color-input-border:
        var(--color-border);

    --color-input-placeholder:
        var(--color-text-muted);

}