/* ========================================
           DESIGN TOKEN SYSTEM
           ======================================== */
:root {
    /* Font Families (3 Families - Semantic) */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Space Grotesk', 'Helvetica Neue', 'Arial Black',
        Impact, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono',
        'Courier New', monospace;

    /* Mobile-First Size Scale (Fluid) */
    --text-micro: clamp(0.625rem, 0.5rem + 0.5vw, 0.75rem);
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --text-4xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
    --text-5xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem);
    --text-6xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
    --text-hero: clamp(4rem, 3rem + 5vw, 9rem);

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 600;
    --weight-bold: 900;

    /* Brand Identity Colors (Preserved) */
    --channel1-primary: #8B5CF6;
    --channel1-light: #D4B3FF;
    --channel1-bg: #EAD9FF;
    --channel2-primary: #10B981;
    --channel2-light: #A5F3C2;
    --channel2-bg: #D1FAE5;
    --dark-bg: #0F1115;
    --dark-card: #181A20;
    --dark-surface: #23262F;

    /* Special Effect Colors */
    --angel-gold: #FFD700;
    --angel-glow-outer: rgba(255, 215, 0, 0.6);
    --angel-glow-mid: rgba(255, 215, 0, 0.3);
    --angel-glow-inner: rgba(255, 255, 255, 0.4);
    --devil-red: #DC2626;
    --devil-glow: rgba(220, 38, 38, 0.6);

    /* Chart Colors */
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-tick: #9CA3AF;

    /* Semantic Text Colors */
    --text-on-dark-primary: #FFFFFF;
    --text-on-dark-secondary: #E5E7EB;
    --text-on-dark-tertiary: #9CA3AF;
    --text-on-dark-muted: #6B7280;
    --text-on-dark-subtle: #4B5563;
    --text-on-light-primary: #1F2937;
    --text-on-light-secondary: #374151;
    --text-on-light-muted: rgba(0, 0, 0, 0.65);
    --text-on-light-subtle: rgba(0, 0, 0, 0.5);

    /* Line Heights & Spacing */
    --leading-tight: 1.1;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --tap-target-min: 44px;
    --tap-target-ideal: 48px;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-on-dark-secondary);
}

/* ========================================
           TYPOGRAPHY COMPONENTS
           ======================================== */

/* Hero Numbers (Giant Display) */
.text-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.04em;
}

/* Display Numbers (Medium-Large) */
.text-display-lg {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
}

/* Headings */
.text-heading-1 {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.text-heading-2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.text-heading-3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

/* UI Text */
.text-ui-large {
    font-family: var(--font-ui);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
}

.text-ui-base {
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.text-ui-small {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.text-ui-small-bold {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
}

/* Labels & Metadata */
.text-label {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: var(--leading-snug);
}

.text-label-bold {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: var(--leading-snug);
}

/* Data & Metrics */
.text-metric {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

.text-data {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

.text-data-small {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
}

/* Interactive Elements */
.text-button {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.025em;
    min-height: var(--tap-target-min);
}

/* ========================================
           COLOR MODIFIERS
           ======================================== */
.on-dark-primary {
    color: var(--text-on-dark-primary);
}

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

.on-dark-tertiary {
    color: var(--text-on-dark-tertiary);
}

.on-dark-muted {
    color: var(--text-on-dark-muted);
}

.on-dark-subtle {
    color: var(--text-on-dark-subtle);
}

.on-light-primary {
    color: var(--text-on-light-primary);
}

.on-light-secondary {
    color: var(--text-on-light-secondary);
}

.on-light-muted {
    color: var(--text-on-light-muted);
}

.on-light-subtle {
    color: var(--text-on-light-subtle);
}

.text-channel1 {
    color: var(--channel1-primary);
}

.text-channel2 {
    color: var(--channel2-primary);
}

/* ========================================
           LEGACY SUPPORT & ANIMATIONS
           ======================================== */

/* Smooth aesthetic transitions */
.smooth-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.smooth-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 3px;
}

/* ========================================
           ANGEL & DEVIL VISUAL GIMMICKS
           ======================================== */

/* Profile Image Wrapper */
.profile-image-wrapper {
    position: relative;
    display: inline-block;
}

/* Angel Halo */
.angel-halo {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 12px;
    border: 3px solid var(--angel-gold);
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.15);
    box-shadow:
        0 0 12px var(--angel-glow-outer),
        0 0 24px var(--angel-glow-mid),
        0 0 36px rgba(255, 215, 0, 0.3),
        inset 0 0 10px var(--angel-glow-inner);
    animation: haloFloat 3s ease-in-out infinite;
    z-index: 10;
}

@media (min-width: 768px) {
    .angel-halo {
        top: -12px;
        width: 62px;
        height: 16px;
        border-width: 4px;
    }
}

/* Devil Horns */
.devil-horns {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 24px;
    z-index: 10;
}

.devil-horns::before,
.devil-horns::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 18px solid var(--devil-red);
    filter: drop-shadow(0 0 6px var(--devil-glow));
}

/* Left horn - curves outward to the left */
.devil-horns::before {
    left: 8px;
    transform: rotate(-30deg);
    border-radius: 0 0 0 50%;
    animation: hornWiggleLeft 2s ease-in-out infinite;
}

/* Right horn - curves outward to the right */
.devil-horns::after {
    right: 8px;
    transform: rotate(30deg);
    border-radius: 0 0 50% 0;
    animation: hornWiggleRight 2s ease-in-out infinite 0.1s;
}

@media (min-width: 768px) {
    .devil-horns {
        top: -16px;
        width: 78px;
        height: 28px;
    }

    .devil-horns::before,
    .devil-horns::after {
        border-left-width: 7px;
        border-right-width: 7px;
        border-bottom-width: 24px;
    }
}

/* Playful Metric Labels */
.growth-label,
.devilish-label {
    color: rgba(31, 41, 55, 0.65);
}

/* Animations */
@keyframes haloFloat {

    0%,
    100% {
        transform: translateX(-50%) translateY(0px);
        opacity: 0.9;
    }

    50% {
        transform: translateX(-50%) translateY(-3px);
        opacity: 1;
    }
}

@keyframes hornWiggleLeft {

    0%,
    100% {
        transform: rotate(-30deg) translateY(0px);
    }

    50% {
        transform: rotate(-32deg) translateY(-2px);
    }
}

@keyframes hornWiggleRight {

    0%,
    100% {
        transform: rotate(30deg) translateY(0px);
    }

    50% {
        transform: rotate(32deg) translateY(-2px);
    }
}

/* Subtle Card Glow */
.angel-glow {
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}

.devil-glow {
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.15);
}

/* Subtle Refresh Indicator */
.refresh-indicator {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.refresh-indicator.active {
    opacity: 1;
}

/* ========================================
   UTILITIES & POLISH
   ======================================== */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Better Tap Targets & Spacing for Mobile Controls */
@media (max-width: 1024px) {
    .text-button {
        min-height: 48px;
    }
}

/* Premium "Stealth Tile" Controls (Monochromatic) */
.metric-tile {
    background: var(--dark-surface);
    color: var(--on-dark-muted);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
}

.metric-tile:hover {
    color: var(--on-dark-primary);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.metric-tile-active {
    background: #E5E7EB !important;
    color: #111827 !important;
    border-color: #E5E7EB !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 20;
}