/* =============================================
   Design Tokens — CSS Custom Properties
   Brand: ContentFlows — OnlyFans / Fansly / Fanvue aesthetic
   Dark navy + hot-pink accent, full light/dark mode support.

   LOAD ORDER: This file loads first. All other CSS reads from these tokens.
   DO NOT add component-level rules here — tokens only.
   ============================================= */

/* ─────────────────────────────────────────────
   LIGHT MODE DEFAULTS  (html without data-theme
   or html[data-theme="light"])
   ───────────────────────────────────────────── */
:root {
    /* ── Brand colors ── */
    --color-primary:        #e91e8c;
    --color-primary-hover:  #c91779;
    --color-primary-light:  #f472b6;
    --color-primary-muted:  rgba(233, 30, 140, 0.12);
    --color-primary-glow:   rgba(233, 30, 140, 0.30);
    --color-accent:         #e91e8c;
    --color-accent-hover:   #c91779;
    --color-accent-muted:   rgba(233, 30, 140, 0.12);

    /* ── Secondary purple accent ── */
    --color-secondary:      #7c3aed;
    --color-secondary-hover:#6d28d9;
    --color-secondary-muted:rgba(124, 58, 237, 0.12);

    /* ── Semantic ── */
    --color-success:        #10b981;
    --color-success-hover:  #059669;
    --color-success-bg:     rgba(16, 185, 129, 0.12);
    --color-danger:         #ef4444;
    --color-danger-hover:   #dc2626;
    --color-danger-bg:      rgba(239, 68, 68, 0.12);
    --color-warning:        #f59e0b;
    --color-warning-hover:  #d97706;
    --color-warning-bg:     rgba(245, 158, 11, 0.12);
    --color-info:           #3b82f6;
    --color-info-hover:     #2563eb;
    --color-info-bg:        rgba(59, 130, 246, 0.12);

    /* ── Text ── */
    --color-text:           #f0f0fa;
    --color-text-primary:   #f0f0fa;
    --color-text-secondary: #aaaac8;
    --color-text-muted:     #6e6e90;
    --color-text-inverse:   #0c0c1e;

    /* ── Backgrounds ── */
    --color-bg:             #0c0c1e;
    --color-bg-primary:     #0c0c1e;
    --color-bg-secondary:   #111128;
    --color-bg-tertiary:    #16163a;
    --color-bg-elevated:    #1a1a30;
    --color-bg-card:        #141430;
    --color-bg-hover:       #1e1e3a;
    --color-bg-input:       #1a1a30;

    /* ── Borders ── */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-subtle:  rgba(255, 255, 255, 0.04);
    --color-border-focus:   #e91e8c;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(26, 26, 46, 0.06);
    --shadow-sm:  0 1px 4px rgba(26, 26, 46, 0.08);
    --shadow-md:  0 4px 12px rgba(26, 26, 46, 0.10);
    --shadow-lg:  0 10px 24px rgba(26, 26, 46, 0.12);
    --shadow-xl:  0 20px 40px rgba(26, 26, 46, 0.16);
    --shadow-glow:0 0 20px rgba(233, 30, 140, 0.25);

    /* ── Spacing ── */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;

    /* Numeric scale */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.75;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Border radii ── */
    --radius-xs:   3px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;

    /* Legacy aliases */
    --border-radius:    8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ── Layout ── */
    --sidebar-width:           260px;
    --sidebar-collapsed-width: 64px;
    --topbar-height:           56px;
    --content-max-width:       1400px;

    /* ── Z-Index scale ── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ── Gradients ── */
    --gradient-brand:    linear-gradient(135deg, #e91e8c 0%, #7c3aed 100%);
    --gradient-brand-h:  linear-gradient(135deg, #c91779 0%, #6d28d9 100%);
    --gradient-pink:     linear-gradient(135deg, #e91e8c 0%, #f472b6 100%);
    --gradient-overlay:  linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
}

/* ─────────────────────────────────────────────
   DARK MODE  (html[data-theme="dark"])
   — redundant with :root but kept for explicit override
   ───────────────────────────────────────────── */
[data-theme="dark"] {
    /* ── Brand (same pink, still pops on dark) ── */
    --color-primary:        #e91e8c;
    --color-primary-hover:  #f03ca0;
    --color-primary-light:  #f472b6;
    --color-primary-muted:  rgba(233, 30, 140, 0.18);
    --color-primary-glow:   rgba(233, 30, 140, 0.35);
    --color-accent:         #e91e8c;
    --color-accent-hover:   #f03ca0;
    --color-accent-muted:   rgba(233, 30, 140, 0.18);

    /* ── Secondary ── */
    --color-secondary:      #a78bfa;
    --color-secondary-hover:#8b5cf6;
    --color-secondary-muted:rgba(167, 139, 250, 0.18);

    /* ── Semantic (adjusted for dark) ── */
    --color-success:        #34d399;
    --color-success-hover:  #10b981;
    --color-success-bg:     rgba(52, 211, 153, 0.12);
    --color-danger:         #f87171;
    --color-danger-hover:   #ef4444;
    --color-danger-bg:      rgba(248, 113, 113, 0.12);
    --color-warning:        #fbbf24;
    --color-warning-hover:  #f59e0b;
    --color-warning-bg:     rgba(251, 191, 36, 0.12);
    --color-info:           #60a5fa;
    --color-info-hover:     #3b82f6;
    --color-info-bg:        rgba(96, 165, 250, 0.12);

    /* ── Text ── */
    --color-text:           #f0f0fa;
    --color-text-primary:   #f0f0fa;
    --color-text-secondary: #aaaac8;
    --color-text-muted:     #6e6e90;
    --color-text-inverse:   #0c0c1e;

    /* ── Backgrounds — dark navy ── */
    --color-bg:             #0c0c1e;
    --color-bg-primary:     #0c0c1e;
    --color-bg-secondary:   #111128;
    --color-bg-tertiary:    #16163a;
    --color-bg-elevated:    #1a1a30;
    --color-bg-card:        #141430;
    --color-bg-hover:       #1e1e3a;
    --color-bg-input:       #1a1a30;

    /* ── Borders ── */
    --color-border:         rgba(255, 255, 255, 0.08);
    --color-border-subtle:  rgba(255, 255, 255, 0.04);
    --color-border-focus:   #e91e8c;

    /* ── Shadows (deeper on dark) ── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.7);
    --shadow-glow:0 0 24px rgba(233, 30, 140, 0.35);
}