/*
 * Design tokens for Son of Lord.
 *
 * Rule: components use the semantic names (--sol-bg, --sol-text ...),
 * never a raw hex value. Dark mode only changes what the names point to.
 *
 * Dark mode is applied in two cases:
 *   1. The visitor's system is dark and they have not chosen a theme.
 *   2. The visitor picked dark with the toggle (html[data-theme="dark"]).
 * The dark values therefore appear twice below. Keep both blocks identical.
 */

/* ==========================================================================
   1. Brand palette (raw values, referenced by the semantic tokens)
   ========================================================================== */
:root {
	--sol-sun-yellow:   #FFC629;
	--sol-warm-white:   #F8F5EE;
	--sol-sand:         #E8DDCA;
	--sol-charcoal:     #242522;
	--sol-dark-bg:      #1B1A17;
	--sol-dark-surface: #24231F;
	--sol-dark-sand:    #2E2C26;
}

/* ==========================================================================
   2. Semantic colors, light theme (default)
   ========================================================================== */
:root {
	color-scheme: light;

	--sol-bg:            #F8F5EE; /* page background */
	--sol-surface:       #FFFFFF; /* cards, inputs, dropdowns */
	--sol-surface-alt:   #E8DDCA; /* banners, tags, quiet panels */
	--sol-line:          #DDD2BD; /* borders and dividers */
	--sol-text:          #242522; /* body text and headings */
	--sol-muted:         #6D6A60; /* secondary text */
	--sol-accent:        #FFC629; /* buttons, highlights */
	--sol-accent-ink:    #242522; /* text placed on the accent color */
	--sol-gold-text:     #8A6400; /* accent used as text (passes contrast on bg) */
	--sol-success:       #3B6B32;
	--sol-danger:        #B3261E;
	--sol-focus:         #242522;
	--sol-shadow:        rgba(36, 37, 34, 0.14);
	--sol-header-bg:     rgba(248, 245, 238, 0.92);
}

/* ==========================================================================
   3. Semantic colors, dark theme
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--sol-bg:            #1B1A17;
		--sol-surface:       #24231F;
		--sol-surface-alt:   #2E2C26;
		--sol-line:          #3A3730;
		--sol-text:          #F1EDE3;
		--sol-muted:         #A8A296;
		--sol-accent:        #FFC629;
		--sol-accent-ink:    #1B1A17;
		--sol-gold-text:     #FFC629;
		--sol-success:       #8CC27F;
		--sol-danger:        #F08A82;
		--sol-focus:         #FFC629;
		--sol-shadow:        rgba(0, 0, 0, 0.5);
		--sol-header-bg:     rgba(27, 26, 23, 0.92);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--sol-bg:            #1B1A17;
	--sol-surface:       #24231F;
	--sol-surface-alt:   #2E2C26;
	--sol-line:          #3A3730;
	--sol-text:          #F1EDE3;
	--sol-muted:         #A8A296;
	--sol-accent:        #FFC629;
	--sol-accent-ink:    #1B1A17;
	--sol-gold-text:     #FFC629;
	--sol-success:       #8CC27F;
	--sol-danger:        #F08A82;
	--sol-focus:         #FFC629;
	--sol-shadow:        rgba(0, 0, 0, 0.5);
	--sol-header-bg:     rgba(27, 26, 23, 0.92);
}

/* ==========================================================================
   4. Typography
   ========================================================================== */
:root {
	--sol-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--sol-font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Fluid sizes: smallest value on phones, largest on wide screens. */
	--sol-text-sm:  0.875rem;
	--sol-text-md:  1rem;
	--sol-text-lg:  1.125rem;
	--sol-h3:       clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--sol-h2:       clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	--sol-h1:       clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

	--sol-leading-body:  1.6;
	--sol-leading-title: 1.12;
}

/* ==========================================================================
   5. Layout, shape and motion
   ========================================================================== */
:root {
	--sol-container: 1160px;
	--sol-gutter:    24px;

	--sol-space-1: 4px;
	--sol-space-2: 8px;
	--sol-space-3: 16px;
	--sol-space-4: 24px;
	--sol-space-5: 40px;
	--sol-space-6: 72px;

	--sol-radius-sm:   8px;
	--sol-radius-md:   14px;
	--sol-radius-lg:   20px;
	--sol-radius-pill: 999px;

	--sol-ease:     cubic-bezier(0.2, 0.7, 0.2, 1);
	--sol-fast:     0.15s;
	--sol-normal:   0.3s;

	--sol-z-header: 100;
	--sol-z-toast:  500;
}