/* ==========================================================================
   Design Tokens — Single source of truth for all CSS variables
   ========================================================================== */

:root {
    /* ── Primary palette ─────────────────────────────────────────────────── */
    --primary-color: #ff8c00;
    --primary-light: #ffa640;
    --primary-dark: #cc7000;
    --accent-color: rgba(255, 140, 0, 0.1);

    /* ── Backgrounds ─────────────────────────────────────────────────────── */
    --bg-color: #141414;
    --bg-primary: #141414;
    --bg-secondary: #2b2b2b;
    --bg-dark: #111111;
    --background-color: #141414;
    --card-color: #2b2b2b;
    --card-hover: #333333;
    --bg-card: #2b2b2b;
    --bg-card-hover: #333333;

    /* ── Text ────────────────────────────────────────────────────────────── */
    --text-color: #ffffff;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;

    /* ── Semantic colours ────────────────────────────────────────────────── */
    --success-color: #98f976;
    --error-color: #ff4444;
    --warning-color: #ffc107;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --border-color: #404040;
    --border-radius: 12px;

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --spacing: 24px;
    --spacing-sm: 10px;
    --spacing-md: 20px;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --font-main: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-ui: 'Roboto', sans-serif;

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-speed: 0.3s;

    /* ── Header ──────────────────────────────────────────────────────────── */
    --header-height: 70px;
    --header-bg: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%);
    --header-text: #000;
    --header-hover: rgba(0, 0, 0, 0.1);

    /* ── Admin sidebar ───────────────────────────────────────────────────── */
    --sb-w: 350px;
    --sb-bg: rgba(28, 28, 28, .9);
    --sb-border: rgba(255, 255, 255, .08);
    --sb-grad: linear-gradient(180deg, rgba(255, 140, 0, .15), transparent 35%);
    --sb-blur: 14px;
    --sb-shadow: -16px 0 40px rgba(0, 0, 0, .45);
    --sb-hover: rgba(255, 255, 255, .06);
    --sb-active: rgba(255, 140, 0, .14);
}