/*
 * Design tokens — the sticker system « L'Affiche à stickers » (ADR-0035, docs/design/STICKER-SYSTEM.md).
 *
 * The token NAMES are the ones every V2 sheet already reads, so the whole cascade follows the new values; the
 * `--stk-*` tokens are the sticker vocabulary used by stickers.css. Light is « Plein jour » (cream paper), dark is
 * « Nuit de prune » (plum). Sophie's rule: no blue and no grey in the night theme.
 *
 * The former olive family keeps its name because shell, home and footer read it; it is now the plum poster ground.
 */

:root {
	color-scheme: light;

	/* Plum poster ground (former olive surfaces), constant in both themes. */
	--dcv-olive:        #2A1433;
	--dcv-olive-deep:   #1E0E24;
	--dcv-olive-raised: #3A1D45;
	--dcv-on-olive:       #FFF1DC;
	--dcv-on-olive-muted: #E2C9D6;
	--dcv-on-olive-line:  rgb(255 241 220 / 0.22);
	--dcv-gold: #FFD24D;

	/* Paper and ink. */
	--dcv-canvas:      #FFF7E8;
	--dcv-canvas-sunk: #FBEBD2;
	--dcv-ink:         #1C2731;
	--dcv-muted:       #4C5866;
	--dcv-line:        rgb(28 39 49 / 0.18);
	--dcv-line-strong: #1C2731;

	/* House accent: tuile. */
	--dcv-accent:        #6B4EFF;
	--dcv-accent-strong: #5638F0;
	--dcv-accent-action: #6B4EFF;

	--dcv-cat-ink:  var(--dcv-accent-strong);
	--dcv-cat-glow: var(--dcv-gold);
	--dcv-cat-fill: var(--dcv-accent-action);
	--dcv-cat-wash: var(--dcv-canvas-sunk);
	--dcv-cat-line: var(--dcv-line-strong);
	--dcv-cat-h: 40;
	--dcv-cat-c: 0.145;

	/* Sticker vocabulary. */
	--stk-sticker:   #FFFFFF;
	--stk-shadow:    #1C2731;
	--stk-ocre:      #FFC83D;
	--stk-tuile:     #6B3FD1;
	--stk-bocage:    #14C08F;
	--stk-ardoise:   #6B4EFF;
	--stk-ciel:      #C9BEFF;
	--stk-rose:      #FF8BC2;
	--stk-citron:    #FFE27A;
	--stk-on-accent: #1C2731;
	--stk-hub:       #C9BEFF;
	--stk-line: 2.5px;
	--stk-radius: 22px;
	--stk-radius-sm: 12px;
	--stk-radius-xl: 28px;
	--stk-edge: rgb(24 18 46 / 0.10);
	--stk-soft: 0 1px 2px rgb(24 18 46 / 0.06), 0 14px 34px -16px rgb(24 18 46 / 0.30);
	--stk-soft-hover: 0 2px 4px rgb(24 18 46 / 0.06), 0 22px 46px -18px rgb(24 18 46 / 0.40);
	--stk-lift: var(--stk-soft);
	--stk-lift-hover: var(--stk-soft-hover);
	--stk-lift-press: 0 1px 2px rgb(24 18 46 / 0.2);
	--stk-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
	--stk-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.3);

	/* Scrims stay for type over photography; plum instead of olive. */
	--dcv-scrim-bottom: linear-gradient(to top, rgb(30 14 36 / 0.92) 0%, rgb(30 14 36 / 0.7) 28%, rgb(30 14 36 / 0.26) 62%, rgb(30 14 36 / 0) 100%);
	--dcv-scrim-left: linear-gradient(to right, rgb(30 14 36 / 0.88) 0%, rgb(30 14 36 / 0.55) 45%, rgb(30 14 36 / 0) 100%);
	--dcv-veil-open: linear-gradient(to top, rgb(30 14 36 / 0.9) 0%, rgb(30 14 36 / 0) 45%);
	--dcv-veil-open-foot: linear-gradient(to top, rgb(30 14 36 / 0.9) 0%, rgb(30 14 36 / 0) 62%);

	/* Type. */
	--dcv-font-display: "Bluu Next", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--dcv-font-ui: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--dcv-display-1: clamp(2.1rem, 1.2rem + 3vw, 3.8rem);
	--dcv-display-2: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
	--dcv-display-3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
	--dcv-display-4: clamp(1.15rem, 1.04rem + 0.5vw, 1.4rem);
	--dcv-text-xs:   0.75rem;
	--dcv-text-sm:   0.875rem;
	--dcv-text-base: 1rem;
	--dcv-text-prose: clamp(1.0625rem, 1rem + 0.28vw, 1.15rem);
	--dcv-leading-display: 1;
	--dcv-leading-title: 1.08;
	--dcv-leading-ui: 1.45;
	--dcv-leading-prose: 1.7;
	--dcv-label-tracking: 0.12em;
	--dcv-label-weight: 700;

	/* Layout: no rail any more; the canvas is centred under the sticker header. */
	--dcv-measure: 42rem;
	--dcv-breakout: 58rem;
	--dcv-canvas-max: 78rem;
	--dcv-gutter: clamp(1rem, 4vw, 3rem);
	--dcv-rail-width: 0px;
	--dcv-rail-width-reduced: 0px;
	--dcv-topbar-height: 4.5rem;
	--dcv-rail-offset: 0px;

	--dcv-space-3xs: 0.25rem;
	--dcv-space-2xs: 0.5rem;
	--dcv-space-xs:  0.75rem;
	--dcv-space-sm:  1rem;
	--dcv-space-md:  1.5rem;
	--dcv-space-lg:  2.5rem;
	--dcv-space-xl:  4rem;
	--dcv-space-section: clamp(2.5rem, 5vw, 4.5rem);

	--dcv-radius: 12px;
	--dcv-radius-lg: 22px;

	--dcv-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dcv-duration-fast: 160ms;
	--dcv-duration: 300ms;
	--dcv-duration-slow: 600ms;

	--dcv-focus-width: 3px;
	--dcv-focus-offset: 3px;
	--dcv-focus-ring: #6B4EFF;
}

/* « Nuit de prune ». The same block twice: the OS preference, and the reader's explicit choice. */
@media (prefers-color-scheme: dark) {
	:root:not([data-dcv-theme="light"]) {
		color-scheme: dark;
		--dcv-canvas:      #1E0E24;
		--dcv-canvas-sunk: #2A1433;
		--dcv-ink:         #FFF1DC;
		--dcv-muted:       #E2C9D6;
		--dcv-line:        rgb(255 241 220 / 0.18);
		--dcv-line-strong: #FFF1DC;
		--dcv-accent:        #A08CFF;
		--dcv-accent-strong: #B3A3FF;
		--dcv-focus-ring: #FFD24D;
		--stk-sticker:   #2E1638;
		--stk-shadow:    #0B0410;
		--stk-ocre:      #FFD24D;
		--stk-tuile:     #C9A6FF;
		--stk-bocage:    #3BE3B2;
		--stk-ardoise:   #A08CFF;
		--stk-ciel:      #C9BEFF;
		--stk-rose:      #FF9FCD;
		--stk-citron:    #FFE27A;
		--stk-on-accent: #1C0B22;
		--stk-hub:       #C9BEFF;
		--stk-edge: rgb(255 255 255 / 0.09);
		--stk-soft: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 18px 40px -18px rgb(0 0 0 / 0.75);
		--stk-soft-hover: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 26px 52px -18px rgb(0 0 0 / 0.85);
	}
}

:root[data-dcv-theme="dark"] {
	color-scheme: dark;
	--dcv-canvas:      #1E0E24;
	--dcv-canvas-sunk: #2A1433;
	--dcv-ink:         #FFF1DC;
	--dcv-muted:       #E2C9D6;
	--dcv-line:        rgb(255 241 220 / 0.18);
	--dcv-line-strong: #FFF1DC;
	--dcv-accent:        #A08CFF;
	--dcv-accent-strong: #B3A3FF;
	--dcv-focus-ring: #FFD24D;
	--stk-sticker:   #2E1638;
	--stk-shadow:    #0B0410;
	--stk-ocre:      #FFD24D;
	--stk-tuile:     #C9A6FF;
	--stk-bocage:    #3BE3B2;
	--stk-ardoise:   #A08CFF;
	--stk-ciel:      #C9BEFF;
	--stk-rose:      #FF9FCD;
	--stk-citron:    #FFE27A;
	--stk-on-accent: #1C0B22;
	--stk-hub:       #C9BEFF;
	--stk-edge: rgb(255 255 255 / 0.09);
	--stk-soft: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 18px 40px -18px rgb(0 0 0 / 0.75);
	--stk-soft-hover: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 26px 52px -18px rgb(0 0 0 / 0.85);
}

/*
 * Each Hub carries one poster colour (ADR-0029 kept as an idea, new values).
 * --hub-ink is text on paper (≥ 4.5:1 in its theme), --hub-fill carries cream text in both themes,
 * --hub-sticker / --hub-sticker-night are the bright fills behind dark text.
 */
[data-dcv-hub="destinations"]                   { --hub-ink: #5638F0; --hub-night: #A08CFF; --hub-fill: #5638F0; --hub-sticker: #D8CFFF; --hub-sticker-night: #A08CFF; }
[data-dcv-hub="randonnee-aventure-nature"]      { --hub-ink: #0B8A66; --hub-night: #3BE3B2; --hub-fill: #0B8A66; --hub-sticker: #BDF3E1; --hub-sticker-night: #3BE3B2; }
[data-dcv-hub="guides-ville-activites"]         { --hub-ink: #0E7C86; --hub-night: #5EE0D0; --hub-fill: #0E7C86; --hub-sticker: #BDEFEA; --hub-sticker-night: #5EE0D0; }
[data-dcv-hub="plages-iles-paradisiaques"]      { --hub-ink: #0A7A93; --hub-night: #4FE3DA; --hub-fill: #0A7A93; --hub-sticker: #BFF1F5; --hub-sticker-night: #4FE3DA; }
[data-dcv-hub="road-trips-itineraires"]         { --hub-ink: #A86A00; --hub-night: #FFD24D; --hub-fill: #A86A00; --hub-sticker: #FFE69A; --hub-sticker-night: #FFD24D; }
[data-dcv-hub="culture-gastronomie-evenements"] { --hub-ink: #C42A78; --hub-night: #FF9FCD; --hub-fill: #C42A78; --hub-sticker: #FFC9E3; --hub-sticker-night: #FF9FCD; }
[data-dcv-hub="hebergements-sejours"]           { --hub-ink: #7C3AD6; --hub-night: #D4A8FF; --hub-fill: #7C3AD6; --hub-sticker: #E8D5FF; --hub-sticker-night: #D4A8FF; }
[data-dcv-hub="conseils-preparation-voyage"]    { --hub-ink: #8A5A00; --hub-night: #FFC857; --hub-fill: #8A5A00; --hub-sticker: #FFE3A3; --hub-sticker-night: #FFC857; }
[data-dcv-hub="journal"]                        { --hub-ink: #6B3FD1; --hub-night: #C9A6FF; --hub-fill: #6B3FD1; --hub-sticker: #E3D4FF; --hub-sticker-night: #C9A6FF; }

[data-dcv-hub] {
	--dcv-cat-ink:  var(--hub-ink);
	--dcv-cat-glow: var(--hub-sticker);
	--dcv-cat-fill: var(--hub-fill);
	--dcv-cat-wash: color-mix(in srgb, var(--hub-sticker) 28%, var(--dcv-canvas));
	--dcv-cat-line: var(--hub-ink);
	--stk-hub:      var(--hub-sticker);
	--dcv-accent:        var(--dcv-cat-ink);
	--dcv-accent-strong: var(--dcv-cat-ink);
	--dcv-accent-action: var(--dcv-cat-fill);
	--dcv-focus-ring:    var(--dcv-cat-ink);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-dcv-theme="light"]) [data-dcv-hub] {
		--dcv-cat-ink:  var(--hub-night);
		--dcv-cat-glow: var(--hub-sticker-night);
		--dcv-cat-wash: color-mix(in srgb, var(--hub-sticker-night) 14%, var(--dcv-canvas));
		--dcv-cat-line: var(--hub-night);
		--stk-hub:      var(--hub-sticker-night);
	}
}

:root[data-dcv-theme="dark"] [data-dcv-hub] {
	--dcv-cat-ink:  var(--hub-night);
	--dcv-cat-glow: var(--hub-sticker-night);
	--dcv-cat-wash: color-mix(in srgb, var(--hub-sticker-night) 14%, var(--dcv-canvas));
	--dcv-cat-line: var(--hub-night);
	--stk-hub:      var(--hub-sticker-night);
}