/* =========================================================
   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;

  /* Plus Jakarta Sans: grotesca geométrica, títulos en negrita y apretados,
     limpia en celular. Marcellus queda solo para el logo «AM». */
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-ui: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-logo: "Marcellus", "Trajan Pro", Georgia, serif;
  --w-display: 700;

  /* 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.5rem, 6.2vw, 5.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: -.025em;
  --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%;

  /* Tarjeta de perfume: en el tema oscuro va sin caja */
  --card-bg: transparent;
  --card-border: transparent;
  --card-radius: 0;
  --card-pad: 0;

  /* Puntos de género y etiqueta de decants */
  --dot-hombre: #6E9BF0;
  --dot-mujer: #F07AA6;
  --dot-unisex: #B49AF0;
}

/* =========================================================
   Tema claro (tienda). Lo activa data-theme="light" en <html>.
   Fondo gris muy claro, tarjetas blancas y botones casi negros.
   Contraste sobre --bg: --text 17:1, --text-2 6:1.
   ========================================================= */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --surface-photo: #ECEDEF;
  --text: #111318;
  --text-2: #565B66;
  --accent: #111318;
  --line: rgba(17, 19, 24, .09);
  --line-strong: #D6D8DD;
  --focus: #111318;
  --ok: #1E7A4A;
  --danger: #B23A2A;
  --warn: #8A6A1F;
  --scrim: rgba(17, 19, 24, .45);

  --radius: 12px;
  --shadow-overlay: 0 30px 80px rgba(17, 19, 24, .18);

  --btn-primary-bg: #111318;
  --btn-primary-fg: #FFFFFF;
  --btn-primary-hover: #2B2F38;
  --btn-secondary-border: #8A8F99;
  --btn-secondary-hover: #111318;

  --input-border: #8A8F99;
  --input-border-focus: #111318;
  --placeholder: #6A6F7A;

  --photo-floor: rgba(17, 19, 24, .16);

  --card-bg: #FFFFFF;
  --card-border: rgba(17, 19, 24, .07);
  --card-radius: 18px;
  --card-pad: 14px;

  --dot-hombre: #2F63D6;
  --dot-mujer: #D4386F;
  --dot-unisex: #7A4FD0;
}