/* ==============================================================================
   SKINS — "calida", "noche" and "estudio" 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. No skin touches --spacing-*,
   --radius-* or --shadow-* on purpose: the layout and the elevation
   system are shared chrome, not part of a skin's identity, 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);
  }
}

/* --------------------------------------------------------------------------
   "estudio" — this site's own identity and its default (data/site.json,
   doc/07-DISENO.md): lime-wash paper, ink, a warm granite grey and one
   accent, the añil blue of Extremadura's whitewashed plinths, kept for
   whatever can be clicked or is focused. Unlike the other skins it also
   sets the body face and size: the two webfonts of fonts.css and a body
   that grows from 16 to 18px, since the type is half of the identity.
   Contrast measured against page-bg / paper-bg (doc/07 has the full
   table): text-primary 15.15 / 16.26:1, text-muted 5.96 / 6.40:1, accent
   7.46 / 8.00:1 in light; 14.91 / 13.69:1, 7.34 / 6.73:1 and 9.09 /
   8.34:1 in dark.
   -------------------------------------------------------------------------- */
[data-skin="estudio"] {
  /* The fallbacks after each webfont are the system stacks tokens.css
     uses, so the swap period and a failed download still look tidy. */
  --font-title: 'Big Shoulders Display', 'Arial Narrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);

  --page-bg: #f3f3f0;
  --paper-bg: #fbfbf9;
  --paper-secondary-bg: #e7e5df;

  --text-primary: #1e1d1b;
  --text-secondary: #3b3934;
  --text-muted: #615c54;

  --border-color: #8a8479;
  --border-light: #d9d6ce;

  --accent-blue: #2b47a3;
  --focus-ring: var(--accent-blue);
  /* 8.00:1 on the accent: the paper itself, not pure white. */
  --accent-contrast: #fbfbf9;

  /* The admin bar is the one place still drawn in this bar 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(30, 29, 27, 0.06);
}

[data-skin="estudio"][data-theme="dark"] {
  --page-bg: #171716;
  --paper-bg: #201f1d;
  --paper-secondary-bg: #2a2926;

  --text-primary: #eceae4;
  --text-secondary: #d3d0c8;
  --text-muted: #aba59b;

  --border-color: #6e695f;
  --border-light: #34322e;

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

  --action-bar-bg: #0f0f0e;
  --action-bar-text: #eceae4;
  --action-bar-text-muted: rgba(236, 234, 228, 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);
}

@media (prefers-color-scheme: dark) {
  [data-skin="estudio"]:not([data-theme="light"]) {
    --page-bg: #171716;
    --paper-bg: #201f1d;
    --paper-secondary-bg: #2a2926;

    --text-primary: #eceae4;
    --text-secondary: #d3d0c8;
    --text-muted: #aba59b;

    --border-color: #6e695f;
    --border-light: #34322e;

    --accent-blue: #a9b6f0;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #171716;

    --action-bar-bg: #0f0f0e;
    --action-bar-text: #eceae4;
    --action-bar-text-muted: rgba(236, 234, 228, 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);
  }
}