/* ============================================================================
   LORD HENTAİ — Pink & Black Cyber-Akuma Design Tokens (Standard v9.4)
   ============================================================================ */

:root {
    /* ── Font Family System (Minimal Rounded Modern Typography) ── */
    --font-sans:        'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-fa:          'A Negaar', 'Negaar', Tahoma, sans-serif;
    --font-num:         'A Negaar', 'Negaar', Tahoma, sans-serif;
    --font-primary:     'A Negaar', 'Negaar', Tahoma, sans-serif;

    /* ── OLED Black & Deep Obsidian Palette ── */
    --bg-base:          #050508;
    --bg-primary:       #08050C;
    --bg-raised:        #0E0814;
    --bg-surface:       #140D1E;
    --bg-overlay:       #1B1226;

    /* ── Hot Pink & Cyber Rose Accents (Primary Theme) ── */
    --accent:           #FF2A7A;
    --accent-hover:     #FF4D8D;
    --accent-active:    #E01A67;
    --accent-glow:      rgba(255, 42, 122, 0.15);
    --accent-subtle:    rgba(255, 42, 122, 0.08);
    --accent-soft:      rgba(255, 42, 122, 0.14);
    --accent-rose:      #FF75A9;
    --accent-pink-soft: rgba(255, 117, 169, 0.10);

    /* ── Royal Violet & Orchid Accents (Manhwa Differentiation) ── */
    --accent-manhwa:    #9D4EDD;
    --accent-manhwa-glow: rgba(157, 78, 221, 0.15);
    --accent-manhwa-soft: rgba(157, 78, 221, 0.14);
    --accent-violet:    #C084FC;

    /* ── Luxury Gold & System Colors ── */
    --gold:             #FBBF24;
    --gold-glow:        rgba(251, 191, 36, 0.20);
    --success:          #10B981;
    --warning:          #F59E0B;
    --error:            #EF4444;
    --info:             #3B82F6;

    /* ── Frosted Glass Surfaces (Subtle Hairline Borders & Velvet Blending) ── */
    --glass:            rgba(14, 9, 20, 0.82);
    --glass-raised:     rgba(20, 13, 28, 0.90);
    --glass-solid:      #0B0713;
    --glass-border:     rgba(255, 255, 255, 0.08);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-border-accent: rgba(255, 77, 141, 0.28);
    --glass-border-top: 1px solid rgba(255, 77, 141, 0.35);
    --glass-hover:      rgba(255, 255, 255, 0.12);
    --glass-highlight:  rgba(255, 255, 255, 0.10);

    /* ── Typography & Contrasts ── */
    --text-primary:     #FFFFFF;
    --text-secondary:   #A39CB3;
    --text-tertiary:    #6F6880;
    --text-muted:       #514B60;
    --text-accent:      #FF4D8D;

    /* ── Gradients ── */
    --gradient-accent:  linear-gradient(135deg, #FF2A7A 0%, #FF6584 100%);
    --gradient-manhwa:  linear-gradient(135deg, #9D4EDD 0%, #FF2A7A 100%);
    --gradient-dark:    linear-gradient(180deg, #0E0814 0%, #050508 100%);
    --gradient-glass:   linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(14, 9, 20, 0.85) 100%);
    --gradient-cta:     linear-gradient(135deg, rgba(255, 42, 122, 0.18) 0%, rgba(157, 78, 221, 0.18) 100%);
    --header-fade:      linear-gradient(180deg, rgba(5, 5, 8, 0.95) 0%, rgba(5, 5, 8, 0.6) 60%, transparent 100%);

    /* ── Inset Lighting & Seamless Velvet Box Shadows ── */
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md:        0 6px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg:        0 14px 36px rgba(0, 0, 0, 0.75);
    --shadow-inset-glow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 16px rgba(255, 42, 122, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-accent:    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 16px rgba(255, 42, 122, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-manhwa:    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 16px rgba(157, 78, 221, 0.08), 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-card:      inset 0 1px 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 14px rgba(255, 42, 122, 0.05), 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-card-hover: inset 0 1px 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 22px rgba(255, 42, 122, 0.10), 0 14px 34px rgba(0, 0, 0, 0.78);
    --shadow-panel:     inset 0 1px 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 42, 122, 0.05), 0 14px 40px rgba(0, 0, 0, 0.7);
    --shadow-modal:     inset 0 1px 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 26px rgba(255, 42, 122, 0.08), 0 24px 64px rgba(0, 0, 0, 0.9);
    --shadow-drawer:    inset 1px 0 0 0 rgba(255, 255, 255, 0.08), inset 0 0 24px rgba(255, 42, 122, 0.05), -16px 0 45px rgba(0, 0, 0, 0.85);
    --shadow-input:     inset 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 0 12px rgba(255, 42, 122, 0.03);
    --shadow-input-focus: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 14px rgba(255, 42, 122, 0.10), 0 0 0 1px rgba(255, 77, 141, 0.35);

    /* ── Radii ── */
    --radius-xs:        8px;
    --radius-sm:        14px;
    --radius-md:        18px;
    --radius-lg:        24px;
    --radius-xl:        30px;
    --radius-2xl:       38px;
    --radius-full:      9999px;

    /* Backward compatibility aliases */
    --r-xs:             8px;
    --r-sm:             14px;
    --r-md:             18px;
    --r-lg:             24px;
    --r-xl:             30px;
    --r-2xl:            38px;
    --r-full:           9999px;
    --card-radius:      24px;
    --btn-radius:       9999px;

    /* ── Transitions & Easings ── */
    --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast:  0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base:  0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow:  0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Spacing ── */
    --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
    --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

    /* ── Layout Dimensions ── */
    --header-h:         68px;
    --container-max:    1380px;
    --mobile-dock-h:    64px;

    /* ── Z-Indices ── */
    --z-negative: -1;
    --z-base: 1;
    --z-card: 2;
    --z-dropdown: 40;
    --z-sticky: 50;
    --z-header: 60;
    --z-drawer: 70;
    --z-modal: 80;
    --z-toast: 90;
}