/* ================================================================
   LifeStyleMod – Design Tokens (Theme System v6.1)
   ----------------------------------------------------------------
   v6.1:
   ▸ حذف [data-theme="day"] (روشن)
   ▸ حذف [data-theme="night"] (تیره‌تر)
   ▸ 🆕 [data-theme="rainbowdash"] (آبی آسمانی Rainbow Dash)
   ▸ 🆕 [data-theme="dracula"] (بنفش تیره — کلاسیک)

   v6.0:
   ▸ color-scheme برای هر تم
   ▸ تکمیل overrideها در همه تم‌ها
   ▸ اضافه شدن تم midnight
   ================================================================ */

:root {
    /* ═══════════════════════════════════════════════
       1. BRAND
       ═══════════════════════════════════════════════ */
    --c-primary:         #6d9fc9;
    --c-primary-hover:   #5a8bb5;
    --c-primary-active:  #4a7898;
    --c-primary-light:   #95bcd7;
    --c-primary-lighter: #b8d2e3;
    --c-primary-dark:    #4a7299;
    --c-primary-deep:    #2a4459;

    /* ═══════════════════════════════════════════════
       2. BACKGROUNDS
       ═══════════════════════════════════════════════ */
    --c-bg:              #151c28;
    --c-bg-alt:          #1a2230;
    --c-surface:         #1c2532;
    --c-surface-2:       #232e3e;
    --c-surface-3:       #2a3547;
    --c-surface-glass:   #1c2532;
    --c-surface-hover:   rgba(109, 159, 201, 0.07);
    --c-surface-active:  rgba(109, 159, 201, 0.14);

    /* ═══════════════════════════════════════════════
       3. TEXT
       ═══════════════════════════════════════════════ */
    --c-text:            #dfe8f1;
    --c-text-soft:       #b5c4d1;
    --c-text-muted:      #7e8fa0;
    --c-text-dim:        #556678;
    --c-text-on-primary: #0f1a24;
    --c-text-on-light:   #151c28;

    /* ═══════════════════════════════════════════════
       4. BORDERS
       ═══════════════════════════════════════════════ */
    --c-border:          rgba(109, 159, 201, 0.16);
    --c-border-soft:     rgba(109, 159, 201, 0.08);
    --c-border-strong:   rgba(109, 159, 201, 0.30);
    --c-border-hover:    rgba(109, 159, 201, 0.50);
    --c-border-focus:    rgba(109, 159, 201, 0.75);

    /* ═══════════════════════════════════════════════
       5. STATUS
       ═══════════════════════════════════════════════ */
    --c-success:         #5fb89a;
    --c-success-bg:      rgba(95, 184, 154, 0.12);
    --c-success-border:  rgba(95, 184, 154, 0.30);

    --c-warning:         #d9a854;
    --c-warning-bg:      rgba(217, 168, 84, 0.12);
    --c-warning-border:  rgba(217, 168, 84, 0.30);

    --c-danger:          #c97a8a;
    --c-danger-bg:       rgba(201, 122, 138, 0.12);
    --c-danger-border:   rgba(201, 122, 138, 0.30);

    --c-info:            #6d9fc9;
    --c-info-bg:         rgba(109, 159, 201, 0.12);
    --c-info-border:     rgba(109, 159, 201, 0.30);

    /* ═══════════════════════════════════════════════
       6. ROLE COLORS
       ═══════════════════════════════════════════════ */
    --c-role-owner:      #95bcd7;
    --c-role-admin:      #6d9fc9;
    --c-role-creator:    #5fb89a;
    --c-role-user:       #556678;

    /* ═══════════════════════════════════════════════
       7. RAINBOW
       ═══════════════════════════════════════════════ */
    --c-rainbow-red:     #c97a8a;
    --c-rainbow-orange:  #d9a878;
    --c-rainbow-yellow:  #d9c878;
    --c-rainbow-green:   #7db89a;
    --c-rainbow-blue:    #6d9fc9;
    --c-rainbow-purple:  #9d85b8;

    /* ═══════════════════════════════════════════════
       8. SHADOWS
       ═══════════════════════════════════════════════ */
    --shadow-xs:         0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:         0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-md:         0 4px 14px rgba(0, 0, 0, 0.30);
    --shadow-lg:         0 12px 32px rgba(0, 0, 0, 0.40);
    --shadow-xl:         0 20px 48px rgba(0, 0, 0, 0.50);

    --glow-cta:          0 0 0 3px rgba(109, 159, 201, 0.20);
    --glow-focus:        0 0 0 3px rgba(109, 159, 201, 0.30);
    --shadow-glow:       0 4px 20px rgba(109, 159, 201, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(109, 159, 201, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(109, 159, 201, 0.10);

    /* ═══════════════════════════════════════════════
       9. RADIUS
       ═══════════════════════════════════════════════ */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   8px;
    --r-lg:   10px;
    --r-xl:   14px;
    --r-2xl:  18px;
    --r-full: 9999px;

    /* ═══════════════════════════════════════════════
       10. SPACING
       ═══════════════════════════════════════════════ */
    --s-0:   0;
    --s-1:   4px;
    --s-2:   8px;
    --s-3:   12px;
    --s-4:   16px;
    --s-5:   20px;
    --s-6:   24px;
    --s-7:   32px;
    --s-8:   48px;
    --s-9:   72px;
    --s-10:  96px;

    /* ═══════════════════════════════════════════════
       11. TYPOGRAPHY
       ═══════════════════════════════════════════════ */
    --font-main:   'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:   'Vazirmatn', system-ui, sans-serif;

    --fs-xs:    12px;
    --fs-sm:    13px;
    --fs-base:  15px;
    --fs-md:    17px;
    --fs-lg:    20px;
    --fs-xl:    24px;
    --fs-2xl:   32px;
    --fs-3xl:   42px;
    --fs-4xl:   54px;
    --fs-5xl:   70px;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-black:  800;

    --lh-tight:  1.3;
    --lh-base:   1.75;
    --lh-loose:  2;

    --ls-tight:   -0.01em;
    --ls-tighter: -0.02em;
    --ls-wide:    0.06em;

    /* ═══════════════════════════════════════════════
       12. LAYOUT
       ═══════════════════════════════════════════════ */
    --container:     1240px;
    --container-sm:  800px;
    --container-md:  1000px;
    --gap:           16px;
    --gap-sm:        10px;
    --gap-lg:        24px;

    --nav-h:         64px;
    --nav-h-mobile:  56px;

    /* ═══════════════════════════════════════════════
       13. GRADIENTS
       ═══════════════════════════════════════════════ */
    --g-primary:  linear-gradient(135deg, #6d9fc9 0%, #4a7898 100%);

    --g-rainbow:  linear-gradient(90deg,
                    #c97a8a 0%,
                    #d9a878 20%,
                    #d9c878 40%,
                    #7db89a 60%,
                    #6d9fc9 80%,
                    #9d85b8 100%);

    --g-rainbow-line: linear-gradient(90deg,
                    #c97a8a,
                    #d9a878,
                    #d9c878,
                    #7db89a,
                    #6d9fc9,
                    #9d85b8);

    --g-rainbow-soft: linear-gradient(135deg,
                    rgba(201, 122, 138, 0.08) 0%,
                    rgba(217, 168, 120, 0.08) 20%,
                    rgba(217, 200, 120, 0.08) 40%,
                    rgba(125, 184, 154, 0.08) 60%,
                    rgba(109, 159, 201, 0.08) 80%,
                    rgba(157, 133, 184, 0.08) 100%);

    --g-surface:  linear-gradient(135deg, rgba(109,159,201,0.05) 0%, rgba(149,188,215,0.02) 100%);
    --g-text:     linear-gradient(135deg, #95bcd7 0%, #6d9fc9 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(109,159,201,0.25), transparent);

    /* ═══════════════════════════════════════════════
       14. TRANSITIONS
       ═══════════════════════════════════════════════ */
    --t-instant: 0.06s ease;
    --t-fast:    0.12s ease;
    --t-base:    0.18s ease;
    --t-slow:    0.32s cubic-bezier(0.16, 1, 0.3, 1);
    --t-bounce:  0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ═══════════════════════════════════════════════
       15. Z-INDEX
       ═══════════════════════════════════════════════ */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   500;
    --z-navbar:   1000;
    --z-overlay:  1050;
    --z-menu:     1100;
    --z-modal:    1200;
    --z-toast:    1300;

    /* ═══════════════════════════════════════════════
       16. LEGACY ALIASES
       ═══════════════════════════════════════════════ */
    --bg:              var(--c-bg);
    --bg-glass:        var(--c-surface-glass);
    --border:          var(--c-border);
    --border-light:    var(--c-border);

    --primary:         var(--c-primary);
    --primary-hover:   var(--c-primary-hover);
    --gold:            var(--c-primary);
    --gold-light:      var(--c-primary-light);
    --gold-dark:       var(--c-primary-dark);
    --cyan:            var(--c-success);
    --success:         var(--c-success);
    --warning:         var(--c-warning);
    --danger:          var(--c-danger);

    --text-main:       var(--c-text);
    --text-muted:      var(--c-text-muted);
    --text-light:      var(--c-text-soft);

    --radius-sm:       var(--r-sm);
    --radius-md:       var(--r-md);
    --radius-lg:       var(--r-lg);
    --radius-xl:       var(--r-xl);

    --glass-border:    1px solid var(--c-border);

    /* ═══════════════════════════════════════════════
       17. DEFAULT COLOR SCHEME
       ═══════════════════════════════════════════════ */
    color-scheme: dark;
}


/* ═══════════════════════════════════════════════════════════
   THEME: Twilight Sky (پیش‌فرض — بدون data-theme)
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   THEME: Rainbow Dash (آبی آسمانی + رنگین‌کمان)
   ═══════════════════════════════════════════════════════════ */
[data-theme="rainbowdash"] {
    color-scheme: dark;

    /* ─── Backgrounds ─── */
    --c-bg:              #0a1628;
    --c-bg-alt:          #0f1d33;
    --c-surface:         #122240;
    --c-surface-2:       #18294d;
    --c-surface-3:       #1f335c;
    --c-surface-glass:   #122240;
    --c-surface-hover:   rgba(79, 195, 247, 0.08);
    --c-surface-active:  rgba(79, 195, 247, 0.16);

    /* ─── Text ─── */
    --c-text:            #e0eef7;
    --c-text-soft:       #b8d4e8;
    --c-text-muted:      #7ba5c4;
    --c-text-dim:        #4a6b8a;
    --c-text-on-primary: #0a1628;
    --c-text-on-light:   #0a1628;

    /* ─── Borders ─── */
    --c-border:          rgba(79, 195, 247, 0.16);
    --c-border-soft:     rgba(79, 195, 247, 0.08);
    --c-border-strong:   rgba(79, 195, 247, 0.30);
    --c-border-hover:    rgba(79, 195, 247, 0.50);
    --c-border-focus:    rgba(79, 195, 247, 0.80);

    /* ─── Brand (Sky Blue) ─── */
    --c-primary:         #4fc3f7;
    --c-primary-hover:   #3db5eb;
    --c-primary-active:  #2ba0d9;
    --c-primary-light:   #7dd3fc;
    --c-primary-lighter: #a5e1fd;
    --c-primary-dark:    #0284c7;
    --c-primary-deep:    #075985;

    /* ─── Status ─── */
    --c-success:         #22c55e;
    --c-success-bg:      rgba(34, 197, 94, 0.12);
    --c-success-border:  rgba(34, 197, 94, 0.30);

    --c-warning:         #facc15;
    --c-warning-bg:      rgba(250, 204, 21, 0.12);
    --c-warning-border:  rgba(250, 204, 21, 0.30);

    --c-danger:          #ef4444;
    --c-danger-bg:       rgba(239, 68, 68, 0.12);
    --c-danger-border:   rgba(239, 68, 68, 0.30);

    --c-info:            #4fc3f7;
    --c-info-bg:         rgba(79, 195, 247, 0.12);
    --c-info-border:     rgba(79, 195, 247, 0.30);

    /* ─── Roles ─── */
    --c-role-owner:      #7dd3fc;
    --c-role-admin:      #4fc3f7;
    --c-role-creator:    #22c55e;
    --c-role-user:       #4a6b8a;

    /* ─── Rainbow (Mane) ─── */
    --c-rainbow-red:     #ef4444;
    --c-rainbow-orange:  #f97316;
    --c-rainbow-yellow:  #facc15;
    --c-rainbow-green:   #22c55e;
    --c-rainbow-blue:    #3b82f6;
    --c-rainbow-purple:  #a855f7;

    /* ─── Gradients ─── */
    --g-primary:  linear-gradient(135deg, #4fc3f7 0%, #0284c7 100%);
    --g-text:     linear-gradient(135deg, #7dd3fc 0%, #4fc3f7 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.30), transparent);
    --g-surface:  linear-gradient(135deg, rgba(79,195,247,0.06) 0%, rgba(79,195,247,0.02) 100%);
    --g-rainbow-line: linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #a855f7);
    --g-rainbow:      linear-gradient(90deg, #ef4444 0%, #f97316 20%, #facc15 40%, #22c55e 60%, #3b82f6 80%, #a855f7 100%);

    /* ─── Glow ─── */
    --glow-cta:          0 0 0 3px rgba(79, 195, 247, 0.20);
    --glow-focus:        0 0 0 3px rgba(79, 195, 247, 0.30);
    --shadow-glow:       0 4px 20px rgba(79, 195, 247, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(79, 195, 247, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(79, 195, 247, 0.10);
}


/* ═══════════════════════════════════════════════════════════
   THEME: Dracula (بنفش تیره — کلاسیک)
   ═══════════════════════════════════════════════════════════ */
[data-theme="dracula"] {
    color-scheme: dark;

    /* ─── Backgrounds ─── */
    --c-bg:              #1e1f29;
    --c-bg-alt:          #282a36;
    --c-surface:         #2d2f3f;
    --c-surface-2:       #383a4d;
    --c-surface-3:       #44475a;
    --c-surface-glass:   #2d2f3f;
    --c-surface-hover:   rgba(189, 147, 249, 0.08);
    --c-surface-active:  rgba(189, 147, 249, 0.16);

    /* ─── Text ─── */
    --c-text:            #f8f8f2;
    --c-text-soft:       #d4d6e0;
    --c-text-muted:      #a4a8bd;
    --c-text-dim:        #6272a4;
    --c-text-on-primary: #1e1f29;
    --c-text-on-light:   #1e1f29;

    /* ─── Borders ─── */
    --c-border:          rgba(189, 147, 249, 0.16);
    --c-border-soft:     rgba(189, 147, 249, 0.08);
    --c-border-strong:   rgba(189, 147, 249, 0.30);
    --c-border-hover:    rgba(189, 147, 249, 0.50);
    --c-border-focus:    rgba(189, 147, 249, 0.80);

    /* ─── Brand (Purple) ─── */
    --c-primary:         #bd93f9;
    --c-primary-hover:   #a87ee8;
    --c-primary-active:  #8f6ad4;
    --c-primary-light:   #d0b3fb;
    --c-primary-lighter: #e3d0fc;
    --c-primary-dark:    #8f6ad4;
    --c-primary-deep:    #5a3d8f;

    /* ─── Status ─── */
    --c-success:         #50fa7b;
    --c-success-bg:      rgba(80, 250, 123, 0.12);
    --c-success-border:  rgba(80, 250, 123, 0.30);

    --c-warning:         #f1fa8c;
    --c-warning-bg:      rgba(241, 250, 140, 0.12);
    --c-warning-border:  rgba(241, 250, 140, 0.30);

    --c-danger:          #ff5555;
    --c-danger-bg:       rgba(255, 85, 85, 0.12);
    --c-danger-border:   rgba(255, 85, 85, 0.30);

    --c-info:            #8be9fd;
    --c-info-bg:         rgba(139, 233, 253, 0.12);
    --c-info-border:     rgba(139, 233, 253, 0.30);

    /* ─── Roles ─── */
    --c-role-owner:      #d0b3fb;
    --c-role-admin:      #bd93f9;
    --c-role-creator:    #50fa7b;
    --c-role-user:       #6272a4;

    /* ─── Gradients ─── */
    --g-primary:  linear-gradient(135deg, #bd93f9 0%, #8f6ad4 100%);
    --g-text:     linear-gradient(135deg, #d0b3fb 0%, #bd93f9 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(189, 147, 249, 0.30), transparent);
    --g-surface:  linear-gradient(135deg, rgba(189,147,249,0.06) 0%, rgba(189,147,249,0.02) 100%);

    /* ─── Glow ─── */
    --glow-cta:          0 0 0 3px rgba(189, 147, 249, 0.20);
    --glow-focus:        0 0 0 3px rgba(189, 147, 249, 0.30);
    --shadow-glow:       0 4px 20px rgba(189, 147, 249, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(189, 147, 249, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(189, 147, 249, 0.10);
}


/* ═══════════════════════════════════════════════════════════
   THEME: Sunset (غروب صورتی ملایم)
   ═══════════════════════════════════════════════════════════ */
[data-theme="sunset"] {
    color-scheme: dark;

    --c-bg:              #1e1822;
    --c-bg-alt:          #251d2a;
    --c-surface:         #2c2232;
    --c-surface-2:       #352a3d;
    --c-surface-3:       #3e3148;
    --c-surface-glass:   #2c2232;
    --c-surface-hover:   rgba(201, 138, 160, 0.08);
    --c-surface-active:  rgba(201, 138, 160, 0.16);

    --c-text:            #f0e0ec;
    --c-text-soft:       #d4bfce;
    --c-text-muted:      #a894a4;
    --c-text-dim:        #6d5d6d;
    --c-text-on-primary: #1e1822;
    --c-text-on-light:   #1e1822;

    --c-border:          rgba(201, 138, 160, 0.16);
    --c-border-soft:     rgba(201, 138, 160, 0.08);
    --c-border-strong:   rgba(201, 138, 160, 0.30);
    --c-border-hover:    rgba(201, 138, 160, 0.50);
    --c-border-focus:    rgba(201, 138, 160, 0.75);

    --c-primary:         #c98aa0;
    --c-primary-hover:   #b5778d;
    --c-primary-active:  #a06578;
    --c-primary-light:   #e0b3c4;
    --c-primary-lighter: #eccadb;
    --c-primary-dark:    #a06578;
    --c-primary-deep:    #6b4054;

    --c-success:         #7fc4a0;
    --c-success-bg:      rgba(127, 196, 160, 0.12);
    --c-success-border:  rgba(127, 196, 160, 0.30);

    --c-warning:         #e0b878;
    --c-warning-bg:      rgba(224, 184, 120, 0.12);
    --c-warning-border:  rgba(224, 184, 120, 0.30);

    --c-danger:          #d998a8;
    --c-danger-bg:       rgba(217, 152, 168, 0.12);
    --c-danger-border:   rgba(217, 152, 168, 0.30);

    --c-info:            #c98aa0;
    --c-info-bg:         rgba(201, 138, 160, 0.12);
    --c-info-border:     rgba(201, 138, 160, 0.30);

    --c-role-owner:      #e0b3c4;
    --c-role-admin:      #c98aa0;
    --c-role-creator:    #7fc4a0;
    --c-role-user:       #6d5d6d;

    --g-primary:  linear-gradient(135deg, #c98aa0 0%, #a06578 100%);
    --g-text:     linear-gradient(135deg, #e0b3c4 0%, #c98aa0 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(201, 138, 160, 0.25), transparent);
    --g-surface:  linear-gradient(135deg, rgba(201,138,160,0.05) 0%, rgba(201,138,160,0.02) 100%);

    --glow-cta:          0 0 0 3px rgba(201, 138, 160, 0.20);
    --glow-focus:        0 0 0 3px rgba(201, 138, 160, 0.30);
    --shadow-glow:       0 4px 20px rgba(201, 138, 160, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(201, 138, 160, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(201, 138, 160, 0.10);
}


/* ═══════════════════════════════════════════════════════════
   THEME: Fluttershy (زرد خاکی ملایم)
   ═══════════════════════════════════════════════════════════ */
[data-theme="fluttershy"] {
    color-scheme: dark;

    --c-bg:              #1e1c14;
    --c-bg-alt:          #26231a;
    --c-surface:         #2d2921;
    --c-surface-2:       #37322a;
    --c-surface-3:       #423c33;
    --c-surface-glass:   #2d2921;
    --c-surface-hover:   rgba(217, 200, 120, 0.08);
    --c-surface-active:  rgba(217, 200, 120, 0.16);

    --c-text:            #f0ead8;
    --c-text-soft:       #d6cdb0;
    --c-text-muted:      #a89c80;
    --c-text-dim:        #6d6450;
    --c-text-on-primary: #1e1c14;
    --c-text-on-light:   #1e1c14;

    --c-border:          rgba(217, 200, 120, 0.16);
    --c-border-soft:     rgba(217, 200, 120, 0.08);
    --c-border-strong:   rgba(217, 200, 120, 0.30);
    --c-border-hover:    rgba(217, 200, 120, 0.50);
    --c-border-focus:    rgba(217, 200, 120, 0.75);

    --c-primary:         #d9c878;
    --c-primary-hover:   #c4b466;
    --c-primary-active:  #b0a058;
    --c-primary-light:   #e8dc9c;
    --c-primary-lighter: #f0e6bc;
    --c-primary-dark:    #a08c4a;
    --c-primary-deep:    #5f5430;

    --c-success:         #8fc890;
    --c-success-bg:      rgba(143, 200, 144, 0.12);
    --c-success-border:  rgba(143, 200, 144, 0.30);

    --c-warning:         #e0b858;
    --c-warning-bg:      rgba(224, 184, 88, 0.12);
    --c-warning-border:  rgba(224, 184, 88, 0.30);

    --c-danger:          #d99080;
    --c-danger-bg:       rgba(217, 144, 128, 0.12);
    --c-danger-border:   rgba(217, 144, 128, 0.30);

    --c-info:            #d9c878;
    --c-info-bg:         rgba(217, 200, 120, 0.12);
    --c-info-border:     rgba(217, 200, 120, 0.30);

    --c-role-owner:      #e8dc9c;
    --c-role-admin:      #d9c878;
    --c-role-creator:    #8fc890;
    --c-role-user:       #6d6450;

    --g-primary:  linear-gradient(135deg, #d9c878 0%, #a08c4a 100%);
    --g-text:     linear-gradient(135deg, #e8dc9c 0%, #d9c878 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(217, 200, 120, 0.25), transparent);
    --g-surface:  linear-gradient(135deg, rgba(217,200,120,0.05) 0%, rgba(217,200,120,0.02) 100%);

    --glow-cta:          0 0 0 3px rgba(217, 200, 120, 0.20);
    --glow-focus:        0 0 0 3px rgba(217, 200, 120, 0.30);
    --shadow-glow:       0 4px 20px rgba(217, 200, 120, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(217, 200, 120, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(217, 200, 120, 0.10);
}


/* ═══════════════════════════════════════════════════════════
   THEME: Midnight (آبی-سرد عمیق)
   ═══════════════════════════════════════════════════════════ */
[data-theme="midnight"] {
    color-scheme: dark;

    --c-bg:              #070b14;
    --c-bg-alt:          #0b1020;
    --c-surface:         #0f1526;
    --c-surface-2:       #141c31;
    --c-surface-3:       #1a243d;
    --c-surface-glass:   #0f1526;
    --c-surface-hover:   rgba(122, 159, 209, 0.08);
    --c-surface-active:  rgba(122, 159, 209, 0.16);

    --c-text:            #dde6f5;
    --c-text-soft:       #b0bedb;
    --c-text-muted:      #7a8aab;
    --c-text-dim:        #4a5776;
    --c-text-on-primary: #070b14;
    --c-text-on-light:   #070b14;

    --c-border:          rgba(122, 159, 209, 0.15);
    --c-border-soft:     rgba(122, 159, 209, 0.07);
    --c-border-strong:   rgba(122, 159, 209, 0.28);
    --c-border-hover:    rgba(122, 159, 209, 0.50);
    --c-border-focus:    rgba(122, 159, 209, 0.80);

    --c-primary:         #7a9fd1;
    --c-primary-hover:   #8db0dd;
    --c-primary-active:  #5f88c0;
    --c-primary-light:   #a0c0e5;
    --c-primary-lighter: #c0d4ee;
    --c-primary-dark:    #4f72a8;
    --c-primary-deep:    #2a3f5f;

    --c-success:         #5fb89a;
    --c-success-bg:      rgba(95, 184, 154, 0.12);
    --c-success-border:  rgba(95, 184, 154, 0.30);

    --c-warning:         #d9a854;
    --c-warning-bg:      rgba(217, 168, 84, 0.12);
    --c-warning-border:  rgba(217, 168, 84, 0.30);

    --c-danger:          #c97a8a;
    --c-danger-bg:       rgba(201, 122, 138, 0.12);
    --c-danger-border:   rgba(201, 122, 138, 0.30);

    --c-info:            #7a9fd1;
    --c-info-bg:         rgba(122, 159, 209, 0.12);
    --c-info-border:     rgba(122, 159, 209, 0.30);

    --c-role-owner:      #a0c0e5;
    --c-role-admin:      #7a9fd1;
    --c-role-creator:    #5fb89a;
    --c-role-user:       #4a5776;

    --g-primary:  linear-gradient(135deg, #7a9fd1 0%, #4f72a8 100%);
    --g-text:     linear-gradient(135deg, #a0c0e5 0%, #7a9fd1 100%);
    --g-line:     linear-gradient(90deg, transparent, rgba(122, 159, 209, 0.25), transparent);
    --g-surface:  linear-gradient(135deg, rgba(122,159,209,0.05) 0%, rgba(122,159,209,0.02) 100%);

    --glow-cta:          0 0 0 3px rgba(122, 159, 209, 0.20);
    --glow-focus:        0 0 0 3px rgba(122, 159, 209, 0.30);
    --shadow-glow:       0 4px 20px rgba(122, 159, 209, 0.15);
    --shadow-glow-lg:    0 8px 32px rgba(122, 159, 209, 0.22);
    --shadow-glow-soft:  0 2px 12px rgba(122, 159, 209, 0.10);
}