/*
 * 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-subtle: #e7eaee;
  --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 y elevacion (color como token: unico literal) --- */
  --lb-shadow-color: rgba(15, 23, 42, 0.12);
  --lb-shadow-soft: rgba(15, 23, 42, 0.07);
  --lb-shadow-1: 0 1px 2px var(--lb-shadow-color);
  --lb-shadow-2: 0 6px 18px var(--lb-shadow-color);
  /* Elevacion 1/2: superficies en reposo y en flotacion (submenus, modal). */
  --lb-elev-1: 0 1px 2px var(--lb-shadow-soft), 0 1px 3px var(--lb-shadow-soft);
  --lb-elev-2: 0 10px 30px var(--lb-shadow-soft), 0 2px 6px var(--lb-shadow-soft);

  /* --- Velo del modal (fondo tras el dialogo) --- */
  --lb-scrim: rgba(15, 23, 42, 0.55);

  /* --- 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 fluida (cada paso con clamp) ---
   * micro · secundario · cuerpo · subtitulo · titulo · display:
   *   micro=xs · secundario=sm · cuerpo=md · subtitulo=lg · titulo=xl/2xl
   *   · display=3xl. El interlineado y el peso acompanan al tamano. */
  --lb-fs-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
  --lb-fs-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --lb-fs-md: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --lb-fs-lg: clamp(1.1rem, 1.02rem + 0.45vw, 1.32rem);
  --lb-fs-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --lb-fs-2xl: clamp(1.7rem, 1.3rem + 1.9vw, 2.6rem);
  --lb-fs-3xl: clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
  --lb-lh-display: 1.08;
  --lb-lh-tight: 1.25;
  --lb-lh: 1.55;
  --lb-lh-loose: 1.7;
  --lb-tracking-tight: -0.01em;
  --lb-tracking-wide: 0.06em;
  --lb-weight-regular: 400;
  --lb-weight-medium: 500;
  --lb-weight-semibold: 600;
  --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;
  /* Ritmo vertical fluido: flujo entre bloques y respiro entre secciones. */
  --lb-flow: clamp(0.75rem, 0.55rem + 0.7vw, 1.05rem);
  --lb-section-gap: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);

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

  /* --- Medidas --- */
  --lb-measure: 68ch;
  --lb-tap: 44px;
  --lb-container: 70rem;
  --lb-gutter: clamp(1rem, 0.6rem + 2.2vw, 2rem);
  /* Altura de la barra inferior movil (reserva de relleno, no la tapa). */
  --lb-tabbar-h: 3.5rem;

  /* --- 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: #12161b;
    --lb-surface: #1b2129;
    --lb-surface-2: #232b35;
    --lb-text: #e9ecef;
    --lb-text-muted: #9aa5b1;
    --lb-border: #303945;
    --lb-border-subtle: #262e38;
    --lb-border-strong: #48535f;

    --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.45);
    --lb-shadow-soft: rgba(0, 0, 0, 0.35);
    --lb-scrim: rgba(0, 0, 0, 0.65);
  }
}

/* Modo oscuro forzado con atributo (gana a la preferencia del sistema). */
:root[data-theme="dark"] {
  --lb-bg: #12161b;
  --lb-surface: #1b2129;
  --lb-surface-2: #232b35;
  --lb-text: #e9ecef;
  --lb-text-muted: #9aa5b1;
  --lb-border: #303945;
  --lb-border-subtle: #262e38;
  --lb-border-strong: #48535f;

  --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.45);
  --lb-shadow-soft: rgba(0, 0, 0, 0.35);
  --lb-scrim: rgba(0, 0, 0, 0.65);
}

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