/*
  Albura · tokens de marca como variables CSS (v1.0, noviembre 2026)
  Derivado de albura-tokens.json. Si cambia un valor, cambiarlo primero ahí.
  Reglas de uso: ver DESIGN.md en la raíz de concepto-resto.

  Cargar antes: fonts/fonts.css (tipografías autoalojadas).
*/

:root {
  /* Paleta. Los componentes NO usan estas variables: usan los roles de abajo. */
  --albura-caliza: #F2EEE6;
  --albura-piedra: #D9D3C7;
  --albura-ceniza: #B8B1A4;
  --albura-bruma: #645F58;
  --albura-grafito: #2B2A28;
  --albura-calafate: #5A2533;
  --albura-liquen: #5F6347;

  /* Roles · modo claro (web) */
  --albura-bg: var(--albura-caliza);
  --albura-surface: var(--albura-piedra);
  --albura-fg: var(--albura-grafito);
  --albura-fg-muted: var(--albura-bruma);        /* nunca sobre --albura-surface */
  --albura-line: var(--albura-piedra);
  --albura-line-strong: var(--albura-grafito);
  --albura-border-control: var(--albura-bruma);
  --albura-accent: var(--albura-calafate);
  --albura-accent-hover: var(--albura-grafito);
  --albura-on-accent: var(--albura-caliza);
  --albura-season: var(--albura-liquen);
  --albura-focus: var(--albura-grafito);

  /* Familias */
  --albura-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --albura-sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Escala tipográfica: usar como `font: var(--albura-text-…)` */
  --albura-text-display: 200 72px/1 var(--albura-serif);
  --albura-text-title: 300 40px/1.15 var(--albura-serif);
  --albura-text-heading: 300 28px/1.2 var(--albura-serif);
  --albura-text-dish: 400 24px/1.25 var(--albura-serif);
  --albura-text-origin: italic 400 16px/1.4 var(--albura-serif);
  --albura-text-body: 400 16px/1.55 var(--albura-sans);
  --albura-text-body-sm: 400 14px/1.5 var(--albura-sans);
  --albura-text-caption: 400 13px/1.4 var(--albura-sans);
  --albura-text-price: 500 16px/1.2 var(--albura-sans);   /* + font-variant-numeric: tabular-nums */
  --albura-text-button: 500 15px/1 var(--albura-sans);    /* + letter-spacing: 0.02em */
  --albura-text-label: 500 11px/1.2 var(--albura-sans);   /* + letter-spacing: 0.18em; text-transform: uppercase */

  /* Espaciado */
  --albura-space-1: 4px;
  --albura-space-2: 8px;
  --albura-space-3: 12px;
  --albura-space-4: 16px;
  --albura-space-5: 24px;
  --albura-space-6: 32px;
  --albura-space-7: 48px;
  --albura-space-8: 64px;
  --albura-space-9: 96px;
  --albura-space-10: 128px;

  /* Forma */
  --albura-radius: 2px;
  --albura-radius-full: 9999px;       /* solo avatar e ícono redondo */
  --albura-border-width: 1px;
  --albura-border-width-strong: 2px;  /* foco y error de campo */

  /* Medidas */
  --albura-control-height: 48px;
  --albura-touch-min: 44px;
  --albura-container: 1200px;
  --albura-measure: 68ch;

  /* Movimiento */
  --albura-duration-fast: 120ms;
  --albura-duration-base: 200ms;
  --albura-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Escala tipográfica en pantallas chicas (por debajo de 768 px) */
@media (max-width: 767px) {
  :root {
    --albura-text-display: 200 48px/1.05 var(--albura-serif);
    --albura-text-title: 300 32px/1.15 var(--albura-serif);
    --albura-text-heading: 300 24px/1.2 var(--albura-serif);
    --albura-text-dish: 400 20px/1.25 var(--albura-serif);
  }
}

/* Roles · modo oscuro: solo para la carta digital en el salón */
[data-albura-tema="oscuro"] {
  --albura-bg: var(--albura-grafito);
  --albura-surface: var(--albura-grafito);   /* sin paneles: se separa con líneas */
  --albura-fg: var(--albura-caliza);
  --albura-fg-muted: var(--albura-ceniza);
  --albura-line: var(--albura-bruma);
  --albura-line-strong: var(--albura-caliza);
  --albura-border-control: var(--albura-ceniza);
  --albura-accent: var(--albura-caliza);
  --albura-accent-hover: var(--albura-piedra);
  --albura-on-accent: var(--albura-grafito);
  --albura-season: var(--albura-ceniza);
  --albura-focus: var(--albura-caliza);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --albura-duration-fast: 0ms;
    --albura-duration-base: 0ms;
  }
}