/**
 * ObscuraCams Dating Platform - CSS Variables
 *
 * Centralized design system for consistent colors, spacing, and sizing
 * across the entire dating platform.
 *
 * Usage: Include this file first in your HTML:
 * <link rel="stylesheet" href="{% static 'dating/css/variables.css' %}">
 */

:root {
    /* ============================================
       PRIMARY BRAND COLORS
       ============================================ */

    /* Primary Orange - Main brand color for CTAs and accents */
    --color-primary: #ff9100;
    --color-primary-light: #ffb347;
    --color-primary-dark: #ff6f00;
    --color-primary-hover: #ff7a00;

    /* Secondary Pink - Dating accent color (use sparingly) */
    --color-dating-accent: #e91e63;
    --color-dating-accent-light: #f06292;
    --color-dating-accent-dark: #c2185b;

    /* Faint red tint for dating area */
    --color-dating-red-tint: rgba(255, 82, 82, 0.08);
    --color-dating-red-subtle: rgba(220, 38, 38, 0.12);
    --color-dating-red-border: rgba(239, 68, 68, 0.15);

    /* ============================================
       ACTION & STATUS COLORS
       ============================================ */

    /* Success */
    --color-success: #4CAF50;
    --color-success-light: #66BB6A;
    --color-success-dark: #388E3C;

    /* Error */
    --color-error: #f44336;
    --color-error-light: #e57373;
    --color-error-dark: #d32f2f;

    /* Warning */
    --color-warning: #FFC107;
    --color-warning-light: #FFD54F;
    --color-warning-dark: #FFA000;

    /* Info */
    --color-info: #2196f3;
    --color-info-light: #64B5F6;
    --color-info-dark: #1976d2;

    /* ============================================
       FEATURE-SPECIFIC COLORS
       ============================================ */

    /* Photo Privacy */
    --color-privacy: #9C27B0;
    --color-privacy-light: #BA68C8;
    --color-privacy-dark: #7B1FA2;

    /* Online Status */
    --color-online: #4CAF50;
    --color-away: #FFC107;
    --color-offline: #666666;
    --color-busy: #f44336;

    /* Growth Advisor Personalities */
    --color-curious-explorer: #2196f3;
    --color-goal-driven: #ff9100;
    --color-social-connector: #e91e63;
    --color-creative-soul: #9C27B0;
    --color-analytical-mind: #00bcd4;
    --color-adventure-seeker: #FF5722;
    --color-nurturing-helper: #8bc34a;

    /* ============================================
       TEXT HIERARCHY
       ============================================ */

    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-text-tertiary: #888888;
    --color-text-disabled: #666666;
    --color-text-muted: #999999;

    /* ============================================
       BACKGROUNDS
       ============================================ */

    --color-bg-primary: #0a0a0a;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #2a2a2a;

    --color-bg-card: rgba(17, 17, 17, 0.95);
    --color-bg-card-hover: rgba(25, 25, 25, 0.98);

    --color-bg-overlay: rgba(0, 0, 0, 0.85);
    --color-bg-modal: rgba(0, 0, 0, 0.95);

    /* ============================================
       BORDERS
       ============================================ */

    --color-border: rgba(255, 145, 0, 0.2);
    --color-border-hover: rgba(255, 145, 0, 0.4);
    --color-border-focus: rgba(255, 145, 0, 0.6);

    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-subtle-hover: rgba(255, 255, 255, 0.2);

    /* ============================================
       SPACING SCALE (8px base)
       ============================================ */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;

    /* ============================================
       BUTTON SIZING
       ============================================ */

    --btn-padding-sm: 8px 16px;
    --btn-padding-md: 12px 24px;
    --btn-padding-lg: 16px 32px;

    --btn-font-sm: 12px;
    --btn-font-md: 14px;
    --btn-font-lg: 16px;

    --btn-height-sm: 32px;
    --btn-height-md: 44px;  /* Minimum touch target */
    --btn-height-lg: 56px;

    /* ============================================
       BORDER RADIUS
       ============================================ */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50px;
    --radius-pill: 999px;

    /* ============================================
       SHADOWS
       ============================================ */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.4);

    --shadow-primary: 0 4px 12px rgba(255, 145, 0, 0.3);
    --shadow-primary-hover: 0 6px 16px rgba(255, 145, 0, 0.4);

    --shadow-dating: 0 4px 12px rgba(233, 30, 99, 0.3);

    /* ============================================
       TRANSITIONS
       ============================================ */

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ============================================
       Z-INDEX LAYERS
       ============================================ */

    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ============================================
       BREAKPOINTS (for reference in JS)
       ============================================ */

    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1280px;
    --breakpoint-xl: 1536px;

    /* ============================================
       GRADIENTS
       ============================================ */

    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-dating: linear-gradient(45deg, var(--color-dating-accent), var(--color-dating-accent-light));
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
    --gradient-dark: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.9) 100%);

    /* ============================================
       OPACITY LEVELS
       ============================================ */

    --opacity-disabled: 0.4;
    --opacity-muted: 0.6;
    --opacity-subtle: 0.8;
}

/* ============================================
   DARK MODE SUPPORT (Future-proofing)
   ============================================ */

@media (prefers-color-scheme: light) {
    /* Override for light mode if needed in the future */
    :root {
        /* Currently dating platform is dark-only */
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-base: 0s;
        --transition-slow: 0s;
        --transition-bounce: 0s;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Quick access to common colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }
.text-disabled { color: var(--color-text-disabled); }

.text-brand { color: var(--color-primary); }
.text-dating { color: var(--color-dating-accent); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

/* Background colors */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-card { background-color: var(--color-bg-card); }

/* Borders */
.border-primary { border-color: var(--color-border); }
.border-subtle { border-color: var(--color-border-subtle); }

/* ============================================
   DATING AREA RED TINT
   ============================================ */

/* Apply faint red tint to dating pages */
body.dating-page,
.dating-container {
    position: relative;
}

body.dating-page::before,
.dating-container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 20%, var(--color-dating-red-tint) 0%, transparent 60%),
                linear-gradient(180deg, var(--color-dating-red-subtle) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Cards with red tint */
.dating-card,
.profile-card {
    background: linear-gradient(135deg,
        rgba(17, 17, 17, 0.95) 0%,
        rgba(30, 17, 17, 0.95) 100%);
    border-color: var(--color-dating-red-border);
}

.dating-card:hover,
.profile-card:hover {
    background: linear-gradient(135deg,
        rgba(25, 17, 17, 0.98) 0%,
        rgba(35, 20, 20, 0.98) 100%);
    border-color: rgba(239, 68, 68, 0.25);
}