/* Pauta · tokens.css
   GENERADO desde tokens.json con build/build-css.mjs. No editar a mano: edita el JSON y regenera.
   Comprobación de paridad JSON/CSS y de contraste: node build/check.mjs

   Uso: <link rel="stylesheet" href="tokens.css">
   Tema: sigue prefers-color-scheme; [data-theme="light"] o [data-theme="dark"] en <html> (o en cualquier
   contenedor) lo fuerzan. Los tokens de color se repiten en cada bloque de tema a propósito: así un
   contenedor con data-theme dentro de otra página resuelve sus alias (state-*, focus) con su propio tema.

   Tipografía: cargar Archivo (SIL OFL 1.1) con ejes de ancho y peso:
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap" rel="stylesheet">
*/

/* Escalas que no cambian con el tema */
:root {
  --font-family-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  --font-stretch-normal: 100%;
  --font-stretch-wide: 125%;

  --type-display-size: clamp(32px, 9.71px + 5.714vw, 92px);
  --type-display-size-min: 32px;
  --type-display-weight: var(--font-weight-black);
  --type-display-stretch: var(--font-stretch-wide);
  --type-display-leading: 0.98;
  --type-display-tracking: -0.02em;

  --type-title-size: clamp(22px, 15.31px + 1.714vw, 40px);
  --type-title-size-min: 22px;
  --type-title-weight: var(--font-weight-bold);
  --type-title-stretch: var(--font-stretch-wide);
  --type-title-leading: 1.05;
  --type-title-tracking: -0.01em;

  --type-lead-size: clamp(18px, 17.26px + 0.19vw, 20px);
  --type-lead-weight: var(--font-weight-regular);
  --type-lead-stretch: var(--font-stretch-normal);
  --type-lead-leading: 1.45;
  --type-lead-tracking: 0em;

  --type-text-size: 16px;
  --type-text-weight: var(--font-weight-regular);
  --type-text-stretch: var(--font-stretch-normal);
  --type-text-leading: 1.55;
  --type-text-tracking: 0em;

  --type-small-size: 14px;
  --type-small-weight: var(--font-weight-medium);
  --type-small-stretch: var(--font-stretch-normal);
  --type-small-leading: 1.4;
  --type-small-tracking: 0em;

  --type-numeric: tabular-nums lining-nums;

  --grid-block: 48px;

  --grid-module: 12px;

  --grid-submodule: 4px;

  --space-4: var(--grid-submodule);

  --space-8: 8px;

  --space-12: var(--grid-module);

  --space-16: 16px;

  --space-24: 24px;

  --space-32: 32px;

  --space-48: var(--grid-block);

  --space-72: 72px;

  --space-96: 96px;

  --radius-none: 0px;

  --radius-round: 9999px;

  --size-target: 44px;

  --size-icon: 16px;

  --size-icon-lg: 24px;

  --size-avatar: 40px;

  --size-border: 1px;

  --size-ring: 2px;

  --size-ring-offset: 2px;

  --size-logo-min: 16px;

  --size-logo-bar: 24px;

  --size-logo-clear-ratio: 0.291;

  --size-symbol-min: 24px;

  --size-favicon-sm: 16px;

  --size-favicon-lg: 32px;

  --size-nav-bar: 72px;

  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 360ms;

  --motion-ease-pass: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-stop: cubic-bezier(0.7, 0, 0.84, 0);

  --wall-block: 32px;

  --wall-block-min: 16px;

  --wall-block-max: 48px;

  --wall-joint-ratio: 0.25;
}

/* Tema · claro (por defecto): color y sombra de capa */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-bg: #E4E2DD;

  --color-surface: #F7F7F5;

  --color-ink: #1A1E1C;

  --color-ink-2: #4A504D;

  --color-joint: #CFCCC5;

  --color-brand: #1E5B47;

  --color-brand-hover: #17493A;

  --color-on-brand: #F7F7F5;

  --color-sun: #C9963A;

  --color-on-sun: #1A1E1C;

  --color-danger: #B3261E;

  --color-on-danger: #F7F7F5;

  --color-focus: var(--color-brand);

  --color-channel-email: #8A1A55;

  --color-on-channel-email: #F7F7F5;

  --color-avatar-bg: #1E5B47;

  --color-avatar-fg: #F7F7F5;

  --color-state-ok-field: var(--color-brand);

  --color-state-ok-on: var(--color-on-brand);

  --color-state-wait-field: var(--color-sun);

  --color-state-wait-on: var(--color-on-sun);

  --color-state-block-field: var(--color-danger);

  --color-state-block-on: var(--color-on-danger);

  --color-state-info-field: var(--color-joint);

  --color-state-info-on: var(--color-ink);

  --color-logo: #1A1E1C;

  --color-wall-a-fg: var(--color-brand);

  --color-wall-a-bg: var(--color-bg);

  --color-wall-b-fg: var(--color-avatar-fg);

  --color-wall-b-bg: var(--color-avatar-bg);

  --color-wall-c-fg: var(--color-sun);

  --color-wall-c-bg: var(--color-avatar-bg);

  --size-overlay-border: 0px;

  --shadow-overlay: 0 12px 32px rgba(26, 30, 28, 0.18);
}

/* Tema · oscuro por preferencia del sistema, salvo que la página fuerce claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #121614;
  
    --color-surface: #1C221F;
  
    --color-ink: #ECEBE6;
  
    --color-ink-2: #AEB3AF;
  
    --color-joint: #2A322E;
  
    --color-brand: #7CC4A8;
  
    --color-brand-hover: #9AD6BD;
  
    --color-on-brand: #121614;
  
    --color-sun: #D6A54A;
  
    --color-on-sun: #121614;
  
    --color-danger: #F2877B;
  
    --color-on-danger: #121614;
  
    --color-focus: var(--color-brand);
  
    --color-channel-email: #E683B8;
  
    --color-on-channel-email: #121614;
  
    --color-avatar-bg: #1E5B47;
  
    --color-avatar-fg: #F7F7F5;
  
    --color-state-ok-field: var(--color-brand);
  
    --color-state-ok-on: var(--color-on-brand);
  
    --color-state-wait-field: var(--color-sun);
  
    --color-state-wait-on: var(--color-on-sun);
  
    --color-state-block-field: var(--color-danger);
  
    --color-state-block-on: var(--color-on-danger);
  
    --color-state-info-field: var(--color-joint);
  
    --color-state-info-on: var(--color-ink);
  
    --color-logo: #F7F7F5;
  
    --color-wall-a-fg: var(--color-brand);
  
    --color-wall-a-bg: var(--color-bg);
  
    --color-wall-b-fg: var(--color-avatar-fg);
  
    --color-wall-b-bg: var(--color-avatar-bg);
  
    --color-wall-c-fg: var(--color-sun);
  
    --color-wall-c-bg: var(--color-avatar-bg);
  
    --size-overlay-border: 1px;
  
    --shadow-overlay: none;
  }
}

/* Tema · oscuro forzado */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #121614;

  --color-surface: #1C221F;

  --color-ink: #ECEBE6;

  --color-ink-2: #AEB3AF;

  --color-joint: #2A322E;

  --color-brand: #7CC4A8;

  --color-brand-hover: #9AD6BD;

  --color-on-brand: #121614;

  --color-sun: #D6A54A;

  --color-on-sun: #121614;

  --color-danger: #F2877B;

  --color-on-danger: #121614;

  --color-focus: var(--color-brand);

  --color-channel-email: #E683B8;

  --color-on-channel-email: #121614;

  --color-avatar-bg: #1E5B47;

  --color-avatar-fg: #F7F7F5;

  --color-state-ok-field: var(--color-brand);

  --color-state-ok-on: var(--color-on-brand);

  --color-state-wait-field: var(--color-sun);

  --color-state-wait-on: var(--color-on-sun);

  --color-state-block-field: var(--color-danger);

  --color-state-block-on: var(--color-on-danger);

  --color-state-info-field: var(--color-joint);

  --color-state-info-on: var(--color-ink);

  --color-logo: #F7F7F5;

  --color-wall-a-fg: var(--color-brand);

  --color-wall-a-bg: var(--color-bg);

  --color-wall-b-fg: var(--color-avatar-fg);

  --color-wall-b-bg: var(--color-avatar-bg);

  --color-wall-c-fg: var(--color-sun);

  --color-wall-c-bg: var(--color-avatar-bg);

  --size-overlay-border: 1px;

  --shadow-overlay: none;
}

/* Movimiento reducido: el cambio de estado queda (color, foco), el desplazamiento desaparece */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}