/* ============================================================================
   BeautyPages — storefront foundation ("powder room" palette)

   The one copy of the palette and the page chrome every marketing surface
   shares: the landing page, the niche landings under niches/*.json, the blog,
   and the OG cards. It used to be three copies — index.html, blog-build.mjs's
   SHARED_CSS and og-build.mjs's inline :root — which is three places for the
   brand to drift and no way to notice, because each one renders on its own.

   This is NOT assets/tokens.css. That file is the tenant theme system, whose
   values a client's chosen theme rewrites at runtime; the storefront sells the
   product and must never be restyled by a tenant's palette. Two systems, on
   purpose — /comecar and /temas load tokens.css because they preview themes.

   Consumers:
     index.html                 <link>s this file
     scripts/storefront-css.mjs reads it, for the generators that inline CSS
     scripts/blog-build.mjs     inlines it, then adds article typography
     scripts/niche-build.mjs    inlines it, then adds the landing sections
     scripts/og-build.mjs       inlines the :root block only
   ========================================================================== */

:root{
  --porcelain:#F6EFEA;      /* warm porcelain, pink-leaning — not cream */
  --porcelain-2:#EFE4DD;
  --plum:#2E2028;           /* ink */
  --plum-soft:#5C4A55;
  --lacquer:#A63D2F;        /* lacquered rose-vermilion, the one loud thing */
  --lacquer-deep:#7E2E24;
  --sage:#5F7261;           /* ties to the operator panel's green */
  --line:rgba(46,32,40,.14);
  --fd:"Fraunces",Georgia,serif;
  --fb:"Inter",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--fb);background:var(--porcelain);color:var(--plum);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--lacquer);color:#fff}
:focus-visible{outline:2px solid var(--lacquer);outline-offset:3px;border-radius:2px}

/* The measure is per-surface: a landing page holds 1120px of grid, an article
   is unreadable past ~720px. Overriding --wrap is how a page says which it is. */
.wrap{width:min(var(--wrap,1120px),92%);margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem;
  padding:.85em 1.7em;border-radius:999px;text-decoration:none;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn-fill{background:var(--lacquer);color:#fff}
.btn-fill:hover{background:var(--lacquer-deep)}
.btn-line{border:1.5px solid var(--plum);color:var(--plum)}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--porcelain) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0;gap:1rem}
.logo{font-family:var(--fd);font-weight:430;font-size:1.35rem;text-decoration:none;letter-spacing:-.01em}
.logo i{font-style:italic;color:var(--lacquer)}
.top nav{display:flex;align-items:center;gap:1.4rem;font-size:.92rem}
.top nav a:not(.btn){text-decoration:none;color:var(--plum-soft)}
.top nav a:not(.btn):hover{color:var(--plum)}
@media(max-width:640px){.top nav a.quiet{display:none}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--porcelain-2)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.6rem 0;font-size:.84rem;color:var(--plum-soft);flex-wrap:wrap}
.foot-in a{color:inherit}
.foot-in a:hover{color:var(--lacquer)}