/* ============================================
   Glitz HQ — Design Tokens
   Derived from Glitz & Glamour Studio reference
   ============================================ */

:root {
    /* ── Primary Palette ── */
    --pink: #FF2D78;
    --pink-light: #FF6BA8;
    --pink-dim: rgba(255, 45, 120, 0.15);
    --pink-hover: rgba(255, 45, 120, 0.08);
    --pink-border: rgba(255, 45, 120, 0.18);
    --pink-glow: rgba(255, 45, 120, 0.4);

    /* ── Secondary Palette ── */
    --purple: #7928CA;
    --purple-deep: #3B0764;
    --rose-gold: #B76E79;
    --gold: #FFB700;
    --green: #00D478;
    --red: #FF6B6B;
    --orange: #FF8C00;

    /* ── Chart Palette ── */
    --chart-1: #FF2D78;
    --chart-2: #7928CA;
    --chart-3: #00D478;
    --chart-4: #FFB700;
    --chart-5: #00B4D8;
    --chart-6: #F77F00;
    --chart-7: #B76E79;
    --chart-8: #8B5CF6;

    /* ── Surfaces ── */
    --black: #0A0A0A;
    --deep: #111111;
    --surface: #161616;
    --surface-2: #1a1a1a;
    --surface-3: #1e1e1e;
    --surface-hover: #222222;
    --surface-active: #2a2a2a;

    /* ── Elevation ── */
    --elevation-1: #141414;
    --elevation-2: #1c1c1c;
    --elevation-3: #242424;

    /* ── Glass ── */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-bg-hover: rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 45, 120, 0.18);
    --glass-border-hover: rgba(255, 45, 120, 0.4);

    /* ── Text ── */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #aaaaaa;
    --text-dim: #777777;
    --text-faint: #555555;
    --text-disabled: #444444;

    /* ── Borders ── */
    --border: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);

    /* ── Radius ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 50px;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --page-padding: 28px;

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

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(255, 45, 120, 0.3);
    --shadow-glow-sm: 0 0 15px rgba(255, 45, 120, 0.2);
    --shadow-focus: 0 0 0 3px rgba(255, 45, 120, 0.12);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 45, 120, 0.15);

    /* ── Transitions ── */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s ease;
    --transition-medium: all 0.25s ease;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Gradients ── */
    --gradient-primary: linear-gradient(135deg, #FF2D78 0%, #CC1E5A 100%);
    --gradient-text: linear-gradient(135deg, #FF2D78 0%, #FF6BA8 50%, #B76E79 100%);
    --gradient-avatar: linear-gradient(135deg, #FF2D78, #7928CA);
    --gradient-shimmer: linear-gradient(90deg, transparent, #FF2D78 40%, #FF6BA8 60%, transparent);
    --gradient-card-border: linear-gradient(135deg, rgba(255,45,120,0.5) 0%, rgba(121,40,202,0.35) 50%, transparent 100%);
    --gradient-surface: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(255,45,120,0.08) 0%, transparent 70%);

    /* ── Layout ── */
    --sidebar-width: 280px;
    --sidebar-collapsed: 56px;
    --topbar-height: 52px;
    --panel-width: 540px;

    /* ── Priority Colors ── */
    --priority-urgent: #FF4D4D;
    --priority-high: #FF8C00;
    --priority-normal: #FFB700;
    --priority-low: #00D478;
    --priority-none: #777777;

    /* ── Status Type Colors ── */
    --status-open: #777777;
    --status-active: #FFB700;
    --status-done: #00D478;
    --status-closed: #555555;
}

/* ── Mobile Variable Overrides ── */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
        --topbar-height: 48px;
        --panel-width: 100vw;
        --page-padding: 16px;
    }
}