/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Brand blue (#3858e9) design system.
   ========================================================================== */

:root,
[data-theme="light"] {
    /* --- Radius --- */
    --htl-radius: 1rem;
    --htl-radius-sm: calc(var(--htl-radius) - 4px);
    --htl-radius-md: calc(var(--htl-radius) - 2px);
    --htl-radius-lg: var(--htl-radius);
    --htl-radius-xl: calc(var(--htl-radius) + 4px);
    --htl-radius-2xl: calc(var(--htl-radius) + 8px);

    /* --- Colors (Light — default) --- */
    --htl-bg:               oklch(0.97 0.005 250);
    --htl-fg:               oklch(0.18 0.03 265);
    --htl-surface:          oklch(0.94 0.008 255);
    --htl-card:             oklch(1 0 0);
    --htl-card-fg:          oklch(0.18 0.03 265);
    --htl-popover:          oklch(1 0 0);
    --htl-popover-fg:       oklch(0.18 0.03 265);
    --htl-primary:          oklch(0.48 0.22 264);
    --htl-primary-fg:       oklch(0.99 0.005 250);
    --htl-secondary:        oklch(0.95 0.01 250);
    --htl-secondary-fg:     oklch(0.18 0.03 265);
    --htl-muted:            oklch(0.93 0.008 255);
    --htl-muted-fg:         oklch(0.45 0.02 260);
    --htl-accent:           oklch(0.48 0.22 264);
    --htl-accent-fg:        oklch(0.99 0.005 250);
    --htl-gold:             oklch(0.7 0.16 70);
    --htl-gold-fg:          oklch(0.18 0.03 265);
    --htl-destructive:      oklch(0.55 0.22 25);
    --htl-destructive-fg:   oklch(0.99 0.005 250);
    --htl-border:           oklch(0.85 0.01 255);
    --htl-input:            oklch(0.88 0.01 255);
    --htl-ring:             oklch(0.48 0.22 264);

    /* --- Light heading & nav overrides --- */
    --htl-heading-color:    oklch(0.15 0.03 265);
    --htl-nav-text:         oklch(0.35 0.02 260);

    /* --- Typography --- */
    --htl-font-display: "Sora", system-ui, sans-serif;
    --htl-font-sans:    "DM Sans", system-ui, sans-serif;
    --htl-font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
    /* --- Colors (Dark — override) --- */
    --htl-bg:               oklch(0.16 0.03 265);
    --htl-fg:               oklch(0.98 0.005 250);
    --htl-surface:          oklch(0.2 0.03 265);
    --htl-card:             oklch(0.23 0.035 265);
    --htl-card-fg:          oklch(0.98 0.005 250);
    --htl-popover:          oklch(0.23 0.035 265);
    --htl-popover-fg:       oklch(0.98 0.005 250);
    --htl-primary:          oklch(0.52 0.20 264);
    --htl-primary-fg:       oklch(0.98 0.005 250);
    --htl-secondary:        oklch(0.28 0.04 265);
    --htl-secondary-fg:     oklch(0.98 0.005 250);
    --htl-muted:            oklch(0.26 0.03 265);
    --htl-muted-fg:         oklch(0.72 0.02 255);
    --htl-accent:           oklch(0.52 0.20 264);
    --htl-accent-fg:        oklch(0.98 0.005 250);
    --htl-gold:             oklch(0.78 0.16 75);
    --htl-gold-fg:          oklch(0.18 0.03 265);
    --htl-destructive:      oklch(0.62 0.22 25);
    --htl-destructive-fg:   oklch(0.98 0.005 250);
    --htl-border:           oklch(1 0 0 / 8%);
    --htl-input:            oklch(1 0 0 / 12%);
    --htl-ring:             oklch(0.52 0.20 264);

    /* --- Dark mode overrides --- */
    --htl-heading-color:    oklch(0.98 0.005 250);
    --htl-nav-text:         oklch(0.85 0.01 250);
}