/*
 * Shared five-tone system for every homepage layout.
 * tone-original intentionally leaves each layout's authored palette untouched.
 */

body.tone-ocean {
  --tone-bg-dark:#061827;
  --tone-bg-light:#eaf7ff;
  --tone-surface-dark:#0d2a40;
  --tone-surface-light:#f7fcff;
  --tone-text-on-dark:#f3fbff;
  --tone-text-muted-dark:#a7c2d1;
  --tone-text-on-light:#102b3c;
  --tone-text-muted-light:#5b7281;
  --tone-accent:#54d8ff;
  --tone-accent-on-dark:#54d8ff;
  --tone-accent-on-light:#12688f;
  --tone-accent-surface:#54d8ff;
  --tone-accent-surface-ink:#061827;
  --tone-accent-strong:#12688f;
  --tone-accent-2:#347ee8;
  --tone-accent-3:#55cfa8;
  --tone-accent-ink:#061827;
  --tone-line-dark:rgba(84,216,255,.24);
  --tone-line-light:rgba(16,43,60,.2);
}

body.tone-sunset {
  --tone-bg-dark:#32131c;
  --tone-bg-light:#fff1e8;
  --tone-surface-dark:#54202a;
  --tone-surface-light:#fff9f3;
  --tone-text-on-dark:#fff8f2;
  --tone-text-muted-dark:#e5b8ae;
  --tone-text-on-light:#3b1c1c;
  --tone-text-muted-light:#825f59;
  --tone-accent:#ffad59;
  --tone-accent-on-dark:#ffb369;
  --tone-accent-on-light:#a54135;
  --tone-accent-surface:#ffad59;
  --tone-accent-surface-ink:#34140e;
  --tone-accent-strong:#a54135;
  --tone-accent-2:#f46660;
  --tone-accent-3:#f7cf78;
  --tone-accent-ink:#34140e;
  --tone-line-dark:rgba(255,173,89,.27);
  --tone-line-light:rgba(59,28,28,.2);
}

body.tone-mint {
  --tone-bg-dark:#0d2a23;
  --tone-bg-light:#e9f7ef;
  --tone-surface-dark:#16473a;
  --tone-surface-light:#fbfffc;
  --tone-text-on-dark:#f1fff8;
  --tone-text-muted-dark:#a9d2c0;
  --tone-text-on-light:#132d24;
  --tone-text-muted-light:#5d746a;
  --tone-accent:#53d49e;
  --tone-accent-on-dark:#63e1ad;
  --tone-accent-on-light:#176b50;
  --tone-accent-surface:#53d49e;
  --tone-accent-surface-ink:#092018;
  --tone-accent-strong:#176b50;
  --tone-accent-2:#4b7fda;
  --tone-accent-3:#efbb59;
  --tone-accent-ink:#092018;
  --tone-line-dark:rgba(83,212,158,.25);
  --tone-line-light:rgba(19,45,36,.19);
}

body.tone-mono {
  --tone-bg-dark:#101114;
  --tone-bg-light:#f1f2f3;
  --tone-surface-dark:#212329;
  --tone-surface-light:#ffffff;
  --tone-text-on-dark:#f7f7f5;
  --tone-text-muted-dark:#b4b6bc;
  --tone-text-on-light:#17181b;
  --tone-text-muted-light:#666970;
  --tone-accent:#ececea;
  --tone-accent-on-dark:#f2f2f0;
  --tone-accent-on-light:#303238;
  --tone-accent-surface:#ececea;
  --tone-accent-surface-ink:#111216;
  --tone-accent-strong:#303238;
  --tone-accent-2:#9da1aa;
  --tone-accent-3:#676b73;
  --tone-accent-ink:#111216;
  --tone-line-dark:rgba(255,255,255,.22);
  --tone-line-light:rgba(23,24,27,.2);
}

body:not(.tone-original) {
  background:var(--tone-bg-dark);
}

/* 01 — Trinity Gates */
body:not(.tone-original) .layout-01 {
  --gate-bg:var(--tone-bg-dark);
  --gate-lime:var(--tone-accent);
  color:var(--tone-text-on-dark);
}
body:not(.tone-original) .layout-01 .gate-panel:nth-child(1) .gate-panel__link::before {
  background:linear-gradient(160deg,var(--tone-accent-strong),var(--tone-surface-dark) 57%,var(--tone-bg-dark));
}
body:not(.tone-original) .layout-01 .gate-panel:nth-child(2) .gate-panel__link::before {
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone-accent-2) 42%,var(--tone-bg-dark)),var(--tone-surface-dark) 57%,var(--tone-bg-dark));
}
body:not(.tone-original) .layout-01 .gate-panel:nth-child(3) .gate-panel__link::before {
  background:linear-gradient(160deg,color-mix(in srgb,var(--tone-accent-3) 42%,var(--tone-bg-dark)),var(--tone-surface-dark) 57%,var(--tone-bg-dark));
}
body:not(.tone-original) .layout-01 .gate-masthead__line,
body:not(.tone-original) .layout-01 .gate-eyebrow,
body:not(.tone-original) .layout-01 .gate-intro>p:not(.gate-eyebrow),
body:not(.tone-original) .layout-01 .gate-intro__hint {
  color:var(--tone-text-muted-dark);
}
body:not(.tone-original) .layout-01 .gate-promo b,
body:not(.tone-original) .layout-01 .gate-intro h1 em {
  color:var(--tone-accent-ink);
}

/* 02 — Orbit Nexus */
body:not(.tone-original) .layout-02 {
  --orbit-cyan:var(--tone-accent);
  --orbit-violet:var(--tone-accent-2);
  color:var(--tone-text-on-dark);
  background:radial-gradient(circle at 61% 48%,color-mix(in srgb,var(--tone-accent-strong) 38%,transparent),transparent 30%),var(--tone-bg-dark);
}
body:not(.tone-original) .layout-02 .orbit-hub {
  background:radial-gradient(circle,color-mix(in srgb,var(--tone-accent-strong) 72%,var(--tone-surface-dark)),var(--tone-bg-dark) 70%);
}
body:not(.tone-original) .layout-02 .orbit-node {
  color:var(--tone-text-on-dark);
  background:color-mix(in srgb,var(--tone-surface-dark) 92%,transparent);
  border-color:var(--tone-line-dark);
}
body:not(.tone-original) .layout-02 .orbit-node:hover,
body:not(.tone-original) .layout-02 .orbit-node.is-active,
body:not(.tone-original) .layout-02 .orbit-node:hover .orbit-node__monogram,
body:not(.tone-original) .layout-02 .orbit-node.is-active .orbit-node__monogram,
body:not(.tone-original) .layout-02 .orbit-panel__footer a {
  color:var(--tone-accent-ink);
}
body:not(.tone-original) .layout-02 .orbit-status,
body:not(.tone-original) .layout-02 .orbit-masthead__legend,
body:not(.tone-original) .layout-02 .orbit-intro>span,
body:not(.tone-original) .layout-02 .orbit-panel p,
body:not(.tone-original) .layout-02 .orbit-hub span,
body:not(.tone-original) .layout-02 .orbit-hub small {
  color:var(--tone-text-muted-dark);
}

/* 03 — Bento OS */
body:not(.tone-original) .layout-03 {
  --bento-ink:var(--tone-text-on-light);
  --bento-purple:var(--tone-accent-strong);
  color:var(--tone-text-on-light);
  background:var(--tone-bg-light);
}
body:not(.tone-original) .layout-03 .bento-hero {
  color:var(--tone-text-on-dark);
  background:linear-gradient(150deg,var(--tone-surface-dark),var(--tone-bg-dark));
}
body:not(.tone-original) .layout-03 .bento-hero h1 em { color:var(--tone-accent); }
body:not(.tone-original) .layout-03 .bento-hero>div p,
body:not(.tone-original) .layout-03 .bento-hero__lead { color:var(--tone-text-muted-dark); }
body:not(.tone-original) .layout-03 .bento-product--people {
  color:var(--tone-text-on-dark);
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone-accent-2) 42%,var(--tone-bg-dark)),var(--tone-accent-strong));
}
body:not(.tone-original) .layout-03 .bento-product--food {
  color:var(--tone-accent-ink);
  background:linear-gradient(145deg,var(--tone-accent),color-mix(in srgb,var(--tone-accent) 62%,var(--tone-accent-2)));
}
body:not(.tone-original) .layout-03 .bento-product--commerce {
  color:var(--tone-text-on-dark);
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone-accent-3) 42%,var(--tone-bg-dark)),var(--tone-accent-strong));
}
body:not(.tone-original) .layout-03 .bento-network { background:var(--tone-surface-light); }
body:not(.tone-original) .layout-03 .bento-update {
  color:var(--tone-text-on-light);
  background:color-mix(in srgb,var(--tone-accent) 24%,var(--tone-surface-light));
}
body:not(.tone-original) .layout-03 .bento-masthead>p,
body:not(.tone-original) .layout-03 .bento-statusbar { color:var(--tone-text-muted-light); }

/* 04 — Editorial Index */
body:not(.tone-original) .layout-04 {
  --index-paper:var(--tone-bg-light);
  --index-ink:var(--tone-text-on-light);
  --index-red:var(--tone-accent-strong);
}
body:not(.tone-original) .layout-04 .index-band { border-color:var(--tone-line-light); }
body:not(.tone-original) .layout-04 .index-band.is-active {
  color:#fff;
  background:var(--tone-accent-strong);
}
.layout-04 .index-band.is-active .index-band__identity small,
.layout-04 .index-band.is-active .index-band__copy p {
  color:#fff;
  opacity:1;
}
body:not(.tone-original) .layout-04 .index-band__panel a {
  color:var(--tone-text-on-light);
  background:var(--tone-surface-light);
}

/* 05 — Card Stage */
body:not(.tone-original) .layout-05 {
  --stage-ink:var(--tone-bg-dark);
  --stage-gold:var(--tone-accent);
  --stage-lilac:var(--tone-accent-2);
  color:var(--tone-text-on-dark);
  background:radial-gradient(circle at 54% 45%,color-mix(in srgb,var(--tone-accent-2) 35%,transparent),transparent 32%),linear-gradient(135deg,var(--tone-bg-dark),var(--tone-surface-dark) 58%,var(--tone-bg-dark));
}
body:not(.tone-original) .layout-05 .stage-card--people {
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone-accent-2) 42%,var(--tone-bg-dark)),var(--tone-accent-strong));
}
body:not(.tone-original) .layout-05 .stage-card--food {
  color:var(--tone-accent-ink);
  background:linear-gradient(145deg,var(--tone-accent),color-mix(in srgb,var(--tone-accent) 62%,var(--tone-accent-2)));
}
body:not(.tone-original) .layout-05 .stage-card--commerce {
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone-accent-3) 42%,var(--tone-bg-dark)),var(--tone-accent-strong));
}
body:not(.tone-original) .layout-05 .stage-footer,
body:not(.tone-original) .layout-05 .stage-masthead>p,
body:not(.tone-original) .layout-05 .stage-intro>span,
body:not(.tone-original) .layout-05 .stage-panel p { color:var(--tone-text-muted-dark); }
body:not(.tone-original) .layout-05 .stage-panel__features span { color:var(--tone-text-on-dark); }
body:not(.tone-original) .layout-05 .stage-brand__mark,
body:not(.tone-original) .layout-05 .stage-panel a { color:var(--tone-accent-ink); }

/* Canva-directed layouts 07–11 consume the shared tokens natively. */
body:not(.tone-original) .layout-07 {
  --atelier-gold:var(--tone-accent-on-dark);
  --atelier-gold-ink:var(--tone-accent-surface-ink);
}
body:not(.tone-original) .layout-08 {
  --pulse-accent:var(--tone-accent-on-dark);
  --pulse-accent-ink:var(--tone-accent-surface-ink);
}
body:not(.tone-original) .layout-09 {
  --play-accent:var(--tone-accent-on-light);
  --play-accent-ink:var(--tone-accent-surface-ink);
  --play-bg:var(--tone-bg-light);
  --play-ink:var(--tone-text-on-light);
  --play-muted:var(--tone-text-muted-light);
}
body:not(.tone-original) .layout-10 {
  --quiet-accent:var(--tone-accent-on-light);
  --quiet-accent-ink:var(--tone-accent-surface-ink);
  --quiet-bg:var(--tone-bg-light);
  --quiet-ink:var(--tone-text-on-light);
  --quiet-muted:var(--tone-text-muted-light);
}
body:not(.tone-original) .layout-11 {
  --bureau-accent:var(--tone-accent-on-light);
  --bureau-accent-ink:var(--tone-accent-surface-ink);
  --bureau-bg:color-mix(in srgb,var(--tone-accent) 6%,var(--tone-bg-light));
  --bureau-paper:var(--tone-surface-light);
  --bureau-ink:var(--tone-text-on-light);
  --bureau-muted:var(--tone-text-muted-light);
}

body:not(.tone-original) .promo-dialog__content>span {
  color:var(--tone-accent-on-light);
}
body:not(.tone-original) .promotion-card a,
body:not(.tone-original) .promo-dialog__item a,
body:not(.tone-original) .promo-dialog__footer button {
  color:var(--tone-accent-surface-ink);
  background:var(--tone-accent-surface);
}

@media (prefers-contrast:more) {
  body:not(.tone-original) .viewport-layout { --tone-text-muted-dark:var(--tone-text-on-dark); --tone-text-muted-light:var(--tone-text-on-light); }
}