/* ==============================================================================
   DESIGN TOKENS — skin "sobria" (the default) and the dark-mode variant
   every skin redefines the same way.

   Three blocks, in this order, is the whole no-flash mechanism (see the
   drolosoft-theming/drolosoft-tema-oscuro skills): :root carries the LIGHT
   values, which is also skin "sobria" and theme "light" without needing an
   attribute at all; :root[data-theme="dark"] wins unconditionally, whatever
   the OS says, the moment a visitor picked dark explicitly; the
   @media(prefers-color-scheme:dark) block is scoped to
   :root:not([data-theme="light"]) so it only ever affects "auto" (the
   default) or a missing attribute, never an explicit light choice. A bare
   :root{} inside that media query would be the one defect this shape
   exists to avoid — it would leak dark mode onto a visitor who chose light.

   skins.css does the same thing again under [data-skin="calida"] and
   [data-skin="noche"], later in main.css's import order so it wins the
   cascade on the equal-specificity ties with the blocks below.
   ============================================================================== */

:root {
  /* --------------------------------------------------------------------
     Spacing: 4-8-12-16-24-32-48-64, the scale every future component
     should reach for directly. --spacing-xs..xl are the names the
     existing layout/component sheets already call var() with (task 5);
     they alias the numbered scale instead of duplicating it, so neither
     set of names can drift from the other.
     -------------------------------------------------------------------- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */

  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-5);
  --spacing-xl: var(--space-6);

  /* Radii: 4/inputs/chips, 8/buttons/cards, 12/large cards, pill for
     anything meant to read as fully round (the slideshow's dot and
     prev/next/toggle controls, all already square, so a large radius
     rounds them exactly like 50% would). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Typography: system stacks only, zero bytes downloaded. --font-title
     is what skins.css actually varies per skin (a distinctive trait
     without a webfont); --font-text stays the same everywhere so body
     copy never changes rhythm when the skin does. */
  --font-title: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

  /* A fluid scale so headline sizes never jump at a breakpoint; the base
     size stays a plain rem; the browser's own root font-size still drives
     it, so a visitor's zoom or font preference is respected. */
  --font-size-base: 1rem;
  --font-size-lg: clamp(1.05rem, 1rem + 0.3vw, 1.15rem);
  --font-size-hero: clamp(1.75rem, 1.4rem + 2vw, 2.75rem);

  /* Color roles — background, surface, text, muted text, accent, border,
     focus — the eight things a skin actually has to redefine. sobria's
     own values are the palette the demo already shipped with (task 5),
     kept byte-for-byte so this move never changes what a visitor sees. */
  --page-bg: #f0f0f0;
  --paper-bg: #ffffff;
  --paper-secondary-bg: #f5f5f5;

  --text-primary: #1a1a1a;
  --text-secondary: #333333;
  --text-muted: #666666;

  --border-color: #333333;
  --border-light: #e0e0e0;

  --accent-blue: #0066cc;
  --accent-green: #27ae60;
  /* The ring every :focus-visible outline uses; same value as the accent
     in every skin so a keyboard user learns one colour for "this is
     interactive/focused" across the whole demo. */
  --focus-ring: var(--accent-blue);
  /* Text colour for anything painted ON --accent-blue (a solid button):
     white reads fine over sobria's #0066cc, but every dark block below
     brightens the accent for its OTHER job (readable link text on a dark
     surface) to the point where white-on-accent drops under 3:1. Button
     text and link text are different contrast rules against different
     backgrounds, so they get their own token instead of sharing one. */
  --accent-contrast: #ffffff;
  /* Form errors (.form-error/.form-alert text, the [aria-invalid] border):
     this single value already clears 4.5:1 against every skin's
     --page-bg and --paper-bg in light (5.32-6.54:1, see
     task-6-report.md), so unlike --accent-blue it does not need a
     per-skin override — only the theme block below changes it. Status
     colours read as themselves across a brand's skins; that is what
     keeps "error" recognisable everywhere on the site. */
  --color-danger: #b3261e;
  /* The admin's notices (.flash-success/.flash-error in admin.css). Error
     is the form error colour under a status name, so the two can never
     drift apart; success follows --color-danger's rule of one pair for
     every skin: #1b6e36 clears 5.03:1 against every skin's --page-bg,
     --paper-bg and --paper-secondary-bg in light, and the dark value
     below 7.41:1 against theirs in dark. */
  --color-error: var(--color-danger);
  --color-success: #1b6e36;

  --action-bar-bg: #2b2b2b;
  --action-bar-text: #ffffff;
  --action-bar-text-muted: rgba(255, 255, 255, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.1);
  --action-bar-active-bg: rgba(255, 255, 255, 0.15);

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

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

  --transition-normal: 0.3s ease;

  --z-toast: 1100;

  /* Reading width the header, the page's blocks and the footer all
     share, so a paragraph of body copy never stretches wider than is
     comfortable to read on a desktop screen. */
  --content-max-width: 72rem;
}

/* Explicit dark, sobria: wins over the OS unconditionally. Values carried
   over from the demo's previous [data-color-theme="dark"] block (task 5),
   contrast-checked again for task 6 (see task-6-report.md): text-primary
   10.87:1, text-muted 6.62:1, accent-blue 4.88:1, all against paper-bg. */
:root[data-theme="dark"] {
  --page-bg: #1a1a1a;
  --paper-bg: #2a2a2a;
  --paper-secondary-bg: #333333;

  --text-primary: #e0e0e0;
  --text-secondary: #d0d0d0;
  --text-muted: #b0b0b0;

  --border-color: #404040;
  --border-light: #333333;

  --accent-blue: #3399ff;
  --accent-green: #2ecc71;
  --focus-ring: var(--accent-blue);
  /* #1a1a1a is this block's own --page-bg: 5.92:1 against #3399ff. */
  --accent-contrast: #1a1a1a;
  /* 10.19:1 against this block's --page-bg, 8.41:1 against --paper-bg. */
  --color-danger: #f2b8b5;
  --color-success: #8fd6a4;

  --action-bar-bg: #0a0a0a;
  --action-bar-text: #e0e0e0;
  --action-bar-text-muted: rgba(224, 224, 224, 0.85);
  --action-bar-hover-bg: rgba(255, 255, 255, 0.05);
  --action-bar-active-bg: rgba(255, 255, 255, 0.1);

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

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
}

/* "auto" (the default) or no attribute at all follows the OS; an explicit
   light choice is excluded by :not([data-theme="light"]) so it can never
   be overridden here, and an explicit dark choice already got its values,
   unconditionally, from the block above regardless of what the OS says. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #1a1a1a;
    --paper-bg: #2a2a2a;
    --paper-secondary-bg: #333333;

    --text-primary: #e0e0e0;
    --text-secondary: #d0d0d0;
    --text-muted: #b0b0b0;

    --border-color: #404040;
    --border-light: #333333;

    --accent-blue: #3399ff;
    --accent-green: #2ecc71;
    --focus-ring: var(--accent-blue);
    --accent-contrast: #1a1a1a;
    --color-danger: #f2b8b5;
    --color-success: #8fd6a4;

    --action-bar-bg: #0a0a0a;
    --action-bar-text: #e0e0e0;
    --action-bar-text-muted: rgba(224, 224, 224, 0.85);
    --action-bar-hover-bg: rgba(255, 255, 255, 0.05);
    --action-bar-active-bg: rgba(255, 255, 255, 0.1);

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

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  }
}