/* ============================================================================
   PLATAFORMA TIENDA — Sistema de tokens en DOS CAPAS
   ----------------------------------------------------------------------------
   CAPA BASE  : fija. Identidad de plataforma ("shop register"). NEUTRA.
                tipografía, escala, espaciado, radios, sombras, neutros,
                estado semántico, layout. NO cambia entre instancias.
   CAPA MARCA : sobreescribible por negocio. Insumo del contrato de branding
                del API. Mínima: esencialmente UN color (--brand-accent);
                strong/soft/line se DERIVAN con color-mix; ink explícito-opcional.
   ----------------------------------------------------------------------------
   Anclas atómicas: Lato (cuerpo) + JetBrains Mono (acentos) · radios 8/14/22.
   ============================================================================ */

/* ============================================================
   CAPA BASE
   ============================================================ */
:root {
  /* ---- Tipografía (BASE · bloqueada) ---- */
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Gancho documentado, OFF en v1: una marca PODRÍA aportar un display font.
     Default = fuente base. Mantener bloqueado salvo decisión explícita. */
  --brand-font-display: var(--font-body);

  --fw-regular: 400;
  --fw-bold: 700;
  --fw-black: 900;

  /* escala shop: densa (admin) → cómoda (storefront) */
  --fs-2xs: 0.6875rem;  /* 11 · micro-labels mono */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.875rem;   /* 14 */
  --fs-base:1rem;       /* 16 · cuerpo */
  --fs-md:  1.125rem;   /* 18 */
  --fs-lg:  1.375rem;   /* 22 */
  --fs-xl:  1.75rem;    /* 28 */
  --fs-2xl: 2.25rem;    /* 36 */
  --fs-3xl: 3rem;       /* 48 */
  --fs-4xl: 4rem;       /* 64 · display hero */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;
  --ls-tight: -0.02em;
  --ls-mono: 0.08em;

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

  /* ---- Radios (BASE · anclados) ---- */
  --radius-sm: 8px;     /* botones, campos */
  --radius-md: 14px;    /* cards */
  --radius-lg: 22px;    /* modales, superficies grandes */
  --radius-pill: 999px;

  /* ---- Neutros / superficies (BASE · estructurales, NO marca) ---- */
  --bg: #FFFFFF;
  --surface: #F6F6F4;
  --surface-2: #EDEDEA;
  --line: #E2E2DE;
  --line-strong: #CFCFC9;
  --ink: #1A1A1A;
  --ink-2: #565654;
  --ink-3: #8A8A85;
  --ink-inverse: #FFFFFF;

  /* banda oscura neutra (footer, contraste) */
  --panel: #161514;
  --panel-surface: #211F1D;
  --panel-line: #322F2C;
  --panel-ink: #F7F6F4;
  --panel-ink-2: #B4ADA6;

  /* ---- Estado semántico (BASE · funcional, idéntico entre tiendas) ----
     IMPORTANTE (white-label): el rol "estado" es independiente del
     "acento de marca". Los badges/alertas NUNCA dependen solo del color:
     siempre ícono + label + ubicación. El acento de marca jamás se usa
     para comunicar estado. Por eso un acento verde/rojo de marca no se
     confunde con --ok/--danger. */
  --ok: #1E8A5B;        --ok-soft: #E6F4EC;
  --warn: #B9820B;      --warn-soft: #FBF1D9;
  --info: #2563C9;      --info-soft: #E4ECFB;
  --danger: #C5392B;    --danger-soft: #F9E7E4;
  --neutral: #565654;   --neutral-soft: #ECECE9;

  /* ---- Sombras (BASE · neutras) ---- */
  --shadow-sm: 0 1px 2px rgba(20,18,16,.05), 0 1px 3px rgba(20,18,16,.05);
  --shadow-md: 0 4px 12px -2px rgba(20,18,16,.08), 0 12px 32px -12px rgba(20,18,16,.14);
  --shadow-lg: 0 24px 64px -24px rgba(20,18,16,.28);
  --shadow-focus: 0 0 0 3px var(--brand-accent-soft);

  /* ---- Layout (BASE) ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(16px, 5vw, 56px);
  --nav-h: 68px;
  --announce-h: 38px;
  --card-min: 240px;

  /* ---- Densidad (BASE) — cómoda por defecto; el back-office la compacta ----
     Estructural (no marca). El shell del admin activa [data-density="compact"]. */
  --field-h: 44px;     /* alto de control de formulario */
  --row-py: 13px;      /* padding vertical de celda de tabla */
  --side-w: 248px;     /* ancho del sidebar de admin */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .25s;

  /* ============================================================
     CAPA MARCA — DERIVADA
     El contrato que cablea CC es, en esencia, UNA variable:
        --brand-accent
     Todo lo demás se deriva aquí y no se puede descuadrar.
     --brand-accent-ink: explícito-opcional (default #fff); CC lo setea
     una sola vez por instancia si el acento es claro.
     ============================================================ */
  --brand-accent-strong: color-mix(in srgb, var(--brand-accent) 82%, #000);
  --brand-accent-soft:   color-mix(in srgb, var(--brand-accent) 10%, var(--bg));
  --brand-accent-line:   color-mix(in srgb, var(--brand-accent) 24%, var(--bg));
  --brand-accent-ink:    #FFFFFF;
  --brand-secondary:     var(--brand-accent); /* opcional; default = accent */
}

/* ============================================================
   CAPA MARCA — VALORES POR INSTANCIA
   Cada despliegue define SOLO esto. La estructura no cambia.
   (El default :root es el de fabricante; los bloques [data-brand]
   demuestran el swap en vivo de la maqueta.)
   ============================================================ */

/* (a) Default de fabricante — Jorge Díaz */
:root,
[data-brand="fabricante"] {
  --brand-accent: #D84332;
  --brand-accent-ink: #FFFFFF;
}

/* (b) Marca ficticia "Selva" — vivero de plantas (verde lejano al default).
   Caso de prueba: su verde queda CERCA de --ok (#1E8A5B). Si no se confunde
   con un estado de éxito, el sistema es robusto. */
[data-brand="selva"] {
  --brand-accent: #117A5E;
  --brand-accent-ink: #FFFFFF;
}

/* ============================================================
   DENSIDAD COMPACTA — back-office (admin). CAPA BASE.
   ============================================================ */
[data-density="compact"] {
  --field-h: 38px;
  --row-py: 9px;
}