/*
 * The colour schemes of docs/design/50: every scheme fills the same roles, and
 * the layouts name one on <body>. A custom property resolves its var() where
 * it is declared, and the design tokens live on the themed body classes, so
 * the scheme has to sit on that same body for its roles to resolve.
 *
 * The tile fg colours are the design's circles; text on a tile takes
 * tile-N-text, ink or a light colour, whichever reaches 4.5:1 on that ground.
 */
:root {
  --pop-rose: #e0115f;
  --pop-pink: #ff007f;
  --pop-cyan: #00f5ff;
  --pop-white: #ffffff;
  --pop-blush: #ffd3e6;
  --pop-wine: #a30b45;
  --pop-ice: #c8fbff;
  --pop-teal: #0a6d75;
  --pop-peach: #e2a784;
  --pop-slate: #9bb7c4;
}

[data-scheme="gull"] {
  --scheme-hero-bg: transparent;
  --scheme-hero-fg: var(--color-text);
  --scheme-hero-dot: var(--color-accent);
  --scheme-hero-muted: var(--color-neutral-700);
  --scheme-hero-button: var(--color-text);
  --scheme-tile-1-bg: var(--color-accent-200);
  --scheme-tile-1-fg: var(--color-accent-800);
  --scheme-tile-1-text: var(--color-ink);
  --scheme-tile-2-bg: var(--color-accent-800);
  --scheme-tile-2-fg: var(--color-accent-200);
  --scheme-tile-2-text: var(--color-bg);
  --scheme-tile-3-bg: var(--color-neutral-200);
  --scheme-tile-3-fg: var(--color-accent);
  --scheme-tile-3-text: var(--color-ink);
  --scheme-tile-4-bg: var(--color-accent);
  --scheme-tile-4-fg: var(--color-bg);
  --scheme-tile-4-text: var(--color-ink);
  --scheme-word-1-bg: var(--color-accent-100);
  --scheme-word-1-fg: var(--color-accent-900);
  --scheme-word-2-bg: var(--color-neutral-900);
  --scheme-word-2-fg: var(--color-bg);
  --scheme-word-3-bg: var(--color-accent-300);
  --scheme-word-3-fg: var(--color-accent-900);
  --scheme-word-4-bg: var(--color-accent-800);
  --scheme-word-4-fg: var(--color-accent-100);
  --scheme-word-5-bg: var(--color-neutral-200);
  --scheme-word-5-fg: var(--color-neutral-900);
  --scheme-word-6-bg: var(--color-accent-200);
  --scheme-word-6-fg: var(--color-accent-900);
}

:root,
[data-scheme="gull-oransje"] {
  --scheme-hero-bg: var(--pop-peach);
  --scheme-hero-fg: var(--color-ink);
  --scheme-hero-dot: var(--color-accent-800);
  --scheme-hero-muted: color-mix(in srgb, var(--color-ink) 78%, transparent);
  --scheme-hero-button: var(--color-ink);
  --scheme-tile-1-bg: var(--color-accent-200);
  --scheme-tile-1-fg: var(--color-accent-800);
  --scheme-tile-1-text: var(--color-ink);
  --scheme-tile-2-bg: var(--color-accent-800);
  --scheme-tile-2-fg: var(--color-accent-200);
  --scheme-tile-2-text: var(--color-bg);
  --scheme-tile-3-bg: var(--color-neutral-200);
  --scheme-tile-3-fg: var(--color-accent);
  --scheme-tile-3-text: var(--color-ink);
  --scheme-tile-4-bg: var(--color-accent);
  --scheme-tile-4-fg: var(--color-bg);
  --scheme-tile-4-text: var(--color-ink);
  --scheme-word-1-bg: var(--color-accent-100);
  --scheme-word-1-fg: var(--color-accent-900);
  --scheme-word-2-bg: var(--color-neutral-900);
  --scheme-word-2-fg: var(--color-bg);
  --scheme-word-3-bg: var(--color-accent-300);
  --scheme-word-3-fg: var(--color-accent-900);
  --scheme-word-4-bg: var(--color-accent-800);
  --scheme-word-4-fg: var(--color-accent-100);
  --scheme-word-5-bg: var(--color-neutral-200);
  --scheme-word-5-fg: var(--color-neutral-900);
  --scheme-word-6-bg: var(--color-accent-200);
  --scheme-word-6-fg: var(--color-accent-900);
}

[data-scheme="gull-blaa"] {
  --scheme-hero-bg: var(--pop-slate);
  --scheme-hero-fg: var(--color-ink);
  --scheme-hero-dot: var(--color-accent-800);
  --scheme-hero-muted: color-mix(in srgb, var(--color-ink) 78%, transparent);
  --scheme-hero-button: var(--color-ink);
  --scheme-tile-1-bg: var(--color-accent-200);
  --scheme-tile-1-fg: var(--color-accent-800);
  --scheme-tile-1-text: var(--color-ink);
  --scheme-tile-2-bg: var(--color-accent-800);
  --scheme-tile-2-fg: var(--color-accent-200);
  --scheme-tile-2-text: var(--color-bg);
  --scheme-tile-3-bg: var(--color-neutral-200);
  --scheme-tile-3-fg: var(--color-accent);
  --scheme-tile-3-text: var(--color-ink);
  --scheme-tile-4-bg: var(--color-accent);
  --scheme-tile-4-fg: var(--color-bg);
  --scheme-tile-4-text: var(--color-ink);
  --scheme-word-1-bg: var(--color-accent-100);
  --scheme-word-1-fg: var(--color-accent-900);
  --scheme-word-2-bg: var(--color-neutral-900);
  --scheme-word-2-fg: var(--color-bg);
  --scheme-word-3-bg: var(--color-accent-300);
  --scheme-word-3-fg: var(--color-accent-900);
  --scheme-word-4-bg: var(--color-accent-800);
  --scheme-word-4-fg: var(--color-accent-100);
  --scheme-word-5-bg: var(--color-neutral-200);
  --scheme-word-5-fg: var(--color-neutral-900);
  --scheme-word-6-bg: var(--color-accent-200);
  --scheme-word-6-fg: var(--color-accent-900);
}

[data-scheme="blekk"] {
  --scheme-hero-bg: transparent;
  --scheme-hero-fg: var(--color-text);
  --scheme-hero-dot: var(--color-accent);
  --scheme-hero-muted: var(--color-neutral-700);
  --scheme-hero-button: var(--color-text);
  --scheme-tile-1-bg: var(--color-neutral-200);
  --scheme-tile-1-fg: var(--color-neutral-900);
  --scheme-tile-1-text: var(--color-ink);
  --scheme-tile-2-bg: var(--color-neutral-900);
  --scheme-tile-2-fg: var(--color-bg);
  --scheme-tile-2-text: var(--color-bg);
  --scheme-tile-3-bg: var(--color-accent-200);
  --scheme-tile-3-fg: var(--color-neutral-900);
  --scheme-tile-3-text: var(--color-ink);
  --scheme-tile-4-bg: var(--color-neutral-700);
  --scheme-tile-4-fg: var(--color-accent-200);
  --scheme-tile-4-text: var(--color-bg);
  --scheme-word-1-bg: var(--color-neutral-100);
  --scheme-word-1-fg: var(--color-neutral-900);
  --scheme-word-2-bg: var(--color-neutral-900);
  --scheme-word-2-fg: var(--color-bg);
  --scheme-word-3-bg: var(--color-neutral-300);
  --scheme-word-3-fg: var(--color-neutral-900);
  --scheme-word-4-bg: var(--color-accent-200);
  --scheme-word-4-fg: var(--color-neutral-900);
  --scheme-word-5-bg: var(--color-neutral-700);
  --scheme-word-5-fg: var(--color-bg);
  --scheme-word-6-bg: var(--color-neutral-200);
  --scheme-word-6-fg: var(--color-neutral-900);
}

[data-scheme="marilyn-rosa"] {
  --scheme-hero-bg: var(--pop-rose);
  --scheme-hero-fg: var(--pop-white);
  --scheme-hero-dot: var(--pop-cyan);
  --scheme-hero-muted: var(--pop-white);
  --scheme-hero-button: var(--color-ink);
  --scheme-tile-1-bg: var(--pop-cyan);
  --scheme-tile-1-fg: var(--pop-rose);
  --scheme-tile-1-text: var(--color-ink);
  --scheme-tile-2-bg: var(--color-ink);
  --scheme-tile-2-fg: var(--pop-pink);
  --scheme-tile-2-text: var(--color-bg);
  --scheme-tile-3-bg: var(--pop-pink);
  --scheme-tile-3-fg: var(--pop-cyan);
  --scheme-tile-3-text: var(--color-ink);
  --scheme-tile-4-bg: var(--color-accent);
  --scheme-tile-4-fg: var(--color-ink);
  --scheme-tile-4-text: var(--color-ink);
  --scheme-word-1-bg: var(--pop-rose);
  --scheme-word-1-fg: var(--pop-white);
  --scheme-word-2-bg: var(--color-ink);
  --scheme-word-2-fg: var(--pop-cyan);
  --scheme-word-3-bg: var(--pop-cyan);
  --scheme-word-3-fg: var(--color-ink);
  --scheme-word-4-bg: var(--pop-pink);
  --scheme-word-4-fg: var(--color-ink);
  --scheme-word-5-bg: var(--color-accent);
  --scheme-word-5-fg: var(--color-ink);
  --scheme-word-6-bg: var(--pop-blush);
  --scheme-word-6-fg: var(--pop-wine);
}

[data-scheme="marilyn-turkis"] {
  --scheme-hero-bg: var(--pop-cyan);
  --scheme-hero-fg: var(--color-ink);
  --scheme-hero-dot: var(--pop-rose);
  --scheme-hero-muted: color-mix(in srgb, var(--color-ink) 78%, transparent);
  --scheme-hero-button: var(--color-ink);
  --scheme-tile-1-bg: var(--pop-rose);
  --scheme-tile-1-fg: var(--pop-cyan);
  --scheme-tile-1-text: var(--pop-white);
  --scheme-tile-2-bg: var(--pop-cyan);
  --scheme-tile-2-fg: var(--pop-pink);
  --scheme-tile-2-text: var(--color-ink);
  --scheme-tile-3-bg: var(--color-ink);
  --scheme-tile-3-fg: var(--pop-cyan);
  --scheme-tile-3-text: var(--color-bg);
  --scheme-tile-4-bg: var(--pop-pink);
  --scheme-tile-4-fg: var(--color-ink);
  --scheme-tile-4-text: var(--color-ink);
  --scheme-word-1-bg: var(--pop-cyan);
  --scheme-word-1-fg: var(--color-ink);
  --scheme-word-2-bg: var(--color-ink);
  --scheme-word-2-fg: var(--pop-cyan);
  --scheme-word-3-bg: var(--pop-pink);
  --scheme-word-3-fg: var(--pop-white);
  --scheme-word-4-bg: var(--pop-ice);
  --scheme-word-4-fg: var(--pop-teal);
  --scheme-word-5-bg: var(--pop-rose);
  --scheme-word-5-fg: var(--pop-white);
  --scheme-word-6-bg: var(--color-accent);
  --scheme-word-6-fg: var(--color-ink);
}