/* ============================================================
   RAYNE3XL — Design Tokens (brand board 2026)
   Miami Born. Art Sin Límites. · Hecho a mano, hecho por alma.
   ============================================================ */

:root {
  /* --- brand palette --- */
  --black:      #0D0D0D;
  --black-2:    #141414;
  --black-3:    #1c1c1c;
  --cream:      #F7F3EA;
  --cream-dim:  rgba(247, 243, 234, 0.62);
  --cream-faint:rgba(247, 243, 234, 0.38);
  --teal:       #00E6D6;
  --blue:       #0057FF;
  --pink:       #FF2DAA;
  --orange:     #FF6A00;
  --yellow:     #FFC300;
  --gold:       #D4AF37;
  --white:      #ffffff;
  --whatsapp:   #25D366;

  --line:       rgba(247, 243, 234, 0.14);
  --line-soft:  rgba(247, 243, 234, 0.07);

  /* --- accent (overridden per page via body[data-page]) --- */
  --accent:     var(--teal);
  --accent-ink: #003733; /* text color on accent bg */

  /* --- typography --- */
  --font-display: "Raleway", system-ui, sans-serif;
  --font-body:    "Raleway", system-ui, sans-serif;
  --font-label:   "Raleway", system-ui, sans-serif;

  --t-display: clamp(3.2rem, 13vw, 11rem);
  --t-hero:    clamp(2.6rem, 8vw, 6.5rem);
  --t-h1:      clamp(2.4rem, 6.5vw, 5rem);
  --t-h2:      clamp(1.9rem, 4.5vw, 3.4rem);
  --t-h3:      clamp(1.3rem, 2.6vw, 1.9rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-label:   0.72rem;

  /* --- layout --- */
  --gutter:    clamp(1.25rem, 4.5vw, 3.5rem);
  --section-y: clamp(4.5rem, 11vw, 9.5rem);
  --maxw:      1440px;
  --radius:    14px;

  /* --- motion --- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --fast:      0.35s;
  --slow:      0.8s;
}

/* accent per page — la marca es multicolor, cada página es monocroma */
body[data-page="home"]              { --accent: var(--teal);   --accent-ink: #00332f; }
body[data-page="murales"]           { --accent: var(--orange); --accent-ink: #2b1200; }
body[data-page="graffiti-interior"] { --accent: #3d7fff;       --accent-ink: #ffffff; }
body[data-page="body-paint"]        { --accent: var(--pink);   --accent-ink: #37001f; }
body[data-page="cuadros"]           { --accent: var(--gold);   --accent-ink: #2b2205; }
body[data-page="shop"]              { --accent: var(--yellow); --accent-ink: #2b2000; }
body[data-page="contacto"]          { --accent: var(--teal);   --accent-ink: #00332f; }
body[data-page="gracias"]           { --accent: var(--teal);   --accent-ink: #00332f; }