/* Import base styles */
@import 'golden.css';

/* Global variables driven by JS */
:root {
    --global-hue: 0deg;
    --global-sync: 0; /* 0..1 */
    --bg-lightness: 98%; /* Higher lightness for a subtle content background */
}

/* 
   Dynamic Background - Cleaned up to let canvas handle the visuals
*/
body {
    /* Base off-white */
    background-color: #faf9f7;
    
    /* No CSS gradient - handled by canvas now */
    background-image: none;
    
    min-height: 100vh;
}

/* 
   Kuramoto Oscillator Elements 
   These classes will be added by JS or manually to participate in the color dance.
*/

/* Base Node Logic */
.k-node {
    --phase: 0deg;
    --cluster-shift: 0deg;
    --phase-effective: calc(var(--phase) + var(--cluster-shift));
    
    /* Harmonics */
    --phase-2: calc(var(--phase-effective) * 2);
    --phase-3: calc(var(--phase-effective) * 3);
    
    /* Base styling variables */
    --k-lightness: 96%;
    --k-chroma: 0.03;
    --k-bg: oklch(var(--k-lightness) var(--k-chroma) var(--phase-effective));
    --k-border: oklch(calc(var(--k-lightness) - 10%) calc(var(--k-chroma) + 0.05) var(--phase-2));
    --k-shadow: oklch(calc(var(--k-lightness) - 20%) calc(var(--k-chroma) + 0.1) var(--phase-3) / 0.1);

    transition: background-color 100ms linear, border-color 100ms linear, box-shadow 100ms linear, color 100ms linear;
}

/* Override existing card styles to use Kuramoto colors */
.door-card, 
.instrument-card, 
.research-card,
.newsletter-box,
.hero-canvas,
.roadmap-box,
.cta-box,
.instrument-demo,
.person-card,
.advisor-card,
.culture-box,
.tier-card,
.reading-card,
.paper-item,
.start-box,
.stv-visual,
.donate-card,
.give-option,
.transparency-card,
.event-card,
.retreat-card,
.contest-box,
.collaborate-card {
    background: var(--k-bg) !important;
    border-color: var(--k-border) !important;
}

/* Hover effects - boost chroma and sync */
.door-card:hover, 
.instrument-card:hover, 
.research-card:hover,
.roadmap-box:hover,
.instrument-demo:hover,
.person-card:hover,
.advisor-card:hover,
.culture-box:hover,
.tier-card:hover,
.reading-card:hover,
.paper-item:hover,
.start-box:hover,
.stv-visual:hover,
.donate-card:hover,
.give-option:hover,
.transparency-card:hover,
.event-card:hover,
.retreat-card:hover,
.contest-box:hover,
.collaborate-card:hover {
    --k-chroma: 0.08;
    --k-lightness: 94%;
    box-shadow: 0 10px 30px var(--k-shadow) !important;
}

/* Buttons */
.ga-btn {
    --phase: 0deg; /* Will be set by JS if class added */
    --k-bg: oklch(60% 0.15 var(--phase));
    transition: background-color 100ms linear;
}

/* Special handling for buttons that are oscillators */
.ga-btn.k-node {
    background-color: var(--k-bg);
    border-color: transparent;
    color: white;
}

.ga-btn.k-node:hover {
    background-color: oklch(55% 0.18 var(--phase));
}

/* Filter Tabs */
.filter-tab.k-node {
    background-color: var(--k-bg);
    border-color: var(--k-border);
    color: oklch(40% 0.10 var(--phase-effective));
}

.filter-tab.k-node:hover, .filter-tab.k-node.active {
    --k-chroma: 0.12;
    --k-lightness: 85%;
    font-weight: 600;
}

/* Navigation Items */
.ga-nav-link.k-node {
    color: oklch(40% 0.10 var(--phase));
}

.ga-nav-link.k-node:hover {
    color: oklch(30% 0.15 var(--phase));
}

/* Sections as Clusters */
/* We can use data attributes or classes to shift phase for different sections */
[data-cluster="donors"] .k-node { --cluster-shift: 0deg; }
[data-cluster="research"] .k-node { --cluster-shift: 120deg; }
[data-cluster="instruments"] .k-node { --cluster-shift: 240deg; }
[data-cluster="community"] .k-node { --cluster-shift: 180deg; }