/* =========================================================
   AM Parfums: sistema de diseño NOIR ARGENT
   Lo comparten la tienda y el panel. No depende de ningún
   otro archivo. Tres capas:
     1. Primitivos: valores crudos, sin significado de uso.
     2. Semánticos: para qué sirve cada color.
     3. Componentes: medidas y colores de piezas concretas.
   Negro de verdad, plata plana como material y un solo acento:
   el color lo ponen las fotos.

   Contraste sobre negro:
     --text   (porcelana) 17:1
     --accent (plata)     12.5:1
     --text-2 (humo)      6.4:1
   ========================================================= */
:root {
  color-scheme: dark;

  /* ---------- 1. Primitivos ---------- */
  --c-black: #000;
  --c-onyx: #0E0E10;
  --c-graphite: #1A1A1D;
  --c-steel: #2C2D31;
  --c-silver: #C4C7CC;
  --c-smoke: #8D9097;
  --c-porcelain: #ECEBE7;
  --c-sage: #8FB89A;
  --c-coral: #E08A7A;
  --c-straw: #D9C08A;

  /* Marcellus: romana de remate abierto, como una etiqueta grabada en el
     frasco. Trazo parejo: no se rompe en pantallas de celular (Bodoni sí). */
  --f-display: "Marcellus", "Trajan Pro", Georgia, serif;
  --f-ui: "Jost", system-ui, sans-serif;

  /* Espaciado, base 4 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;
  --s-48: 192px;

  /* Escala tipográfica, razón 1.25 */
  --t-13: .8125rem;
  --t-16: 1rem;
  --t-20: 1.25rem;
  --t-25: 1.5625rem;
  --t-31: 1.9375rem;
  --t-39: 2.4375rem;
  --t-49: 3.0625rem;
  --t-61: 3.8125rem;
  --t-hero: clamp(2.75rem, 7.4vw, 6.5rem);
  /* Tamaño mínimo de la letra de títulos */
  --t-display-min: 1.625rem;

  --lh-tight: 1.04;
  --lh-title: 1.14;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --ls-display: .01em;
  --ls-logo: .3em;
  --measure: 64ch;

  /* Movimiento */
  --d-fast: 160ms;
  --d-base: 280ms;
  --d-slow: 520ms;
  --e-out: cubic-bezier(.2, .7, .1, 1);
  --e-io: cubic-bezier(.65, 0, .35, 1);

  /* ---------- 2. Semánticos ---------- */
  --bg: var(--c-black);
  --surface: var(--c-onyx);
  --surface-photo: var(--c-graphite);
  --text: var(--c-porcelain);
  --text-2: var(--c-smoke);
  --accent: var(--c-silver);
  --line: rgba(236, 235, 231, .10);
  --line-strong: var(--c-steel);
  --focus: var(--c-silver);
  --ok: var(--c-sage);
  --danger: var(--c-coral);
  --warn: var(--c-straw);
  --scrim: rgba(0, 0, 0, .72);

  --radius: 0;
  --radius-pill: 999px;
  /* Solo para la ficha y la bolsa. Las tarjetas no llevan sombra. */
  --shadow-overlay: 0 40px 120px rgba(0, 0, 0, .7);
  --focus-ring: 2px solid var(--focus);
  --focus-offset: 2px;
  --hair: 1px;

  /* ---------- 3. Componentes ---------- */
  --tap-min: 44px;

  --btn-h: 52px;
  --btn-px: var(--s-8);
  --btn-primary-bg: var(--c-silver);
  --btn-primary-fg: var(--c-black);
  --btn-primary-hover: var(--c-porcelain);
  --btn-secondary-border: var(--c-smoke);
  --btn-secondary-hover: var(--c-porcelain);

  --input-h: 48px;
  --input-fs: var(--t-16);
  --input-px: var(--s-3);
  --input-border: var(--c-smoke);
  --input-border-focus: var(--c-porcelain);
  --placeholder: var(--c-smoke);

  --count-size: 24px;

  /* Fotos de producto: PNG/WebP transparentes. El fondo (--surface-photo)
     y la sombra de piso los pone el CSS, igual en la tienda y en el panel. */
  --photo-floor: rgba(0, 0, 0, .62);
  --photo-pad-t: 9%;
  --photo-pad-x: 11%;
  --photo-pad-b: 13%;
  --photo-floor-w: 58%;
  --photo-floor-h: 7%;
}