:root {
    /* BASE COLORS */
    --hue-primary: 265;
    --hue-accent: 143;

    /* SEMANTIC COLORS */
    --color-bg: oklch(98% 0.005 var(--hue-primary));
    --color-text: oklch(20% 0.05 var(--hue-primary));
    --color-text-muted: oklch(35% 0.08 var(--hue-primary));
    --color-text-subtle: oklch(50% 0.12 var(--hue-primary));
    
    --color-surface-subtle: oklch(95% 0.02 var(--hue-primary));
    --color-surface-hover: oklch(92% 0.04 var(--hue-primary));
    
    --color-border: oklch(85% 0.03 var(--hue-primary));
    
    --color-link: oklch(45% 0.18 var(--hue-primary));
    --color-link-visited: oklch(35% 0.15 320);
    --color-link-hover: oklch(55% 0.20 var(--hue-primary));
    
    --color-code-bg: oklch(96% 0.015 var(--hue-primary));
    --color-code-border: oklch(80% 0.05 var(--hue-primary));
    --color-code-label: oklch(55% 0.14 var(--hue-accent));
    
    --color-quote-bg: oklch(95% 0.03 var(--hue-accent) / 0.4);
    --color-quote-border: oklch(70% 0.12 var(--hue-accent));

    --color-callout-note: oklch(35% 0.12 250);
    --color-callout-tip: oklch(30% 0.13 145);
    --color-callout-important: oklch(40% 0.18 285);
    --color-callout-warning: oklch(60% 0.16 70);
    --color-callout-caution: oklch(38% 0.2 20);

    /* TYPOGRAPHY */
    --f-body: 18px;
    --f-code: 16px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: oklch(18% 0.015 var(--hue-primary));
        --color-text: oklch(88% 0.04 var(--hue-primary));
        --color-text-muted: oklch(70% 0.06 var(--hue-primary));
        --color-text-subtle: oklch(55% 0.08 var(--hue-primary));
        
        --color-surface-subtle: oklch(22% 0.02 var(--hue-primary));
        --color-surface-hover: oklch(28% 0.03 var(--hue-primary));
        
        --color-border: oklch(35% 0.04 var(--hue-primary));
        
        --color-link: oklch(70% 0.15 var(--hue-primary));
        --color-link-visited: oklch(65% 0.12 300);
        --color-link-hover: oklch(80% 0.18 var(--hue-primary));
        
        --color-code-bg: oklch(22% 0.02 var(--hue-primary));
        --color-code-border: oklch(40% 0.06 var(--hue-primary));
        --color-code-label: oklch(65% 0.16 var(--hue-accent));
        
        --color-quote-bg: oklch(30% 0.07 var(--hue-accent) / 0.4);
        --color-quote-border: oklch(65% 0.14 var(--hue-accent));

        --color-callout-note: oklch(65% 0.15 250);
        --color-callout-tip: oklch(68% 0.14 145);
        --color-callout-important: oklch(70% 0.16 285);
        --color-callout-warning: oklch(72% 0.14 70);
        --color-callout-caution: oklch(68% 0.16 20);
    }
}

html {
    background-color: var(--color-bg);
    color: var(--color-text);
}