/* =============================================================================
   Design tokens — WikiRiffs · FUENTE ÚNICA de la marca.
   Lo consumen TODAS las superficies (landing www, app, author, docs, emails).
   Cambia la marca aquí, no en cada página. NO renombres/elimines variables del
   contrato; añade nuevas si hace falta, pero no quites las existentes.

   Dirección de marca: "Estudio analógico" — cálida, de taller (madera de
   guitarra + latón/ámbar de válvulas). Nace en oscuro (se estudia con la
   guitarra al lado); variante clara accesible. Todo par texto/fondo cumple AA.
   ============================================================================= */

:root {
  /* --- Marca -------------------------------------------------------------- */
  --brand-name: "WikiRiffs";

  /* Color de marca — ámbar sobre carbón cálido */
  --color-primary:        #e08a3c;   /* ámbar: acento y fills (botones) */
  --color-primary-contrast:#14110e;  /* texto sobre primary: carbón (AA ~6.6:1) */
  --color-secondary:      #7a4a2b;   /* madera */
  --color-accent:         #e0b84c;   /* latón */

  /* Semánticos (afinados a cálido) */
  --color-success: #3e9e5e;
  --color-warning: #c98a1e;
  --color-danger:  #c0392c;
  --color-info:    #d08a3c;

  /* Neutros / superficies (tema OSCURO = por defecto de la marca) */
  --color-bg:        #14110e;   /* carbón cálido */
  --color-surface:   #1e1a15;
  --color-border:    #33291f;
  --color-text:      #f0e9de;   /* AA muy holgado sobre bg */
  --color-text-muted:#b7a890;

  /* --- Tipografía (fuentes del sistema, cero carga) ---------------------- */
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-size-base: 16px;
  --scale-sm:  0.875rem;
  --scale-md:  1rem;
  --scale-lg:  1.25rem;
  --scale-xl:  1.75rem;
  --scale-2xl: 2.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold:   700;
  --line-height: 1.55;

  /* --- Espaciado (escala de 4px) ----------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Formas ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1080px;
  --transition: 160ms ease;
}

/* Tema CLARO: papel cálido. Se activa con preferencia del sistema o [data-theme="light"].
   Como la marca nace oscura, el claro se declara explícitamente aquí. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg:        #fbf7ef;   /* papel cálido */
    --color-surface:   #f2eadd;
    --color-border:    #e2d6c3;
    --color-text:      #241c12;   /* AA muy holgado sobre bg */
    --color-text-muted:#6b5d4b;
    --shadow-sm: 0 1px 2px rgba(48, 32, 16, 0.08);
    --shadow-md: 0 4px 12px rgba(48, 32, 16, 0.12);
  }
}
:root[data-theme="light"] {
  --color-bg:        #fbf7ef;
  --color-surface:   #f2eadd;
  --color-border:    #e2d6c3;
  --color-text:      #241c12;
  --color-text-muted:#6b5d4b;
  --shadow-sm: 0 1px 2px rgba(48, 32, 16, 0.08);
  --shadow-md: 0 4px 12px rgba(48, 32, 16, 0.12);
}

/* Reafirma el oscuro cuando se fuerza con [data-theme="dark"] */
:root[data-theme="dark"] {
  --color-bg:        #14110e;
  --color-surface:   #1e1a15;
  --color-border:    #33291f;
  --color-text:      #f0e9de;
  --color-text-muted:#b7a890;
}