/*
 * Libero · Sistema de diseño (S0) — tokens
 * Unica fuente de color, tipografia, espacio, radios, sombras y movimiento.
 * Regla: ningun literal de color (#hex, rgb(), hsl()) fuera de este fichero.
 * Sin dependencias, sin build. Modo oscuro automatico y anulable con [data-theme].
 */

:root {
  color-scheme: light dark;

  /* --- Color: neutro --- */
  --lb-bg: #f7f8fa;
  --lb-surface: #ffffff;
  --lb-surface-2: #eef1f4;
  --lb-text: #1b1f24;
  --lb-text-muted: #5c6570;
  --lb-border: #dfe3e8;
  --lb-border-strong: #c3cad2;

  /* --- Color: acento unico (verde archivo) --- */
  --lb-accent: #0b6e4f;
  --lb-accent-strong: #08543c;
  --lb-accent-soft: #e3f1eb;
  --lb-on-accent: #ffffff;

  /* --- Color: medalla (oro / plata / bronce) ---
   * Valores elegidos para cumplir contraste AA (>= 4.5:1) como texto
   * sobre --lb-surface claro. */
  --lb-gold: #7a5c00;
  --lb-gold-soft: #f6efd6;
  --lb-silver: #55606d;
  --lb-silver-soft: #e9edf1;
  --lb-bronze: #8a4a1c;
  --lb-bronze-soft: #f6e6da;

  /* --- Aviso / estado --- */
  --lb-warn-bg: #fdecea;
  --lb-warn-text: #8a1f18;
  --lb-warn-border: #f3c6c1;

  /* --- Foco --- */
  --lb-focus-ring: #08543c;
  --lb-focus-width: 2px;
  --lb-focus-offset: 2px;

  /* --- Sombras (color como token: unico literal) --- */
  --lb-shadow-color: rgba(15, 23, 42, 0.12);
  --lb-shadow-1: 0 1px 2px var(--lb-shadow-color);
  --lb-shadow-2: 0 6px 18px var(--lb-shadow-color);

  /* --- Tipografia: stacks del sistema con cobertura zh / hi (sin webfonts) --- */
  --lb-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Noto Sans SC", "Noto Sans TC", "Noto Sans Devanagari",
    "Nirmala UI", sans-serif;
  --lb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", "Noto Sans Mono", "Noto Sans Mono CJK SC",
    monospace;

  /* --- Tipografia: escala de 5 pasos --- */
  --lb-fs-xs: 0.78rem;
  --lb-fs-sm: 0.9rem;
  --lb-fs-md: 1rem;
  --lb-fs-lg: 1.3rem;
  --lb-fs-xl: 1.75rem;
  --lb-lh-tight: 1.25;
  --lb-lh: 1.5;
  --lb-weight-regular: 400;
  --lb-weight-medium: 500;
  --lb-weight-bold: 700;

  /* --- Espaciado: base 4 px --- */
  --lb-space-1: 0.25rem;
  --lb-space-2: 0.5rem;
  --lb-space-3: 0.75rem;
  --lb-space-4: 1rem;
  --lb-space-5: 1.25rem;
  --lb-space-6: 1.5rem;
  --lb-space-8: 2rem;
  --lb-space-10: 2.5rem;
  --lb-space-12: 3rem;

  /* --- Radios --- */
  --lb-radius-sm: 4px;
  --lb-radius: 8px;
  --lb-radius-lg: 12px;
  --lb-radius-pill: 999px;

  /* --- Medidas --- */
  --lb-measure: 68ch;
  --lb-tap: 44px;

  /* --- Movimiento --- */
  --lb-dur-1: 120ms;
  --lb-dur-2: 220ms;
  --lb-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Modo oscuro automatico, anulable con [data-theme="light"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lb-bg: #14181d;
    --lb-surface: #1d232b;
    --lb-surface-2: #252d37;
    --lb-text: #e8eaed;
    --lb-text-muted: #9aa4b0;
    --lb-border: #313a45;
    --lb-border-strong: #47535f;

    --lb-accent: #2ea87a;
    --lb-accent-strong: #3fc493;
    --lb-accent-soft: #14342a;
    --lb-on-accent: #0b1210;

    --lb-gold: #e0b84a;
    --lb-gold-soft: #33290f;
    --lb-silver: #b9c2cc;
    --lb-silver-soft: #262d34;
    --lb-bronze: #d68a4f;
    --lb-bronze-soft: #332314;

    --lb-warn-bg: #3a1d1b;
    --lb-warn-text: #f2b8b5;
    --lb-warn-border: #5c2f2b;

    --lb-focus-ring: #3fc493;
    --lb-shadow-color: rgba(0, 0, 0, 0.4);
  }
}

/* Modo oscuro forzado con atributo (gana a la preferencia del sistema). */
:root[data-theme="dark"] {
  --lb-bg: #14181d;
  --lb-surface: #1d232b;
  --lb-surface-2: #252d37;
  --lb-text: #e8eaed;
  --lb-text-muted: #9aa4b0;
  --lb-border: #313a45;
  --lb-border-strong: #47535f;

  --lb-accent: #2ea87a;
  --lb-accent-strong: #3fc493;
  --lb-accent-soft: #14342a;
  --lb-on-accent: #0b1210;

  --lb-gold: #e0b84a;
  --lb-gold-soft: #33290f;
  --lb-silver: #b9c2cc;
  --lb-silver-soft: #262d34;
  --lb-bronze: #d68a4f;
  --lb-bronze-soft: #332314;

  --lb-warn-bg: #3a1d1b;
  --lb-warn-text: #f2b8b5;
  --lb-warn-border: #5c2f2b;

  --lb-focus-ring: #3fc493;
  --lb-shadow-color: rgba(0, 0, 0, 0.4);
}

/* Respeto a prefers-reduced-motion: sin transiciones. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --lb-dur-1: 0ms;
    --lb-dur-2: 0ms;
  }
}