/* Default URLs do not receive data-palette, so the approved Pink palette remains unchanged. */

html[data-palette="orange"] {
  --brand: #ED6A2F;
  --brand-deep: #C55326;
  --brand-rgb: 237, 106, 47;
  --action: #A43B20;
  --action-rgb: 164, 59, 32;
  --ink: #332724;
  --muted: #6E625E;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FFF5EF;
  --surface-deep: #FBE8DE;
  --border: #A58A80;
  --border-soft: #E8D7CF;
  --discovery: #DD7396;
  --accent: #DD7396;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: #A43B20;
  --on-brand: #FFFFFF;
  --on-brand-muted: #F7D0C1;
}

html[data-palette="yellow-green"] {
  --brand: #6E9F2C;
  --brand-deep: #587F23;
  --brand-rgb: 110, 159, 44;
  --action: #46691C;
  --action-rgb: 70, 105, 28;
  --ink: #302923;
  --muted: #69645B;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #F8FBEF;
  --surface-deep: #EEF5DB;
  --border: #919683;
  --border-soft: #DEE4D1;
  --discovery: #DD7396;
  --accent: #DD7396;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: #46691C;
  --on-brand: #FFFFFF;
  --on-brand-muted: #DCEBBF;
}

html[data-palette="coral"] {
  --brand: #E46560;
  --brand-deep: #C64F52;
  --brand-rgb: 228, 101, 96;
  --action: #9D3E44;
  --action-rgb: 157, 62, 68;
  --ink: #332628;
  --muted: #6E6061;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FFF6F5;
  --surface-deep: #FBE7E5;
  --border: #A48A88;
  --border-soft: #E8D6D3;
  --discovery: #F2C84B;
  --accent: #F2C84B;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: #9D3E44;
  --on-brand: #FFFFFF;
  --on-brand-muted: #F8D3D1;
  --focus: #7D312D;
  --focus-reverse: #FFFFFF;
}

html[data-palette="pink-bright"] {
  /* The approved Pink identity stays exact; only role allocation changes. */
  --brand: #D94E78;
  --brand-deep: #BD3E65;
  --brand-rgb: 217, 78, 120;
  --brand-bright: #E17193;
  --brand-bright-rgb: 225, 113, 147;
  --control-fill: #C84970;
  --control-rgb: 200, 73, 112;
  --action: #9C3D54;
  --action-rgb: 156, 61, 84;
  --ink: #332628;
  --muted: #6C6364;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FFF8FA;
  --surface-deep: #FDECF1;
  --border: #A98A92;
  --border-soft: #EED9DF;
  --discovery: #F2C84B;
  --accent: #F2C84B;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: var(--surface-deep);
  --on-brand: var(--ink);
  --on-brand-muted: #F7DDE4;
  --on-bright: #332628;
  --on-control: #FFFFFF;
  --focus: #9C3D54;
  --focus-reverse: #FFFFFF;
}

html[data-palette="orange-bright"] {
  --brand: #ED6A2F;
  --brand-deep: #C55326;
  --brand-rgb: 237, 106, 47;
  --brand-bright: #ED6A2F;
  --brand-bright-rgb: 237, 106, 47;
  --control-fill: #C55326;
  --control-rgb: 197, 83, 38;
  --action: #A43B20;
  --action-rgb: 164, 59, 32;
  --ink: #332724;
  --muted: #6E625E;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FFF5EF;
  --surface-deep: #FBE8DE;
  --border: #A58A80;
  --border-soft: #E8D7CF;
  --discovery: #DD7396;
  --accent: #DD7396;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: var(--surface-deep);
  --on-brand: var(--ink);
  --on-brand-muted: var(--muted);
  --on-bright: #FFFFFF;
  --on-control: #FFFFFF;
  --focus: #A43B20;
  --focus-reverse: #FFFFFF;
}

html[data-palette="yellow-green-bright"] {
  --brand: #6E9F2C;
  --brand-deep: #587F23;
  --brand-rgb: 110, 159, 44;
  --brand-bright: #6E9F2C;
  --brand-bright-rgb: 110, 159, 44;
  --control-fill: #587F23;
  --control-rgb: 88, 127, 35;
  --action: #46691C;
  --action-rgb: 70, 105, 28;
  --ink: #302923;
  --muted: #69645B;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #F8FBEF;
  --surface-deep: #EEF5DB;
  --border: #919683;
  --border-soft: #DEE4D1;
  --discovery: #DD7396;
  --accent: #DD7396;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: var(--surface-deep);
  --on-brand: var(--ink);
  --on-brand-muted: var(--muted);
  --on-bright: #FFFFFF;
  --on-control: #FFFFFF;
  --focus: #46691C;
  --focus-reverse: #FFFFFF;
}

html[data-palette="coral-bright"] {
  --brand: #E46560;
  --brand-deep: #C64F52;
  --brand-rgb: 228, 101, 96;
  --brand-bright: #E46560;
  --brand-bright-rgb: 228, 101, 96;
  --control-fill: #C74E54;
  --control-rgb: 199, 78, 84;
  --action: #9D3E44;
  --action-rgb: 157, 62, 68;
  --ink: #332628;
  --muted: #6E6061;
  --canvas: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FFF6F5;
  --surface-deep: #FBE7E5;
  --border: #A48A88;
  --border-soft: #E8D6D3;
  --discovery: #F2C84B;
  --accent: #F2C84B;
  --success: #4F7642;
  --success-fill: #5F963A;
  --on-success: #FFFFFF;
  --brand-panel: var(--surface-deep);
  --on-brand: var(--ink);
  --on-brand-muted: var(--muted);
  --on-bright: #FFFFFF;
  --on-control: #FFFFFF;
  --focus: #9D3E44;
  --focus-reverse: #FFFFFF;
}

html[data-palette] body { color: var(--ink); }
html[data-palette] img.palette-symbol { filter: none !important; }

/* Small text uses the deeper interactive tone; the brighter Brand is reserved for the logo and large graphic cues. */
html[data-palette][data-direction="d1"] :is(.eyebrow span, .rail-heading p, .section-heading > p, .section-heading > div > p, .newsletter > div > p, .theme-links span, .guide-steps > li > span) { color: var(--action); }
html[data-palette][data-direction="d2"] :is(.guide-kicker, .guide-step legend span, .section-label) { color: var(--action); }
html[data-palette][data-direction="d3"] :is(.kicker, .rhythm-nav span, .theme-list span) { color: var(--action); }

/* Surfaces carrying white copy use the darker panel token instead of the brighter logo color. */
html[data-palette][data-direction="d1"] .guide-band,
html[data-palette][data-direction="d3"] .editorial { background: var(--brand-panel); color: var(--on-brand); }
html[data-palette][data-direction="d3"] .scene-action span { background: var(--brand-panel); }

/* Direction 1 fixed-color details. */
html[data-palette][data-direction="d1"] .guide-mark { background: var(--brand); }
html[data-palette][data-direction="d1"] .newsletter::after { border-color: rgba(var(--brand-rgb), .10); }
html[data-palette][data-direction="d1"] :is(.editor-note, .hero-story-card, .theme-rail, .theme-links a, .season-card) { border-color: var(--border-soft); }
html[data-palette][data-direction="d1"] :is(.story-card-text > a, .newsletter input) { border-color: var(--border); }
html[data-palette][data-direction="d1"] :is(.guide-steps li, .daily-list article) { border-color: var(--border-soft); }
html[data-palette][data-direction="d1"] :is(.hero .lead, .card-body p, .story-card p, .daily-list p, .newsletter small) { color: var(--muted); }
html[data-palette][data-direction="d1"] :is(.hero-story-card, .hero-story > img) { box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 10%, transparent); }

/* Direction 2 fixed-color details. */
html[data-palette][data-direction="d2"] .hero {
  background:
    radial-gradient(circle at calc(50% + 550px) 108px, rgba(var(--brand-rgb), .08) 0 128px, transparent 129px),
    linear-gradient(180deg, #fff 0%, #fff 79%, var(--surface) 79%, var(--surface) 100%);
}
html[data-palette][data-direction="d2"] .hero::before { border-color: rgba(var(--action-rgb), .18); }
html[data-palette][data-direction="d2"] { --shadow: 0 24px 70px rgba(var(--action-rgb), .10); }
html[data-palette][data-direction="d2"] .choice-list input:checked + span { box-shadow: 0 3px 10px rgba(var(--action-rgb), .18); }
html[data-palette][data-direction="d2"] .choice-list input:focus-visible + span { outline-color: color-mix(in srgb, var(--discovery) 55%, transparent); }
html[data-palette="coral"][data-direction="d2"] .choice-list input:focus-visible + span { outline-color: var(--focus); }
html[data-palette][data-direction="d2"] .primary-button { box-shadow: 0 7px 18px rgba(var(--action-rgb), .16); }
html[data-palette][data-direction="d2"] .primary-button:focus-visible { box-shadow: 0 10px 24px rgba(var(--action-rgb), .24); }
html[data-palette][data-direction="d2"] :is(.monthly-card, .article-card:hover) { box-shadow: 0 18px 50px rgba(var(--action-rgb), .08); }
html[data-palette][data-direction="d2"] :is(.hero-lead, .section-head > p, .checkpoint-grid p, .comparison-intro > p:not(.section-label), .compare-note, .article-body > p:not(.article-meta), .care-note p, .article-meta, .guide-progress span, .table-heading span) { color: var(--muted); }
html[data-palette][data-direction="d2"] .table-header { background: var(--surface-deep); }
html[data-palette][data-direction="d2"] .table-header > * { color: var(--muted); }
html[data-palette][data-direction="d2"] .care-note { background: var(--surface); }
/* Direction 3 fixed-color details. */
html[data-palette][data-direction="d3"] .hero-wash {
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.87) 31%, rgba(255,255,255,.22) 58%, rgba(var(--brand-rgb),.025) 100%);
}
html[data-palette][data-direction="d3"] .scene-number { color: rgba(var(--brand-rgb), .11); }
html[data-palette][data-direction="d3"] :is(.warm-image, .clean-image)::after { background: rgba(var(--brand-rgb), .04); }
html[data-palette][data-direction="d3"] .water-copy .scene-action,
html[data-palette][data-direction="d3"] .article-link.light small { color: var(--on-brand-muted); }
html[data-palette][data-direction="d3"] .editorial-copy p { color: var(--on-brand-muted); }
html[data-palette][data-direction="d3"] .button { box-shadow: 0 10px 24px rgba(var(--action-rgb), .14); }
html[data-palette][data-direction="d3"] .water-copy > p:not(.scene-action) { color: var(--on-brand-muted); }
html[data-palette][data-direction="d3"] :is(.rhythm-nav a, .scene::before, .article-link, .theme-list a) { border-color: var(--border-soft); }
html[data-palette][data-direction="d3"] :is(.hero-lead, .rhythm-intro > p:last-child, .scene-description, .rest-article-copy p, .rest-note) { color: var(--muted); }

/* Bright variants keep each approved identity color while redistributing large dark fields.
   Filled controls use a vivid mid-tone with white type; Action is reserved for hover and the legal strip. */
html[data-distribution="bright"][data-direction="d1"] :is(.button.primary, .newsletter button),
html[data-distribution="bright"][data-direction="d2"] :is(.header-guide, .primary-button, .guide-progress span.is-current),
html[data-distribution="bright"][data-direction="d2"] .choice-list input:checked + span,
html[data-distribution="bright"][data-direction="d3"] :is(.button, .scene-action span) {
  background: var(--control-fill);
  border-color: var(--control-fill);
  color: var(--on-control);
}

html[data-distribution="bright"][data-direction="d1"] :is(.button.primary, .newsletter button):is(:hover, :focus-visible, :active),
html[data-distribution="bright"][data-direction="d2"] :is(.header-guide, .primary-button):is(:hover, :focus-visible, :active),
html[data-distribution="bright"][data-direction="d3"] .button:is(:hover, :focus-visible, :active) {
  background: var(--action);
  border-color: var(--action);
  color: #FFFFFF;
}

/* D1: make the utility, guide and footer feel lighter without changing content or layout. */
html[data-distribution="bright"][data-direction="d1"] .utility {
  background: var(--control-fill);
  color: var(--on-control);
  border-bottom: 1px solid var(--control-fill);
}
html[data-distribution="bright"][data-direction="d1"] .utility a { color: var(--on-control); }
html[data-distribution="bright"][data-direction="d1"] .guide-copy > p { color: var(--action); }
html[data-distribution="bright"][data-direction="d1"] .guide-lead {
  color: var(--muted) !important;
  opacity: 1;
}
html[data-distribution="bright"][data-direction="d1"] .button.dark {
  background: #FFFFFF;
  border: 1px solid var(--action);
  color: var(--action);
}
html[data-distribution="bright"][data-direction="d1"] .button.dark:is(:hover, :focus-visible, :active) {
  background: var(--action);
  color: #FFFFFF;
}
html[data-distribution="bright"][data-direction="d1"] .article-callout > span {
  background: var(--control-fill);
  color: #FFFFFF;
}
html[data-distribution="bright"][data-direction="d1"] .article-conclusion {
  background: var(--surface-deep);
  color: var(--ink);
  border-top: 6px solid var(--brand);
}
/* D2: brighten default selection, progress and CTA states; keep deep Rose for hover only. */
html[data-distribution="bright"][data-direction="d2"] .choice-list input:checked + span {
  border-width: 2px;
  box-shadow: 0 3px 12px rgba(var(--control-rgb), .24);
}
html[data-distribution="bright"][data-direction="d2"] .choice-list input:focus-visible + span {
  outline-color: var(--focus);
}
html[data-distribution="bright"][data-direction="d2"] .primary-button {
  box-shadow: 0 7px 20px rgba(var(--control-rgb), .22);
}
/* D3: retain one story beat, but use the image and a light Rose wash instead of a charcoal field. */
html[data-distribution="bright"][data-direction="d3"] .water-story { background: var(--surface-deep); }
html[data-distribution="bright"][data-direction="d3"] .water-story > img {
  filter: saturate(.9) brightness(.96) contrast(.98);
}
html[data-distribution="bright"][data-direction="d3"] .water-overlay {
  background: linear-gradient(90deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.08) 48%, color-mix(in srgb, var(--surface) 84%, transparent) 72%, color-mix(in srgb, var(--surface) 98%, transparent) 100%);
}
html[data-distribution="bright"][data-direction="d3"] .water-copy { color: var(--ink); }
html[data-distribution="bright"][data-direction="d3"] .water-copy > p:not(.scene-action) { color: var(--muted); }
html[data-distribution="bright"][data-direction="d3"] :is(.water-copy .scene-action, .article-link.light small) { color: var(--action); }
html[data-distribution="bright"][data-direction="d3"] .article-link.light { border-color: var(--border); }
html[data-distribution="bright"][data-direction="d3"] .article-link.light i {
  background: var(--control-fill);
  color: var(--on-control);
}
html[data-distribution="bright"][data-direction="d3"] .editorial .kicker {
  color: var(--action);
  opacity: 1;
}
html[data-distribution="bright"][data-direction="d3"] .editorial-copy p { color: var(--muted); }
@media (max-width: 720px) {
  html[data-palette][data-direction="d2"] .hero {
    background:
      radial-gradient(circle at 115% 70px, rgba(var(--brand-rgb), .08) 0 86px, transparent 87px),
      linear-gradient(180deg, #fff 0%, #fff 93%, var(--surface) 93%, var(--surface) 100%);
  }
  html[data-palette][data-direction="d2"] .guide-panel { box-shadow: 0 16px 42px rgba(var(--action-rgb), .10); }
  html[data-palette][data-direction="d3"] .hero-wash {
    background: linear-gradient(0deg, color-mix(in srgb, var(--surface) 55%, transparent), transparent 45%);
  }
  html[data-distribution="bright"][data-direction="d3"] .water-copy h2 { font-size: 32px; }
}