/**
 * SunSnap Media — Design System + Dark Mode + Retro Styles
 * Merge of variables.css and theme.css (consolidated, deduplicated).
 */

/* ══════════════════════════════════════════════
   CSS Variables — Design Tokens (from variables.css)
   ══════════════════════════════════════════════ */
:root {
    /* Colors — Light Mode */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-accent: #ff6b35;
    --color-text: #000000;
    --color-text-secondary: #666666;

    /* Colors — Dark Mode (shared tokens) */
    --dark-bg-primary: #09090b;
    --dark-bg-secondary: #121217;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-hover: rgba(255, 107, 53, 0.2);
    --dark-text-primary: rgba(255, 255, 255, 0.8);
    --dark-text-secondary: rgba(255, 255, 255, 0.5);
    --dark-text-tertiary: rgba(255, 255, 255, 0.3);
    --dark-accent: #ff6b35;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; /* Used by app/static/css/admin-base.css */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-body: 16px;
    --font-size-h6: 20px;
    --font-size-h5: 24px;
    --font-size-h4: 28px;
    --font-size-h3: 40px;
    --font-size-h2: 56px;
    --font-size-h1: 72px;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;
    --font-weight-black: 700;

    --line-height-tight: 1.1;
    --line-height-normal: 1.5;
    --letter-spacing-tight: -0.02em;

    /* Spacing — 8px base unit */
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-2xl: 64px;
    --spacing-3xl: 80px;
    --spacing-4xl: 96px; /* Used by app/static/css/kiosk.css */
    --spacing-5xl: 128px;

    /* Border Radius */
    --radius-md: 4px; /* Used by app/static/css/admin-dashboard.css */

    /* Mouse tracking for micro-interactions */
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* Responsive typography (from variables.css) */
@media (max-width: 1024px) {
    :root {
        --font-size-display-1: 72px;
        --font-size-display-2: 48px;
        --font-size-h1: 56px;
        --font-size-h2: 40px;
        --font-size-h3: 32px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-display-1: 48px;
        --font-size-display-2: 36px;
        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --spacing-lg: 24px;
        --spacing-xl: 32px;
        --spacing-2xl: 48px;
        --spacing-3xl: 64px;
        --spacing-5xl: 80px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-display-1: 36px;
        --font-size-display-2: 28px;
        --font-size-h1: 28px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --spacing-2xl: 32px;
        --spacing-3xl: 48px;
        --spacing-5xl: 64px;
    }
}

/* ══════════════════════════════════════════════
   DARK MODE — Linear design system (from theme.css)
   ══════════════════════════════════════════════ */

body.dark-mode {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

body.dark-mode nav {
    background: rgba(9, 9, 11, 0.8);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode nav .logo { color: var(--dark-accent); }

body.dark-mode nav a {
    color: var(--dark-text-primary);
    border-bottom: 1px solid transparent;
    transition: all 200ms linear;
}

body.dark-mode nav a:hover {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}

body.dark-mode .hero {
    background: var(--dark-bg-primary);
}

body.dark-mode .hero h1 { color: var(--dark-text-primary); }
body.dark-mode .hero p { color: var(--dark-text-secondary); }

body.dark-mode .hero-image {
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    box-shadow: inset 0 0 40px rgba(255, 107, 53, 0.05);
}

body.dark-mode .btn {
    border: 1px solid var(--dark-border);
    background: transparent;
    color: var(--dark-text-primary);
    transition: all 200ms linear;
    position: relative;
    overflow: hidden;
}

body.dark-mode .btn:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: var(--dark-accent);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
}

body.dark-mode .btn-primary {
    border-color: var(--dark-accent);
    color: var(--dark-accent);
}

body.dark-mode .btn-primary:hover {
    background: rgba(255, 107, 53, 0.15);
    box-shadow: 0 0 24px rgba(255, 107, 53, 0.25);
}

body.dark-mode .about { background: var(--dark-bg-primary); }
body.dark-mode .about-image {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%);
    border: 1px solid var(--dark-border);
    box-shadow: inset 0 0 30px rgba(255, 107, 53, 0.1);
    color: var(--dark-text-secondary);
}
body.dark-mode .about h2 { color: var(--dark-text-primary); }
body.dark-mode .about p { color: var(--dark-text-secondary); }
body.dark-mode .about-stats { border-color: var(--dark-border); }
body.dark-mode .stat-number {
    color: var(--dark-accent);
    text-shadow: 0 0 12px rgba(255, 107, 53, 0.3);
}
body.dark-mode .stat-label { color: var(--dark-text-tertiary); }

body.dark-mode .contact {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border-hover);
}
body.dark-mode .contact h2 { color: var(--dark-text-primary); }
body.dark-mode .contact p { color: var(--dark-text-secondary); }

body.dark-mode .social-section {
    background: var(--dark-bg-primary);
    border-top: 1px solid var(--dark-border);
}
body.dark-mode .social-section h3 { color: var(--dark-text-primary); }
body.dark-mode .social-section p { color: var(--dark-text-secondary); }
body.dark-mode .social-link {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-secondary);
    transition: all 200ms linear;
}
body.dark-mode .social-link:hover {
    background: rgba(255, 107, 53, 0.15);
    border-color: var(--dark-accent);
    color: var(--dark-accent);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2);
}

body.dark-mode footer {
    background: var(--dark-bg-secondary);
    border-top: 1px solid var(--dark-border);
    color: var(--dark-text-secondary);
}

body.dark-mode .text-secondary { color: var(--dark-text-secondary); }

body.dark-mode a {
    color: var(--dark-accent);
    border-bottom-color: var(--dark-accent);
}
body.dark-mode a:hover {
    color: rgba(255, 107, 53, 0.8);
    border-bottom-color: rgba(255, 107, 53, 0.8);
}

/* ══════════════════════════════════════════════
   MAXIMALISM + RETRO STYLE (from theme.css)
   Light Mode: Colorful 80s/90s aesthetic
   Dark Mode: Neon purple aesthetic
   ══════════════════════════════════════════════ */
body.style-maxRetro:not(.dark-mode) {
    overflow-x: hidden !important;
    color: #2d0033 !important;
}

body.style-maxRetro:not(.dark-mode) nav {
    background: #fafafa !important;
    border-bottom: 5px dashed rgba(255, 20, 147, 0.5) !important;
}

body.style-maxRetro:not(.dark-mode) nav a,
body.style-maxRetro:not(.dark-mode) nav .logo {
    color: #2d0033 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3), 0 0 15px rgba(255, 20, 147, 0.2);
    font-weight: 900;
}

body.style-maxRetro:not(.dark-mode) .service-card,
body.style-maxRetro:not(.dark-mode) .portfolio-item,
body.style-maxRetro:not(.dark-mode) .photo-card,
body.style-maxRetro:not(.dark-mode) .kiosk-panel {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.15) 0%, rgba(255, 215, 0, 0.15) 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 0 25px rgba(255, 20, 147, 0.4), 0 0 50px rgba(255, 215, 0, 0.3);
}

body.style-maxRetro:not(.dark-mode) .service-card:hover {
    background: linear-gradient(135deg, #ff1493 0%, #ff6600 50%, #ffd700 100%) !important;
    color: #ffffff;
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 0 40px #ffd700, 0 0 25px #ff1493, 0 0 50px #ff6600 !important;
}

body.style-maxRetro:not(.dark-mode) .service-card p {
    color: #2d0033 !important;
}
body.style-maxRetro:not(.dark-mode) .service-card:hover h3,
body.style-maxRetro:not(.dark-mode) .service-card:hover p {
    color: #000000 !important;
}

/* Square corners for portfolio — matches editor look */
body.style-maxRetro:not(.dark-mode) .portfolio-item {
    border-radius: 0 !important;
}
body.style-maxRetro:not(.dark-mode) .portfolio-item-overlay h4 {
    color: #ffffff !important;
}
body.style-maxRetro:not(.dark-mode) .portfolio-item-overlay p {
    color: #f0e000 !important;
    text-shadow: 0 0 6px rgba(255, 20, 147, 0.3);
}
body.style-maxRetro.dark-mode .portfolio-item {
    border-radius: 0 !important;
}

body.style-maxRetro:not(.dark-mode) h1,
body.style-maxRetro:not(.dark-mode) h2,
body.style-maxRetro:not(.dark-mode) h3 {
    color: #ff1493;
    font-weight: 900;
    text-shadow: 0 0 15px #ffd700, 0 0 8px #ff6600;
    letter-spacing: 3px;
    transform: skewY(-2deg);
}

body.style-maxRetro:not(.dark-mode) p {
    color: #2d0033;
    text-shadow: 0 0 3px rgba(255, 20, 147, 0.15);
}

body.style-maxRetro:not(.dark-mode) .btn-primary {
    background: linear-gradient(135deg, #ffd700 0%, #ff6600 50%, #ff1493 100%);
    border: 4px solid #6600ff;
    color: #2d0033;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    box-shadow: 0 0 20px rgba(255, 20, 147, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
}

body.style-maxRetro:not(.dark-mode) .btn-primary:hover {
    box-shadow: 0 0 40px #ff1493, 0 0 30px #ffd700, 0 0 20px #ff6600;
    transform: scale(1.1);
}

body.style-maxRetro:not(.dark-mode) .stat-number {
    color: #ff1493 !important;
    text-shadow: 0 0 10px #ffd700 !important;
}

body.style-maxRetro:not(.dark-mode) section {
    border-top: 3px dashed rgba(255, 20, 147, 0.5) !important;
    border-bottom: 3px dashed rgba(255, 102, 0, 0.5) !important;
}

body.style-maxRetro:not(.dark-mode) #about {
    border-top: none !important;
}

body.style-maxRetro.dark-mode {
    --color-primary: #ff1493;
    --color-accent-1: #ffff00;
    --color-accent-2: #ff6600;
    --color-accent-3: #00ffff;
    --bg-primary: #1a1a2e;
    --bg-secondary: #2a2a3e;
    --text-primary: #ffff00;
}

body.style-maxRetro.dark-mode {
    overflow-x: hidden !important;
    color: #ffff00 !important;
}

body.style-maxRetro.dark-mode nav {
    background: #000000 !important;
    border-bottom: 5px dashed rgba(255, 255, 0, 0.5) !important;
}

body.style-maxRetro.dark-mode nav a,
body.style-maxRetro.dark-mode nav .logo {
    color: #ffff00 !important;
    text-shadow: 0 0 10px #ff1493, 0 0 20px #00ffff;
}

body.style-maxRetro.dark-mode .service-card,
body.style-maxRetro.dark-mode .portfolio-item,
body.style-maxRetro.dark-mode .photo-card,
body.style-maxRetro.dark-mode .kiosk-panel {
    background: linear-gradient(135deg, rgba(255, 20, 147, 0.2) 0%, rgba(255, 255, 0, 0.1) 100%) !important;
    border-radius: 15px !important;
    box-shadow: 0 0 30px #ff1493, 0 0 60px #ff6600;
}

body.style-maxRetro.dark-mode .service-card:hover {
    background: linear-gradient(135deg, #ff1493 0%, #ff6600 50%, #ffff00 100%) !important;
    color: #000000;
    transform: scale(1.08) rotate(3deg);
    box-shadow: 0 0 50px #ffff00, 0 0 30px #ff1493, 0 0 60px #ff6600 !important;
}

body.style-maxRetro.dark-mode .service-card:hover h3,
body.style-maxRetro.dark-mode .service-card:hover p {
    color: #000000 !important;
    text-shadow: 0 0 10px #ffff00;
}

body.style-maxRetro.dark-mode h1,
body.style-maxRetro.dark-mode h2,
body.style-maxRetro.dark-mode h3 {
    color: #ff1493;
    font-weight: 900;
    letter-spacing: 3px;
    transform: skewY(-2deg);
}

body.style-maxRetro.dark-mode p {
    color: #ffff00;
    text-shadow: 0 0 10px #ff1493;
}

body.style-maxRetro.dark-mode .btn-primary {
    background: linear-gradient(135deg, #ffff00 0%, #ff6600 50%, #ff1493 100%);
    border: 4px solid #00ffff;
    color: #000000;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    box-shadow: 0 0 30px #ffff00, 0 0 20px #ff1493;
}

body.style-maxRetro.dark-mode .btn-primary:hover {
    box-shadow: 0 0 60px #ffff00, 0 0 40px #ff1493, 0 0 30px #ff6600;
    transform: scale(1.1);
}

body.style-maxRetro.dark-mode .stat-number {
    color: #ffff00 !important;
    text-shadow: 0 0 15px #ff1493 !important;
}

body.style-maxRetro.dark-mode section {
    border-top: 3px dashed rgba(255, 255, 0, 0.5) !important;
    border-bottom: 3px dashed rgba(255, 20, 147, 0.5) !important;
}

body.style-maxRetro.dark-mode #about {
    border-top: none !important;
}