/**
 * Elite EB — Design Tokens
 *
 * Central place for all design variables (colors, spacing, typography).
 * Imported by public.css, admin.css, and components.
 *
 * Theme: Dark (Elite AFC style) with gold accents and red CTAs.
 *
 * @package EliteEB
 */

:root {
	/* ====================================================================
	 * Colors — Base
	 * ==================================================================== */
	--elite-bg-page:        #0a0a0a;
	--elite-bg-surface:     #0f0f0f;
	--elite-bg-elevated:    #141414;
	--elite-bg-input:       #0a0a0a;
	--elite-bg-hover:       #1a1a1a;

	/* ====================================================================
	 * Colors — Border
	 * ==================================================================== */
	--elite-border:         #1a1a1a;
	--elite-border-strong:  #262626;
	--elite-border-subtle:  rgba(197, 160, 40, 0.15);
	--elite-border-hover:   rgba(197, 160, 40, 0.35);

	/* ====================================================================
	 * Colors — Text
	 * ==================================================================== */
	--elite-text-primary:   #e0e0e0;
	--elite-text-secondary: #aaaaaa;
	--elite-text-muted:     #888888;
	--elite-text-dim:       #666666;
	--elite-text-inverse:   #0a0a0a;

	/* ====================================================================
	 * Colors — Brand (Gold)
	 * ==================================================================== */
	--elite-gold:           #C5A028;
	--elite-gold-light:     #FFD700;
	--elite-gold-dark:      #A8861E;
	--elite-gold-bg:        rgba(197, 160, 40, 0.08);
	--elite-gold-bg-strong: rgba(197, 160, 40, 0.15);

	/* ====================================================================
	 * Colors — CTA (Red)
	 * ==================================================================== */
	--elite-red:            #E74C3C;
	--elite-red-dark:       #C0392B;
	--elite-red-light:      #FF6B5B;
	--elite-red-bg:         rgba(231, 76, 60, 0.08);
	--elite-red-bg-strong:  rgba(231, 76, 60, 0.15);
	--elite-red-shadow:     rgba(231, 76, 60, 0.3);

	/* ====================================================================
	 * Colors — Status
	 * ==================================================================== */
	--elite-success:        #27AE60;
	--elite-success-bg:     rgba(39, 174, 96, 0.08);
	--elite-warning:        #F39C12;
	--elite-warning-bg:     rgba(243, 156, 18, 0.08);
	--elite-error:          #E74C3C;
	--elite-error-bg:       rgba(231, 76, 60, 0.08);
	--elite-info:           #3498DB;
	--elite-info-bg:        rgba(52, 152, 219, 0.08);

	/* ====================================================================
	 * Spacing scale (multiples of 4px)
	 * ==================================================================== */
	--elite-space-1:        4px;
	--elite-space-2:        8px;
	--elite-space-3:        12px;
	--elite-space-4:        16px;
	--elite-space-5:        20px;
	--elite-space-6:        24px;
	--elite-space-8:        32px;
	--elite-space-10:       40px;
	--elite-space-12:       48px;
	--elite-space-16:       64px;

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

	--elite-fs-xs:          0.75rem;   /* 12px */
	--elite-fs-sm:          0.85rem;   /* 13.6px */
	--elite-fs-base:        0.95rem;   /* 15.2px */
	--elite-fs-md:          1rem;      /* 16px */
	--elite-fs-lg:          1.15rem;   /* 18.4px */
	--elite-fs-xl:          1.35rem;   /* 21.6px */
	--elite-fs-2xl:         1.6rem;    /* 25.6px */
	--elite-fs-3xl:         2rem;      /* 32px */
	--elite-fs-4xl:         2.5rem;    /* 40px */

	--elite-fw-normal:      400;
	--elite-fw-medium:      500;
	--elite-fw-semibold:    600;
	--elite-fw-bold:        700;
	--elite-fw-extrabold:   800;
	--elite-fw-black:       900;

	--elite-lh-tight:       1.3;
	--elite-lh-normal:      1.6;
	--elite-lh-relaxed:     1.8;

	/* ====================================================================
	 * Border radius
	 * ==================================================================== */
	--elite-radius-sm:      8px;
	--elite-radius:         12px;
	--elite-radius-md:      16px;
	--elite-radius-lg:      20px;
	--elite-radius-pill:    50px;

	/* ====================================================================
	 * Shadows
	 * ==================================================================== */
	--elite-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.2);
	--elite-shadow-md:      0 4px 24px rgba(0, 0, 0, 0.3);
	--elite-shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.4);
	--elite-shadow-xl:      0 24px 48px rgba(0, 0, 0, 0.4);
	--elite-shadow-red:     0 4px 24px var(--elite-red-shadow);
	--elite-shadow-red-lg:  0 8px 32px rgba(231, 76, 60, 0.5);

	/* ====================================================================
	 * Transitions
	 * ==================================================================== */
	--elite-ease:           cubic-bezier(0.4, 0, 0.2, 1);
	--elite-duration-fast:  150ms;
	--elite-duration:       300ms;
	--elite-duration-slow:  400ms;

	/* ====================================================================
	 * Z-index scale
	 * ==================================================================== */
	--elite-z-base:         1;
	--elite-z-dropdown:     100;
	--elite-z-sticky:       500;
	--elite-z-modal:        900;
	--elite-z-toast:        1000;

	/* ====================================================================
	 * Layout
	 * ==================================================================== */
	--elite-container-sm:   600px;
	--elite-container-md:   820px;
	--elite-container-lg:   1000px;
	--elite-container-xl:   1200px;

	/* ====================================================================
	 * Focus ring
	 * ==================================================================== */
	--elite-focus-ring:     0 0 0 3px rgba(197, 160, 40, 0.25);
	--elite-focus-ring-red: 0 0 0 3px rgba(231, 76, 60, 0.25);
}

/* ====================================================================
 * Dark mode override (optional — if user has light theme)
 * ==================================================================== */
@media (prefers-color-scheme: light) {
	:root {
		/* Keep dark theme — plugin is designed dark-first */
		/* No changes; we intentionally force dark aesthetics */
	}
}

/* ====================================================================
 * Reduced motion
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
	:root {
		--elite-duration-fast:  0ms;
		--elite-duration:       0ms;
		--elite-duration-slow:  0ms;
	}
}