/* ==============================================================================
   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 --color-danger either: tokens.css's single pair
   (#b3261e light / #f2b8b5 dark) already clears 4.5:1 against every
   skin's own --page-bg and --paper-bg (5.32-6.54:1 light, 8.4-11.2:1
   dark — see task-6-report.md), so it inherits from :root/the theme
   blocks there instead of being repeated six more times here.
   ============================================================================== */

/* --------------------------------------------------------------------------
   "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);

  --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);
}

[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;

  --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);
}

@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;

    --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);
  }
}

/* --------------------------------------------------------------------------
   "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);

  --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);
}

[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;

  --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);
}

@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;

    --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);
  }
}