/* ==========================================================================
   Private Fitness Co. — Design tokens (2026 facelift)
   Ported from the Claude Design system uploaded to the repo root.
   Namespaced as plain CSS custom properties; consuming rules are scoped
   under .pf-* classes (see pf-components.css) so nothing here touches the
   legacy Bootstrap/theme styles used elsewhere in the app.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62.5..125,100..900&family=Inter:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700&display=swap');

:root{
  /* Color — light, matte, warm */
  --papel:#FAF9F6;
  --blanco:#FFFFFF;
  --crema:#F2F1EC;
  --tinta:#1C1C1E;
  --niebla:#6E6E74;
  --verde:#2F6B4F;
  --verde-suave:#E7EFE9;
  --ambar:#8F7426;
  --ambar-suave:#F4EEDD;
  --text-on-verde:#FFFFFF;
  --text-on-ambar:#FFFFFF;
  --border-hairline:rgba(28,28,30,0.08);
  --border-glass:rgba(28,28,30,0.06);
  --border-verde-hover:rgba(47,107,79,0.4);
  --glass-bg:rgba(255,255,255,0.75);

  /* Typography */
  --font-display:'Archivo',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'Space Mono',monospace;
  --text-hero:clamp(2.75rem,7vw,5.5rem);
  --text-section:clamp(1.75rem,4vw,3rem);
  --text-body-size:1.0625rem;
  --leading-body:1.6;
  --tracking-eyebrow:0.08em;
  --tracking-display:-0.02em;
  --weight-display:800;
  --stretch-display:125%;

  /* Spacing / layout — 8pt scale */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;--sp-8:64px;--sp-10:80px;--sp-12:96px;
  --section-pad:clamp(80px,12vh,140px);
  --content-max:1200px;
  --radius-card:16px;
  --radius-btn:12px;
  --radius-hero-card:24px;
  --radius-pill:999px;

  /* Depth — layered shadow system */
  --shadow-xs:0 1px 2px rgba(28,28,30,0.05);
  --shadow-sm:0 1px 2px rgba(28,28,30,0.05),0 3px 10px rgba(28,28,30,0.07);
  --shadow-md:0 2px 4px rgba(28,28,30,0.05),0 10px 28px rgba(28,28,30,0.10);
  --shadow-lg:0 4px 8px rgba(28,28,30,0.05),0 24px 56px rgba(28,28,30,0.14);
  --shadow-hover:0 6px 12px rgba(28,28,30,0.07),0 28px 64px rgba(28,28,30,0.16);
  --glass-blur:16px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --reveal-duration:500ms;
}

/* Matte photo treatment — desaturated, soft contrast, faint verde cast.
   Applies to any photography we control (not swapped per-admin content). */
.pf-duotone{position:relative;overflow:hidden;background:var(--crema)}
.pf-duotone>img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(0.7) contrast(0.95) brightness(1.02)}
.pf-duotone::after{content:"";position:absolute;inset:0;background:rgba(47,107,79,0.10);mix-blend-mode:multiply;pointer-events:none}

/* Same matte treatment for elements using CSS background-image instead of
   an <img> child (e.g. dynamic admin banner/service photos) — filter goes
   on the element itself since there is no descendant image to target. */
.pf-duotone-bg{position:relative;overflow:hidden;background-color:var(--crema);filter:saturate(0.7) contrast(0.95) brightness(1.02)}
.pf-duotone-bg::after{content:"";position:absolute;inset:0;background:rgba(47,107,79,0.10);mix-blend-mode:multiply;pointer-events:none}

.pf-glass{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-glass);box-shadow:var(--shadow-sm)}

::selection{background:rgba(47,107,79,0.18)}