/* ==============================================================================
   PALETTES — the colours of the site, one palette for the light mode and
   one for the dark mode (skill temas-por-color, path C; ADR-042). <html>
   carries data-theme (auto, light, dark), data-skin-light and
   data-skin-dark, all three painted by the server on the first byte. The
   mode is the visitor's (the cookie theme); the two palettes are the
   site's (siteSkins in internal/handlers), the same for every visitor.

   Linked right after tokens.css, which since ADR-042 declares no colour
   at all: every colour token of the site lives here, and a component
   sheet only ever reads var(--paper-bg), var(--text-muted) and the rest.
   Spacing, radii, type and motion are shared chrome in tokens.css; a
   palette is colour only. The few tokens that are not a hex value but
   still only say how something is tinted on this ground (the shadows,
   the filter that whitens the mark's black PNG, the filter that darkens
   the map) are here too, since they change with the paper.

   Each palette is written three times, and the blocks of one palette
   declare the same tokens (palettes_test.go fails otherwise):
   :root[data-skin-light="x"] its light values (0,2,0, always on);
   :root[data-skin-dark="x"][data-theme="dark"] its dark values when dark
   was chosen by hand (0,3,0); and, under prefers-color-scheme: dark,
   :root[data-skin-dark="x"]:not([data-theme="light"]) its dark values
   when the OS asks for dark and nobody chose light (0,3,0, "auto"
   included). In dark both dark blocks carry one attribute more than any
   light block, so the dark palette wins whatever the order. A bare :root
   inside the media query would turn an explicit light choice dark: the
   :not() is the whole point.

   Contrast, checked in Go on these very values (palettes_test.go) and in
   the browser on what they paint (tests/e2e/contrast.spec.mjs), for every
   palette in light, dark chosen and dark from the OS: ink, secondary,
   grey, the states and the action bar's text at 4.5:1 or more on the
   grounds they are drawn on; the control edge and the focus ring at 3:1.
   A palette that cannot reach that is removed, never let through.
   ============================================================================== */

/* --------------------------------------------------------------------------
   "estudio" — the site's own identity and the default of both modes
   (prefs.DefaultSkinLight, prefs.DefaultSkinDark). Light is Furnitor's
   Home 3 in Modo B as ADR-040 left it: white paper, black ink, a grey
   for what is quieter, a hairline, the warm beige band and the footer's
   light grey. The añil paints the focus ring and nothing else; links and
   buttons are ink. Dark is the same page inverted with judgement
   (ADR-042): a near-black page under a slightly lighter paper, so the
   fixed header and the cards still lift off it, off-white ink rather
   than pure white, the beige turned into a warm dark brown and a lighter
   añil for the ring.
   Light, on the paper: ink 21:1, secondary 15.43:1, grey 5.17:1 (4.79:1
   on the footer), control edge 3.45:1, ring 8.29:1.
   Dark, on the paper: ink 15.55:1, grey 6.90:1 (7.17:1 on the footer,
   5.93:1 on the band), control edge 4.05:1, ring 7.00:1.
   -------------------------------------------------------------------------- */
:root[data-skin-light="estudio"] {
  color-scheme: light;

  /* The beige band (the theme's --accent), the footer's bg-color-2 and
     the breadcrumb band's bg-color-3, a hair paler; every other palette
     paints its breadcrumbs on its footer's grey. The grey does not reach
     4.5:1 on the beige (4.12:1), so text on it is ink or secondary. The
     veil is the white of the mosaic's overlay, the paper at 90 % over a
     photo. */
  --page-bg: #ffffff;
  --paper-bg: #ffffff;
  --paper-secondary-bg: #ece4de;
  --paper-tertiary-bg: #f6f6f6;
  --paper-crumbs-bg: #f7f7f7;
  --paper-veil: rgba(255, 255, 255, 0.9);

  /* The theme's #777 and #999 do not reach 4.5:1 on white; #6d6d6d is the
     lightest grey that does. */
  --text-primary: #000000;
  --text-secondary: #212529;
  --text-muted: #6d6d6d;

  /* A control's line at 3:1 (WCAG 1.4.11); the hairline is decoration. */
  --border-color: #8a8a8a;
  --border-light: #e4e4e4;

  --accent-blue: #2b47a3;
  --accent-green: #27ae60;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #ffffff;
  --link-color: var(--text-primary);

  --color-danger: #b3261e;
  --color-success: #1b6e36;

  /* The admin's bar, the one place still drawn in this colour: ink, so
     the back office reads as a tool laid over the paper. */
  --action-bar-bg: #1e1d1b;
  --action-bar-text: #fbfbf9;
  --action-bar-text-muted: rgba(251, 251, 249, 0.85);
  --action-bar-hover-bg: rgba(251, 251, 249, 0.1);
  --action-bar-active-bg: rgba(251, 251, 249, 0.16);

  --button-bg-hover: rgba(0, 0, 0, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --mark-filter: none;
  --map-filter: none;
}

:root[data-skin-dark="estudio"][data-theme="dark"] {
  color-scheme: dark;

  /* Paper one step above the page, the footer between the two; the
     beige becomes a warm dark brown that still reads as the same band. */
  --page-bg: #121212;
  --paper-bg: #1a1a1a;
  --paper-secondary-bg: #2b2622;
  --paper-tertiary-bg: #161616;
  --paper-crumbs-bg: #161616;
  --paper-veil: rgba(26, 26, 26, 0.9);

  /* Off-white, not #fff, which glares on a dark page; the grey keeps
     6.90:1 on the paper. */
  --text-primary: #f2f2f2;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;

  --border-color: #7a7a7a;
  --border-light: #2a2a2a;

  /* The lighter añil, 7.00:1 on the paper; text on it is the page's
     near-black (7.54:1). */
  --accent-blue: #8c9eff;
  --accent-green: #2ecc71;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #121212;
  --link-color: var(--text-primary);

  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #0a0a0a;
  --action-bar-text: #f2f2f2;
  --action-bar-text-muted: rgba(242, 242, 242, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
  --action-bar-active-bg: rgba(255, 255, 255, 0.12);

  --button-bg-hover: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

  /* The capital of the mark is a black PNG, white once inverted on a
     dark paper; the map is inverted and turned back to its hues, a little
     dimmed (map.css keeps its marker out of the filter). */
  --mark-filter: invert(1);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

@media (prefers-color-scheme: dark) {
  :root[data-skin-dark="estudio"]:not([data-theme="light"]) {
    color-scheme: dark;

    /* Paper one step above the page, the footer between the two; the
       beige becomes a warm dark brown that still reads as the same band. */
    --page-bg: #121212;
    --paper-bg: #1a1a1a;
    --paper-secondary-bg: #2b2622;
    --paper-tertiary-bg: #161616;
    --paper-crumbs-bg: #161616;
    --paper-veil: rgba(26, 26, 26, 0.9);

    /* Off-white, not #fff, which glares on a dark page; the grey keeps
       6.90:1 on the paper. */
    --text-primary: #f2f2f2;
    --text-secondary: #d4d4d4;
    --text-muted: #a3a3a3;

    --border-color: #7a7a7a;
    --border-light: #2a2a2a;

    /* The lighter añil, 7.00:1 on the paper; text on it is the page's
       near-black (7.54:1). */
    --accent-blue: #8c9eff;
    --accent-green: #2ecc71;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #121212;
    --link-color: var(--text-primary);

    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #0a0a0a;
    --action-bar-text: #f2f2f2;
    --action-bar-text-muted: rgba(242, 242, 242, 0.85);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
    --action-bar-active-bg: rgba(255, 255, 255, 0.12);

    --button-bg-hover: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

    /* The capital of the mark is a black PNG, white once inverted on a
       dark paper; the map is inverted and turned back to its hues, a little
       dimmed (map.css keeps its marker out of the filter). */
    --mark-filter: invert(1);
    --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}

/* --------------------------------------------------------------------------
   "calida" — warm paper tones, from the template's skin of the same
   name, its type left to the site (a palette is colour only). Its dark
   control edge was #55442f, 1.70:1 on its paper: raised to #8f7a62.
   -------------------------------------------------------------------------- */
:root[data-skin-light="calida"] {
  color-scheme: light;

  --page-bg: #f7f1e8;
  --paper-bg: #fffaf3;
  --paper-secondary-bg: #f0e4d3;
  --paper-tertiary-bg: #f4ece0;
  --paper-crumbs-bg: #f4ece0;
  --paper-veil: rgba(255, 250, 243, 0.9);

  --text-primary: #2a1e12;
  --text-secondary: #4a3524;
  --text-muted: #7a6650;

  --border-color: #6b5842;
  --border-light: #e3d5c0;

  --accent-blue: #a0430f;
  --accent-green: #27ae60;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #ffffff;
  --link-color: var(--text-primary);

  --color-danger: #b3261e;
  --color-success: #1b6e36;

  --action-bar-bg: #3a2a1a;
  --action-bar-text: #fdf6ec;
  --action-bar-text-muted: rgba(253, 246, 236, 0.85);
  --action-bar-hover-bg: rgba(253, 246, 236, 0.12);
  --action-bar-active-bg: rgba(253, 246, 236, 0.18);

  --button-bg-hover: rgba(43, 29, 15, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --mark-filter: none;
  --map-filter: none;
}

:root[data-skin-dark="calida"][data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #1f1712;
  --paper-bg: #2b2018;
  --paper-secondary-bg: #362a1f;
  --paper-tertiary-bg: #241b15;
  --paper-crumbs-bg: #241b15;
  --paper-veil: rgba(43, 32, 24, 0.9);

  --text-primary: #f3e9dc;
  --text-secondary: #e0d2c0;
  --text-muted: #b8a68f;

  --border-color: #8f7a62;
  --border-light: #3a2d20;

  --accent-blue: #e08a3c;
  --accent-green: #2ecc71;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #1f1712;
  --link-color: var(--text-primary);

  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #120c08;
  --action-bar-text: #f3e9dc;
  --action-bar-text-muted: rgba(243, 233, 220, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.08);
  --action-bar-active-bg: rgba(255, 255, 255, 0.14);

  --button-bg-hover: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

  --mark-filter: invert(1);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

@media (prefers-color-scheme: dark) {
  :root[data-skin-dark="calida"]:not([data-theme="light"]) {
    color-scheme: dark;

    --page-bg: #1f1712;
    --paper-bg: #2b2018;
    --paper-secondary-bg: #362a1f;
    --paper-tertiary-bg: #241b15;
    --paper-crumbs-bg: #241b15;
    --paper-veil: rgba(43, 32, 24, 0.9);

    --text-primary: #f3e9dc;
    --text-secondary: #e0d2c0;
    --text-muted: #b8a68f;

    --border-color: #8f7a62;
    --border-light: #3a2d20;

    --accent-blue: #e08a3c;
    --accent-green: #2ecc71;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #1f1712;
    --link-color: var(--text-primary);

    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #120c08;
    --action-bar-text: #f3e9dc;
    --action-bar-text-muted: rgba(243, 233, 220, 0.85);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.08);
    --action-bar-active-bg: rgba(255, 255, 255, 0.14);

    --button-bg-hover: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

    --mark-filter: invert(1);
    --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}

/* --------------------------------------------------------------------------
   "noche" — a cool slate even in light, a near-black navy in dark,
   from the template's skin. Its dark control edge was #2c3a52, 1.52:1 on
   its paper: raised to #6a7a94; its light grey, #5b6b80, gave 4.43:1 on
   its page and went to #55657a (4.84:1).
   -------------------------------------------------------------------------- */
:root[data-skin-light="noche"] {
  color-scheme: light;

  --page-bg: #e4e8ef;
  --paper-bg: #f7f9fc;
  --paper-secondary-bg: #dde3ec;
  --paper-tertiary-bg: #eef1f6;
  --paper-crumbs-bg: #eef1f6;
  --paper-veil: rgba(247, 249, 252, 0.9);

  --text-primary: #10151f;
  --text-secondary: #2b3646;
  --text-muted: #55657a;

  --border-color: #33415a;
  --border-light: #d3dbe6;

  --accent-blue: #4b3fc7;
  --accent-green: #27ae60;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #ffffff;
  --link-color: var(--text-primary);

  --color-danger: #b3261e;
  --color-success: #1b6e36;

  --action-bar-bg: #1b2436;
  --action-bar-text: #f7f9fc;
  --action-bar-text-muted: rgba(247, 249, 252, 0.85);
  --action-bar-hover-bg: rgba(247, 249, 252, 0.1);
  --action-bar-active-bg: rgba(247, 249, 252, 0.16);

  --button-bg-hover: rgba(16, 21, 31, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --mark-filter: none;
  --map-filter: none;
}

:root[data-skin-dark="noche"][data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #0b0f17;
  --paper-bg: #131a26;
  --paper-secondary-bg: #1b2434;
  --paper-tertiary-bg: #0f141e;
  --paper-crumbs-bg: #0f141e;
  --paper-veil: rgba(19, 26, 38, 0.9);

  --text-primary: #e7ecf5;
  --text-secondary: #c7d0de;
  --text-muted: #93a1b5;

  --border-color: #6a7a94;
  --border-light: #1f293a;

  --accent-blue: #8f8bff;
  --accent-green: #2ecc71;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #0b0f17;
  --link-color: var(--text-primary);

  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #05070c;
  --action-bar-text: #e7ecf5;
  --action-bar-text-muted: rgba(231, 236, 245, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
  --action-bar-active-bg: rgba(255, 255, 255, 0.12);

  --button-bg-hover: rgba(255, 255, 255, 0.05);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

  --mark-filter: invert(1);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

@media (prefers-color-scheme: dark) {
  :root[data-skin-dark="noche"]:not([data-theme="light"]) {
    color-scheme: dark;

    --page-bg: #0b0f17;
    --paper-bg: #131a26;
    --paper-secondary-bg: #1b2434;
    --paper-tertiary-bg: #0f141e;
    --paper-crumbs-bg: #0f141e;
    --paper-veil: rgba(19, 26, 38, 0.9);

    --text-primary: #e7ecf5;
    --text-secondary: #c7d0de;
    --text-muted: #93a1b5;

    --border-color: #6a7a94;
    --border-light: #1f293a;

    --accent-blue: #8f8bff;
    --accent-green: #2ecc71;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #0b0f17;
    --link-color: var(--text-primary);

    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #05070c;
    --action-bar-text: #e7ecf5;
    --action-bar-text-muted: rgba(231, 236, 245, 0.85);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
    --action-bar-active-bg: rgba(255, 255, 255, 0.12);

    --button-bg-hover: rgba(255, 255, 255, 0.05);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

    --mark-filter: invert(1);
    --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}

/* --------------------------------------------------------------------------
   "tinta" — warm greys, an ink of #1f1d1b on an off-white paper, the
   idea of auris's tinta without its navy bar, and a warm brown for the
   ring.
   -------------------------------------------------------------------------- */
:root[data-skin-light="tinta"] {
  color-scheme: light;

  --page-bg: #f4f2ef;
  --paper-bg: #fbfaf8;
  --paper-secondary-bg: #e8e3dc;
  --paper-tertiary-bg: #efece8;
  --paper-crumbs-bg: #efece8;
  --paper-veil: rgba(251, 250, 248, 0.9);

  --text-primary: #1f1d1b;
  --text-secondary: #3d3935;
  --text-muted: #67615a;

  --border-color: #847d75;
  --border-light: #e2ddd6;

  --accent-blue: #7a4e2d;
  --accent-green: #27ae60;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #ffffff;
  --link-color: var(--text-primary);

  --color-danger: #b3261e;
  --color-success: #1b6e36;

  --action-bar-bg: #1f1d1b;
  --action-bar-text: #f4f2ef;
  --action-bar-text-muted: rgba(244, 242, 239, 0.85);
  --action-bar-hover-bg: rgba(244, 242, 239, 0.1);
  --action-bar-active-bg: rgba(244, 242, 239, 0.16);

  --button-bg-hover: rgba(31, 29, 27, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --mark-filter: none;
  --map-filter: none;
}

:root[data-skin-dark="tinta"][data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #171615;
  --paper-bg: #1f1d1b;
  --paper-secondary-bg: #2c2925;
  --paper-tertiary-bg: #1b1a18;
  --paper-crumbs-bg: #1b1a18;
  --paper-veil: rgba(31, 29, 27, 0.9);

  --text-primary: #ece8e3;
  --text-secondary: #d3cdc5;
  --text-muted: #a69f96;

  --border-color: #7d766e;
  --border-light: #2f2c29;

  --accent-blue: #d9a37a;
  --accent-green: #2ecc71;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #171615;
  --link-color: var(--text-primary);

  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #0e0d0c;
  --action-bar-text: #ece8e3;
  --action-bar-text-muted: rgba(236, 232, 227, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
  --action-bar-active-bg: rgba(255, 255, 255, 0.12);

  --button-bg-hover: rgba(255, 255, 255, 0.06);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

  --mark-filter: invert(1);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

@media (prefers-color-scheme: dark) {
  :root[data-skin-dark="tinta"]:not([data-theme="light"]) {
    color-scheme: dark;

    --page-bg: #171615;
    --paper-bg: #1f1d1b;
    --paper-secondary-bg: #2c2925;
    --paper-tertiary-bg: #1b1a18;
    --paper-crumbs-bg: #1b1a18;
    --paper-veil: rgba(31, 29, 27, 0.9);

    --text-primary: #ece8e3;
    --text-secondary: #d3cdc5;
    --text-muted: #a69f96;

    --border-color: #7d766e;
    --border-light: #2f2c29;

    --accent-blue: #d9a37a;
    --accent-green: #2ecc71;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #171615;
    --link-color: var(--text-primary);

    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #0e0d0c;
    --action-bar-text: #ece8e3;
    --action-bar-text-muted: rgba(236, 232, 227, 0.85);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.06);
    --action-bar-active-bg: rgba(255, 255, 255, 0.12);

    --button-bg-hover: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

    --mark-filter: invert(1);
    --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}

/* --------------------------------------------------------------------------
   "maxcontraste" — pure black and pure white, as auris's palette of
   the same name, for whoever needs the most contrast: every line is the
   ink, the band and the footer are the paper. The ring is yellow, the
   high-contrast convention; on white a pure yellow gives 1.3:1, so the
   light ring is a dark gold (4.92:1) and the dark one the full yellow
   (14.67:1).
   -------------------------------------------------------------------------- */
:root[data-skin-light="maxcontraste"] {
  color-scheme: light;

  --page-bg: #ffffff;
  --paper-bg: #ffffff;
  --paper-secondary-bg: #ffffff;
  --paper-tertiary-bg: #ffffff;
  --paper-crumbs-bg: #ffffff;
  --paper-veil: rgba(255, 255, 255, 0.95);

  --text-primary: #000000;
  --text-secondary: #000000;
  --text-muted: #2b2b2b;

  --border-color: #000000;
  --border-light: #000000;

  --accent-blue: #8a6d00;
  --accent-green: #1b6e36;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #ffffff;
  --link-color: var(--text-primary);

  --color-danger: #b3261e;
  --color-success: #1b6e36;

  --action-bar-bg: #000000;
  --action-bar-text: #ffffff;
  --action-bar-text-muted: rgba(255, 255, 255, 0.9);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.16);
  --action-bar-active-bg: rgba(255, 255, 255, 0.24);

  --button-bg-hover: rgba(0, 0, 0, 0.08);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 2px 2px 9px rgba(0, 0, 0, 0.5);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

  --mark-filter: none;
  --map-filter: none;
}

:root[data-skin-dark="maxcontraste"][data-theme="dark"] {
  color-scheme: dark;

  --page-bg: #000000;
  --paper-bg: #000000;
  --paper-secondary-bg: #000000;
  --paper-tertiary-bg: #000000;
  --paper-crumbs-bg: #000000;
  --paper-veil: rgba(0, 0, 0, 0.95);

  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #d6d6d6;

  --border-color: #ffffff;
  --border-light: #ffffff;

  --accent-blue: #ffd400;
  --accent-green: #8fd6a4;
  --focus-ring: var(--accent-blue);
  --accent-contrast: #000000;
  --link-color: var(--text-primary);

  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #000000;
  --action-bar-text: #ffffff;
  --action-bar-text-muted: rgba(255, 255, 255, 0.9);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.16);
  --action-bar-active-bg: rgba(255, 255, 255, 0.24);

  --button-bg-hover: rgba(255, 255, 255, 0.1);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
  --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

  --mark-filter: invert(1);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

@media (prefers-color-scheme: dark) {
  :root[data-skin-dark="maxcontraste"]:not([data-theme="light"]) {
    color-scheme: dark;

    --page-bg: #000000;
    --paper-bg: #000000;
    --paper-secondary-bg: #000000;
    --paper-tertiary-bg: #000000;
    --paper-crumbs-bg: #000000;
    --paper-veil: rgba(0, 0, 0, 0.95);

    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #d6d6d6;

    --border-color: #ffffff;
    --border-light: #ffffff;

    --accent-blue: #ffd400;
    --accent-green: #8fd6a4;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #000000;
    --link-color: var(--text-primary);

    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #000000;
    --action-bar-text: #ffffff;
    --action-bar-text-muted: rgba(255, 255, 255, 0.9);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.16);
    --action-bar-active-bg: rgba(255, 255, 255, 0.24);

    --button-bg-hover: rgba(255, 255, 255, 0.1);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-header: 0 0.5rem 1rem rgba(0, 0, 0, 0.6);

    --mark-filter: invert(1);
    --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}