/* ==============================================================================
   SKINS — "calida" and "noche" redefine only the tokens tokens.css already
   declares under :root, so every component sheet that already consumes a
   token (var(--paper-bg), var(--text-muted), …) picks up a skin with zero
   changes of its own. Neither skin touches --spacing-*, --radius-* or
   --shadow-* on purpose: the layout and the elevation system are shared
   chrome, not part of a skin's identity, exactly as frontend-craft
   recommends ("brand accent colours usually stay identical across
   themes" — here extended to the skins, which are visual identities more
   than colour themes).

   Each skin repeats tokens.css's three-block shape: the plain
   [data-skin="…"] selector for its light values (the default and also
   what "light" resolves to), an explicit [data-skin="…"][data-theme="dark"]
   block that wins whatever the OS says, and the OS-driven block scoped to
   :not([data-theme="light"]) so an explicit light choice on that skin can
   never be pulled into dark by a visitor's OS.

   Neither skin redefines --accent-green, --accent-contrast (in light),
   --color-danger or --color-success either: they inherit sobria's from
   tokens.css, which were measured against these skins too (2026-10-13).
   Light: the plum danger 7.1:1 at worst on calida's surfaces and 7.3:1 on
   noche's, the dark apple green 5.6:1 / 5.7:1, the off-white button text
   5.9:1 on calida's terracotta and 6.9:1 on noche's violet. Dark: the
   orchid danger 8.7:1 / 9.7:1 and the apple green 10.8:1 / 12.0:1.

   sobria's slate (13 October 2026) is not part of these skins: each block
   gives the header and footer bands its own old bar colour through
   --chrome-bg/--chrome-text, and the buttons, the calendar band and the
   focus ring on the bands go back to the skin's accent, the pairs that
   were already measured here.

   Before the skins, sobria's own component palettes: the few colours that
   live in a component sheet rather than in tokens.css.
   ============================================================================== */

/* --------------------------------------------------------------------------
   sobria's component palettes (2026-10-13). The calendar tile and the
   Mapbox popup carry their own small palettes (events.css, map.css), and
   those defaults are still the dark wine of the old red skin; here they
   take the Enyesque violet instead. Scoped to sobria so calida and noche
   keep exactly what they had.
   -------------------------------------------------------------------------- */

/* The tile is a near-white page, the same in both modes, so it reads on
   the aqua page and on the violet one alike. Ink 12.5:1, the weekday
   6.5:1; the band is the accent with its own contrast token (10.3:1 light,
   10.6:1 dark); the lilac edge is decoration, the shadow does the lift. */
[data-skin="sobria"] .event__tile,
[data-skin="sobria"] .featured__sheet {
  --calendar-paper: #f8fcfc;
  --calendar-ink: #3d2a47;
  --calendar-muted: #685574;
  --calendar-edge: #a998b5;
}

/* Mapbox's popup stays white: ink 13.0:1, date 6.7:1, link 11.1:1. */
[data-skin="sobria"] .map__popup {
  --popup-ink: #3d2a47;
  --popup-muted: #685574;
  --popup-link: #4a3356;
}

/* The photo viewer is black in every skin. sobria's light accent is the
   dark violet, 1.7:1 on that frame, so inside the viewer the counter and
   the focus ring take the aquamarine of the dark mode (13.1:1). */
[data-skin="sobria"] .lightbox {
  --accent-blue: #a8e0da;
  --focus-ring: #a8e0da;
}

/* --------------------------------------------------------------------------
   "calida" — warm paper tones, a serif system stack for titles. Contrast
   checked against paper-bg (see task-6-report.md): text-primary 15.64:1,
   text-muted 5.26:1, accent 6.12:1 in light; 13.23:1 / 6.72:1 / 5.95:1 in
   dark.
   -------------------------------------------------------------------------- */
[data-skin="calida"] {
  --font-title: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;

  --page-bg: #f7f1e8;
  --paper-bg: #fffaf3;
  --paper-secondary-bg: #f0e4d3;

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

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

  --accent-blue: #a0430f;
  --focus-ring: var(--accent-blue);

  --chrome-bg: #3a2a1a;
  --chrome-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);
  --button-bg: var(--accent-blue);
  --button-text: var(--accent-contrast);
  --chrome-focus-ring: var(--focus-ring);
}

[data-skin="calida"][data-theme="dark"] {
  --page-bg: #1f1712;
  --paper-bg: #2b2018;
  --paper-secondary-bg: #362a1f;

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

  --border-color: #55442f;
  --border-light: #3a2d20;

  --accent-blue: #e08a3c;
  --focus-ring: var(--accent-blue);
  /* #1f1712 is this block's own --page-bg: 6.62:1 against #e08a3c. */
  --accent-contrast: #1f1712;

  --chrome-bg: #120c08;
  --chrome-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);
  --button-bg: var(--accent-blue);
  --button-text: var(--accent-contrast);
  --chrome-focus-ring: var(--focus-ring);
}

@media (prefers-color-scheme: dark) {
  [data-skin="calida"]:not([data-theme="light"]) {
    --page-bg: #1f1712;
    --paper-bg: #2b2018;
    --paper-secondary-bg: #362a1f;

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

    --border-color: #55442f;
    --border-light: #3a2d20;

    --accent-blue: #e08a3c;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #1f1712;

    --chrome-bg: #120c08;
    --chrome-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);
    --button-bg: var(--accent-blue);
    --button-text: var(--accent-contrast);
    --chrome-focus-ring: var(--focus-ring);
  }
}

/* --------------------------------------------------------------------------
   "noche" — a cool slate identity even in its light mode (the skin is
   named after the night, so its "day" is already a moodier neutral than
   sobria's), going to a true near-black navy in dark. Contrast checked
   against paper-bg: text-primary 17.33:1, text-muted 5.16:1, accent
   7.02:1 in light; 14.72:1 / 6.65:1 / 6.07:1 in dark.
   -------------------------------------------------------------------------- */
[data-skin="noche"] {
  --page-bg: #e4e8ef;
  --paper-bg: #f7f9fc;
  --paper-secondary-bg: #e9edf4;

  --text-primary: #10151f;
  --text-secondary: #2b3646;
  --text-muted: #5b6b80;

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

  --accent-blue: #4b3fc7;
  --focus-ring: var(--accent-blue);

  --chrome-bg: #1b2436;
  --chrome-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);
  --button-bg: var(--accent-blue);
  --button-text: var(--accent-contrast);
  --chrome-focus-ring: var(--focus-ring);
}

[data-skin="noche"][data-theme="dark"] {
  --page-bg: #0b0f17;
  --paper-bg: #131a26;
  --paper-secondary-bg: #1b2434;

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

  --border-color: #2c3a52;
  --border-light: #1f293a;

  --accent-blue: #8f8bff;
  --focus-ring: var(--accent-blue);
  /* #0b0f17 is this block's own --page-bg: 6.67:1 against #8f8bff. */
  --accent-contrast: #0b0f17;

  --chrome-bg: #05070c;
  --chrome-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);
  --button-bg: var(--accent-blue);
  --button-text: var(--accent-contrast);
  --chrome-focus-ring: var(--focus-ring);
}

@media (prefers-color-scheme: dark) {
  [data-skin="noche"]:not([data-theme="light"]) {
    --page-bg: #0b0f17;
    --paper-bg: #131a26;
    --paper-secondary-bg: #1b2434;

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

    --border-color: #2c3a52;
    --border-light: #1f293a;

    --accent-blue: #8f8bff;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #0b0f17;

    --chrome-bg: #05070c;
    --chrome-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);
    --button-bg: var(--accent-blue);
    --button-text: var(--accent-contrast);
    --chrome-focus-ring: var(--focus-ring);
  }
}