/**
 * Design Tokens - TheTrolli Website v2.0.0
 *
 * Centralized design system with CSS variables for colors, spacing, typography, and effects.
 * See STYLING-GUIDE.md for complete documentation.
 *
 * CARD SYSTEM: --main-card-radius (30px), --sub-card-radius (16px), --sub-sub-card-radius (2px)
 * SPACING: --card-padding-standard (14px) for all card gaps and padding
 *
 * Import order: 1) design-tokens.css, 2) main-pages.css or info-pages.css
 */

/* Import OpenDyslexic Font for Accessibility */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Apply OpenDyslexic globally */
html,
body {
    font-family: 'OpenDyslexic', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

:root {
    /* ========================================================================
       VERSION & METADATA
       ======================================================================== */
    --design-system-version: "2.0.0";
    --last-updated: "2025-11-11";

    /* ========================================================================
       TYPOGRAPHY
       ======================================================================== */
    --font-primary: 'OpenDyslexic', sans-serif;
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;

    /* Font Sizes - Based on 16px root */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ========================================================================
       COLORS - Brand & Primary
       ======================================================================== */
    --primary-color: #5865f2;
    --secondary-color: #7289da;

    /* Primary Color Variations (Alpha Transparency) */
    --primary-alpha-10: rgba(88, 101, 242, 0.1);
    --primary-alpha-15: rgba(88, 101, 242, 0.15);
    --primary-alpha-20: rgba(88, 101, 242, 0.2);
    --primary-alpha-30: rgba(88, 101, 242, 0.3);
    --primary-alpha-40: rgba(88, 101, 242, 0.4);
    --primary-alpha-50: rgba(88, 101, 242, 0.5);
    --primary-alpha-60: rgba(88, 101, 242, 0.6);

    /* Secondary Color Variations */
    --secondary-alpha-10: rgba(114, 137, 218, 0.1);

    /* ========================================================================
       COLORS - Background
       ======================================================================== */
    --background-dark: #0a0a0f;
    --background-light: #1a1a2e;
    --background-accent: #16213e;
    --card-background: rgba(26, 26, 46, 0.7);

    /* ========================================================================
       COLORS - Text
       ======================================================================== */
    --text-primary: #ffffff;
    --text-secondary: #b9bbbe;
    --text-tertiary: #72767d;
    --text-disabled: #4f545c;

    /* ========================================================================
       COLORS - Semantic/Status
       ======================================================================== */
    /* Success States */
    --success-color: #43b581;
    --success-alpha-08: rgba(67, 181, 129, 0.08);
    --success-alpha-20: rgba(67, 181, 129, 0.2);

    /* Warning States */
    --warning-color: #faa61a;
    --warning-alpha-20: rgba(250, 166, 26, 0.2);

    /* Danger/Error States */
    --danger-color: #f04747;
    --danger-alpha-10: rgba(240, 71, 71, 0.1);
    --danger-alpha-20: rgba(240, 71, 71, 0.2);
    --danger-alpha-30: rgba(240, 71, 71, 0.3);

    /* Discord Status Colors */
    --status-online: #43b581;
    --status-idle: #faa61a;
    --status-dnd: #f04747;
    --status-offline: #747f8d;

    /* Legacy aliases for backward compatibility */
    --idle-color: var(--status-idle);
    --dnd-color: var(--status-dnd);
    --offline-color: var(--status-offline);

    /* ========================================================================
       COLORS - Special/Brand Integrations
       ======================================================================== */
    --spotify-green: #1DB954;
    --spotify-alpha-10: rgba(30, 215, 96, 0.1);
    --spotify-alpha-30: rgba(30, 215, 96, 0.3);
    --spotify-alpha-60: rgba(30, 215, 96, 0.6);

    /* ========================================================================
       GLASS MORPHISM
       ======================================================================== */
    --glass-background: rgba(255, 255, 255, 0.05);
    --glass-background-strong: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-border-strong: rgba(255, 255, 255, 0.18);
    --glass-blur: 12px;
    --glass-saturation: 180%;

    /* ========================================================================
       SPACING - 8px Base Unit System
       ======================================================================== */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px - Base unit */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    --spacing-32: 8rem;     /* 128px */

    /* ========================================================================
       SHADOWS
       ======================================================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Legacy shadow for backward compatibility */
    --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

    /* Inner Shadows */
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-inner-strong: inset 0 0 10px rgba(0, 0, 0, 0.3);

    /* Glow Effects */
    --glow-primary: 0 0 20px var(--primary-alpha-50);
    --glow-success: 0 0 20px var(--success-alpha-20);
    --glow-danger: 0 0 20px var(--danger-alpha-20);
    --glow-spotify: 0 0 20px var(--spotify-alpha-30);

    /* ========================================================================
       BORDER RADIUS
       ======================================================================== */
    --radius-none: 0;
    --radius-sm: 0.125rem;  /* 2px */
    --radius-base: 0.25rem; /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-2xl: 1rem;     /* 16px */
    --radius-3xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;  /* Pill shape */

    /* ========================================================================
       TRANSITIONS & ANIMATIONS
       ======================================================================== */
    /* Duration */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    /* Easing Functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Combined Transition Properties */
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-normal: all var(--duration-normal) var(--ease-in-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
    --transition-bounce: all var(--duration-normal) var(--ease-bounce);

    /* ========================================================================
       Z-INDEX LAYERS
       ======================================================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-scrollbar: 9999;

    /* ========================================================================
       BREAKPOINTS (for reference in JavaScript)
       ======================================================================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ========================================================================
       EFFECTS - Backdrop Filter
       ======================================================================== */
    --backdrop-blur-sm: blur(4px);
    --backdrop-blur-base: blur(8px);
    --backdrop-blur-md: blur(12px);
    --backdrop-blur-lg: blur(16px);
    --backdrop-blur-xl: blur(24px);

    /* Component Specific Tokens */
    --card-padding-standard: 14px;
    --main-card-radius: 30px;
    --sub-card-radius: 16px;
    --sub-sub-card-radius: 2px;
    --responsive-main-card-radius: 24px;

    /* ========================================================================
       INFO PAGES SPECIFIC TOKENS
       ======================================================================== */
    /* Layout Dimensions */
    --header-height: 76px;
    --container-max-width: 1200px;
    --dropdown-content-max-width: 1400px;
    --mobile-menu-width: 300px;

    /* Component Sizes */
    --back-to-top-size: 60px;
    --back-to-top-offset: 30px;

    /* Extended Spacing (for larger gaps) */
    --spacing-15: 3.75rem;   /* 60px */
    --spacing-30: 7.5rem;    /* 120px */

    /* Hover Lift Distances */
    --hover-lift-small: -2px;
    --hover-lift-medium: -5px;

    /* Scroll Animations */
    --scroll-animation-distance: 100px;

    /* Button Padding Variations */
    --button-padding-compact: 10px 12px;  /* Mobile buttons */
    --button-padding-default: 10px 16px;  /* Default buttons */

    /* ========================================================================
       UNIFIED GRID SYSTEM
       ======================================================================== */
    /* Minimum width for grid items before wrapping to new row */
    --grid-item-min-width: 200px;
    --grid-item-min-width-sm: 150px;  /* For smaller cards */
    --grid-item-min-width-lg: 300px;  /* For larger cards */

    /* Grid gap (uses standard padding) */
    --grid-gap: var(--card-padding-standard);

    /* Max columns (prevents too many columns on ultra-wide screens) */
    --grid-max-columns: 4;

    /* Hover Animation System (v2.1.0 Standards) */
    --hover-lift-distance: -10px;
    /* NO SCALE on hover per v2.1.0 - only lift */
    --hover-transform: translateY(var(--hover-lift-distance));
    /* Dual shadow: elevation + colored glow */
    --hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 40px rgba(88, 101, 242, 0.5);
    --hover-shadow-base: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 20px rgba(88, 101, 242, 0.2);
    --hover-transition: all 0.3s ease;
    --hover-streak-gradient: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    /* Icon animations (exception - icons can rotate/scale independently) */
    --hover-icon-rotation: 360deg;
    --hover-icon-scale: 1.2;

    /* Cards */
    --card-padding: var(--spacing-6);
    --card-radius: var(--radius-xl);
    --card-shadow: var(--shadow-lg);

    /* Buttons */
    --button-padding-y: var(--spacing-3);
    --button-padding-x: var(--spacing-6);
    --button-radius: 8px;  /* Fixed radius for buttons */
    --button-transition: var(--transition-normal);

    /* Inputs & Form Elements */
    --input-padding-y: var(--spacing-3);
    --input-padding-x: var(--spacing-4);
    --input-radius: 8px;  /* Fixed radius for inputs, buttons, and small UI elements */
    --input-border: 1px solid var(--glass-border);
    --input-focus-border: 1px solid var(--primary-color);

    /* Scrollbar */
    --scrollbar-width: 12px;
    --scrollbar-track-radius: var(--radius-xl);
    --scrollbar-thumb-radius: var(--radius-xl);
    --scrollbar-thumb-background: var(--primary-alpha-15);
    --scrollbar-thumb-border: 1.5px solid var(--glass-border-strong);
}

/* ========================================================================
   DARK MODE OVERRIDES
   ======================================================================== */
/* Currently using dark mode as default. Add light mode overrides here if needed. */
@media (prefers-color-scheme: light) {
    :root {
        /* Light mode tokens would go here */
        /* Example: --background-dark: #ffffff; */
    }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
        --transition-fast: none;
        --transition-normal: none;
        --transition-slow: none;
        --transition-bounce: none;
    }
}

/* ========================================================================
   HIGH CONTRAST MODE
   ======================================================================== */
@media (prefers-contrast: high) {
    :root {
        --glass-background: rgba(255, 255, 255, 0.2);
        --glass-border: rgba(255, 255, 255, 0.3);
        --text-secondary: #ffffff;
    }
}

/* ========================================================================
   RAINBOW MODE - Animated Rainbow Borders (Global Feature)
   ========================================================================

   When enabled, applies red borders to all cards and smoothly hue-shifts
   them through the rainbow spectrum (red → orange → yellow → green →
   blue → purple → red) in a continuous loop.

   Performance: Single hue-rotate animation applied to all cards simultaneously
   for optimal efficiency. All cards rotate in perfect synchronization.
   ======================================================================== */

/* Rainbow Mode Animation - Hue rotation from 0° to 360° */
@keyframes rainbow-hue-shift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Apply red borders and hue-shift animation to all card elements when rainbow mode is active */
body.rainbow-mode .profile-card,
body.rainbow-mode .main-card,
body.rainbow-mode .bookmark-section,
body.rainbow-mode .bookmark-grid,
body.rainbow-mode .social-title-base,
body.rainbow-mode .social-grid-base,
body.rainbow-mode .social-section,
body.rainbow-mode .mood-calendar-container,
body.rainbow-mode .mood-user-header,
body.rainbow-mode .weather-widget,
body.rainbow-mode .info-hero,
body.rainbow-mode .info-content-card,
body.rainbow-mode .info-page-card,
body.rainbow-mode .subcard,
body.rainbow-mode .username-subcard,
body.rainbow-mode .activity-card,
body.rainbow-mode .spotify-card,
body.rainbow-mode .spotify-album,
body.rainbow-mode .page-selector-dropdown,
body.rainbow-mode .calendar-legend,
body.rainbow-mode .calendar-day,
body.rainbow-mode .legend-color,
body.rainbow-mode .stat-card,
body.rainbow-mode .stat-item,
body.rainbow-mode .bookmark-link,
body.rainbow-mode .social-link,
body.rainbow-mode .weather-location-selector,
body.rainbow-mode .weather-details,
body.rainbow-mode .weather-sun-times,
body.rainbow-mode .weather-sky,
body.rainbow-mode .info-card,
body.rainbow-mode .info-stat-item,
body.rainbow-mode details,
body.rainbow-mode .info-warning-box,
body.rainbow-mode .info-highlight-box,
body.rainbow-mode .tab-button,
body.rainbow-mode .mood-form-link,
body.rainbow-mode .auth-card,
body.rainbow-mode .calculator-card,
body.rainbow-mode .input-section,
body.rainbow-mode .results-section,
body.rainbow-mode .total-price {
    border: 3px solid #ff0000 !important; /* Red border that will hue-shift */
    animation: rainbow-hue-shift 6s linear infinite; /* 6 second full rainbow cycle */
}

/* Rainbow Toggle Button - Circular Icon Button (RIGHT side, matches Touch Grass button) */
.rainbow-toggle-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--glass-background);
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 1.8rem;
    cursor: pointer;
    backdrop-filter: blur(10px);
    z-index: 1000;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rainbow-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
}

.rainbow-toggle-btn.active {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #9400d3);
    border-color: #ffffff;
    animation: rainbow-button-shift 3s linear infinite;
}

/* Rainbow button itself gets rainbow background when active */
@keyframes rainbow-button-shift {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Hide on mobile devices */
@media (max-width: 768px) {
    .rainbow-toggle-btn {
        display: none;
    }
}