/* Palettes: the colour of the site, in two dimensions, and the way back from both.
 *
 * WHY THIS EXISTS. Todor, 2026-09-18: a way to try colours and roll them back; then,
 * having seen the first four: more suggestions, "including the dark ones on the header
 * and below, with buttons to switch to lighter ones".
 *
 * TWO AXES, NOT A LIST. The accent and the darkness of the surfaces are independent
 * questions, and a flat list of presets forces every combination to be drawn by hand.
 * So there are two attributes on <html>, and they multiply: eight accents against six
 * surfaces is forty-eight looks from fourteen buttons.
 *
 *   data-accent   the one colour that carries meaning: links, buttons, the logo, the
 *                 map's lines, the accent word in a headline. Also the hero's two
 *                 light washes, because they are the accent used as light.
 *   data-surface  the dark end of the page: the header, the hero, the proof strip, the
 *                 CTA band, the footer, every card on a dark section -- and the hero
 *                 ramp's two solid stops.
 *
 * HOW IT WORKS. Every colour on this site already comes from a custom property, and
 * custom properties resolve at USE time, so redefining a handful of them under an
 * attribute selector repaints the whole site -- both apps, every component -- without a
 * single selector in theme.css changing. The same mechanism as .theme-light, one level up.
 *
 * THE ROLLBACK IS THE POINT. Nothing here is destructive: the defaults (accent 'cyan',
 * surface 'navy') ARE the tokens as shipped, so setting them back is the whole undo,
 * whatever was tried. 'palette_switcher' => false in content.php removes the picker;
 * deleting this file and the content keys removes the experiment.
 *
 * WHAT A PALETTE MAY NOT REDEFINE: the text colours. Those are contrast decisions rather
 * than taste, and every surface below was checked against them -- the lightest of them,
 * 'mist', still puts secondary text at about 5:1 on its own cards.
 *
 * THE ONE RULE THAT IS NOT TASTE: --hero-deep must stay darker than --surface-dark. The
 * map draws its land in --surface-dark and assumes the surface behind it is darker; the
 * first version of the hero ramp broke that and the map washed out.
 */

/* =========================================================================
   ACCENTS. The pair is always (on dark, on light): the second is the first
   darkened until it passes on white, because BRAND.md 3 forbids the bright
   one on a light surface. The two washes are the accent as light in the hero.
   ========================================================================= */

/* cloudwall.bg's own accent. It uses #0F766E on light and #14B8A6 for the logo
   on dark -- the same pair of roles our two cyan tokens have, so it maps one
   for one with nothing invented. */
:root[data-accent="teal"] {
  --cyan: #14B8A6; --cyan-deep: #0F766E;
  --hero-wash: rgba(20, 184, 166, .11); --hero-floor: rgba(15, 118, 110, .09);
}
:root[data-accent="emerald"] {
  --cyan: #10B981; --cyan-deep: #047857;
  --hero-wash: rgba(16, 185, 129, .12); --hero-floor: rgba(4, 120, 87, .09);
}
/* Bright and unmistakably a signal colour -- reads as a terminal prompt. */
:root[data-accent="lime"] {
  --cyan: #A3E635; --cyan-deep: #4D7C0F;
  --hero-wash: rgba(163, 230, 53, .10); --hero-floor: rgba(77, 124, 15, .10);
}
:root[data-accent="sky"] {
  --cyan: #38BDF8; --cyan-deep: #0369A1;
  --hero-wash: rgba(56, 189, 248, .11); --hero-floor: rgba(3, 105, 161, .10);
}
:root[data-accent="indigo"] {
  --cyan: #818CF8; --cyan-deep: #4F46E5;
  --hero-wash: rgba(129, 140, 248, .12); --hero-floor: rgba(79, 70, 229, .10);
}
:root[data-accent="violet"] {
  --cyan: #C084FC; --cyan-deep: #7E22CE;
  --hero-wash: rgba(192, 132, 252, .12); --hero-floor: rgba(126, 34, 206, .10);
}
/* Warm, and the only one that reads as a filament rather than a screen. */
:root[data-accent="amber"] {
  --cyan: #FBBF24; --cyan-deep: #B45309;
  --hero-wash: rgba(251, 191, 36, .10); --hero-floor: rgba(180, 83, 9, .09);
}
/* Deliberately included to be rejected: it is the colour of an alert, and the
   site already uses red-adjacent language for attacks. Worth seeing once. */
:root[data-accent="coral"] {
  --cyan: #FB7185; --cyan-deep: #BE123C;
  --hero-wash: rgba(251, 113, 133, .11); --hero-floor: rgba(190, 18, 60, .09);
}

/* =========================================================================
   SURFACES. 'navy' is the shipped tokens. The rest move the whole dark end
   of the page together -- background, cards, borders and the hero ramp's two
   solid stops -- because lifting one without the others just flattens the
   depth between them.
   ========================================================================= */

/* One step lighter than shipped: the page reads less like a void, cards still
   separate from the background. */
:root[data-surface="slate"] {
  --navy: #131C30; --navy-deep: #0D1526;
  --surface-dark: #1B2540; --border-dark: #2A3758; --border-dark-soft: #212D4B;
  --hero-lit: #24395A; --hero-mid: #18253F;
}
/* The lightest of them, and the limit: secondary text is about 5:1 on the
   cards here, so nothing lighter can carry this text scale. */
:root[data-surface="mist"] {
  --navy: #1B2438; --navy-deep: #141C2D;
  --surface-dark: #243049; --border-dark: #35456A; --border-dark-soft: #2A3757;
  --hero-lit: #33496E; --hero-mid: #243250;
}
/* No blue at all. Hardware grey -- it makes the accent do all the colour work,
   which is the most "instrument panel" of the six. */
:root[data-surface="graphite"] {
  --navy: #15171A; --navy-deep: #0F1113;
  --surface-dark: #1D2024; --border-dark: #2C3036; --border-dark-soft: #23262B;
  --hero-lit: #2A2F36; --hero-mid: #1D2126;
}
/* Deeper than shipped, for the opposite comparison: the map and the accent
   gain contrast, the page loses the little depth the ramp gives it. */
:root[data-surface="ink"] {
  --navy: #05070C; --navy-deep: #020409;
  --surface-dark: #0B101D; --border-dark: #16203A; --border-dark-soft: #101829;
  --hero-lit: #0F1A2E; --hero-mid: #0A1120;
}
/* The other reading of "swap the blue for the green": the surfaces stop being
   blue rather than the accent changing. Pair it with teal or emerald. */
:root[data-surface="forest"] {
  --navy: #091611; --navy-deep: #060F0C;
  --surface-dark: #10231B; --border-dark: #1D3B2E; --border-dark-soft: #152C22;
  --hero-lit: #15503C; --hero-mid: #0D3328;
}