/*
 * Room of Planets - Theme System
 * A calm, magical observatory aesthetic
 *
 * To create a new theme: duplicate this file, modify the CSS variables,
 * and link to the new theme file in your HTML.
 */

:root {
    /* ═══════════════════════════════════════════════════════════════
       PRIMARY PALETTE - The Observatory Night Sky
       ═══════════════════════════════════════════════════════════════ */

    /* Background layers - deep space gradient */
    --bg-deepest: #0a1520;
    --bg-deep: #0d1a28;
    --bg-base: #0f1f2e;
    --bg-elevated: #132636;
    --bg-surface: #1a3044;
    --bg-hover: #1f3850;

    /* Accent - Teal Observatory Glow */
    --accent-primary: #2dd4bf;
    --accent-secondary: #14b8a6;
    --accent-tertiary: #0d9488;
    --accent-muted: rgba(45, 212, 191, 0.15);
    --accent-glow: rgba(45, 212, 191, 0.4);

    /* Celestial accents - for variety */
    --celestial-warm: #fbbf24;
    --celestial-cool: #60a5fa;
    --celestial-purple: #a78bfa;
    --celestial-rose: #f472b6;

    /* Text hierarchy */
    --text-primary: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --text-muted: #475569;
    --text-inverse: #0f1f2e;

    /* State colors - gentle, non-judgmental */
    --state-success: #34d399;
    --state-success-bg: rgba(52, 211, 153, 0.1);
    --state-warning: #fbbf24;
    --state-warning-bg: rgba(251, 191, 36, 0.1);
    --state-incomplete: #64748b;
    --state-incomplete-bg: rgba(100, 116, 139, 0.1);

    /* ═══════════════════════════════════════════════════════════════
       STARS & ATMOSPHERE
       ═══════════════════════════════════════════════════════════════ */

    --star-color: #e2e8f0;
    --star-glow: rgba(226, 232, 240, 0.8);
    --ambient-glow-1: rgba(45, 212, 191, 0.03);
    --ambient-glow-2: rgba(96, 165, 250, 0.02);

    /* ═══════════════════════════════════════════════════════════════
       CATEGORY COLORS - Subtle temperature shifts for groupings
       ═══════════════════════════════════════════════════════════════ */

    --category-default: var(--accent-primary);
    --category-health: #34d399;
    --category-work: #60a5fa;
    --category-growth: #a78bfa;
    --category-social: #f472b6;
    --category-creative: #fbbf24;

    /* ═══════════════════════════════════════════════════════════════
       SPACING & SIZING
       ═══════════════════════════════════════════════════════════════ */

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ═══════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════════════════════════════════════ */

    --font-display: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ═══════════════════════════════════════════════════════════════
       SHADOWS & EFFECTS
       ═══════════════════════════════════════════════════════════════ */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px var(--accent-glow);
    --shadow-glow-sm: 0 0 10px var(--accent-glow);

    /* ═══════════════════════════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════════════════════════ */

    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-slower: 600ms ease;

    /* Easing curves */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE RESET & GLOBAL STYLES
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: linear-gradient(
        180deg,
        var(--bg-deepest) 0%,
        var(--bg-deep) 30%,
        var(--bg-base) 100%
    );
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
   STARFIELD BACKGROUND
   ═══════════════════════════════════════════════════════════════════════ */

.starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.star {
    position: absolute;
    border-radius: 50%;
    background: var(--star-color);
    width: var(--star-size, 2px);
    height: var(--star-size, 2px);
    box-shadow: 0 0 var(--star-glow-size, 4px) var(--star-glow);
    animation: twinkle var(--twinkle-duration, 3s) var(--twinkle-delay, 0s) infinite ease-in-out;
}

/* Brighter stars get a subtle radial glow */
.star.bright::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--star-size, 2px) * 3);
    height: calc(var(--star-size, 2px) * 3);
    background: radial-gradient(circle, var(--star-glow) 0%, transparent 70%);
    border-radius: 50%;
}

@keyframes twinkle {
    0%, 100% {
        opacity: var(--star-opacity-min, 0.3);
    }
    50% {
        opacity: var(--star-opacity-max, 1);
    }
}

/* Ambient glow overlay */
.ambient-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, var(--ambient-glow-1), transparent),
        radial-gradient(ellipse 60% 40% at 80% 20%, var(--ambient-glow-2), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBAR STYLING
   ═══════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-surface);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECTION STYLING
   ═══════════════════════════════════════════════════════════════════════ */

::selection {
    background: var(--accent-muted);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   FOCUS STATES - Accessibility
   ═══════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}