/* ============================================================
   instant-sites — design tokens
   Copied into each site as public/css/tokens.css.
   PER SITE: override ONLY the "Brand" block below with the client's
   colors (pulled from their logo / existing site) and font choice.
   Everything else is derived and should stay as-is.
   ============================================================ */
:root {
  /* ---- Brand (override per site) ---------------------------- */
  --brand:        #c8102e;   /* Rojo Exen — from the "Recomendado" badge, AA on white */
  --brand-ink:    #ffffff;
  --accent:       #c8102e;
  --accent-ink:   #ffffff;
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius:       4px;

  /* ---- Neutrals (light) -------------------------------------- */
  --bg:           #ffffff;
  --bg-alt:       #f3f3f1;
  --surface:      #ffffff;
  --ink:          #0d0d0f;
  --ink-2:        #5c5c62;
  --ink-3:        #6b7280;
  --line:         #dedcd8;
  --shadow:       0 1px 2px rgba(0,0,0,.05), 0 8px 24px -12px rgba(0,0,0,.18);

  /* ---- Type scale (fluid) ------------------------------------ */
  --fs-xs:  clamp(.78rem, .74rem + .2vw, .86rem);
  --fs-sm:  clamp(.88rem, .84rem + .2vw, .95rem);
  --fs-md:  clamp(1rem,   .96rem + .25vw, 1.08rem);
  --fs-lg:  clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
  --fs-xl:  clamp(1.5rem,  1.25rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem,    1.5rem + 2.5vw,  3.2rem);
  --fs-3xl: clamp(2.5rem,  1.8rem + 3.5vw,  4.2rem);
  --lh-tight: 1.1;
  --lh-body:  1.6;

  /* ---- Spacing ----------------------------------------------- */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.5rem; --s-6: 2rem;  --s-7: 3rem;   --s-8: 4rem;
  --s-9: 6rem;   --section: clamp(3rem, 6vw, 6rem);

  /* ---- Layout ------------------------------------------------ */
  --container: 1140px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 68px;

  /* ---- Motion ------------------------------------------------ */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 140ms;
  --t-med:  260ms;

  color-scheme: light;
}

/* Optional dark scheme. Enable per site by uncommenting; many local-business
   sites are better served light-only for brand consistency with print. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216; --bg-alt: #161a20; --surface: #1a1f26;
    --ink: #e8eaed; --ink-2: #b4bac3; --ink-3: #8a919c; --line: #2a303a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
*/

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}