/* ============================================================
   MULTISERVICIOS HISPANOS — DESIGN TOKENS
   Single source of truth. Do not hard-code values elsewhere;
   reference these variables.
   ============================================================ */

:root {
  /* ---- COLOR: Brand (Guatemalan huipil palette) ---- */
  --color-teal:        #0E8B8B;  /* primary brand */
  --color-teal-deep:   #0A5C5C;  /* hover/active, dark accents */
  --color-fuchsia:     #D81E5B;  /* accent, CTAs */
  --color-marigold:    #F4A415;  /* accent, highlights */
  --color-terracotta:  #E0572A;  /* accent */
  --color-indigo:      #2A2A6A;  /* accent, deep sections */
  --color-ink:         #1C1B2E;  /* primary text, dark bg */
  --color-cream:       #FBF4E4;  /* page background, light text on dark */

  /* ---- COLOR: Semantic roles ---- */
  --bg-page:           var(--color-cream);
  --bg-surface:        #FFFFFF;
  --bg-dark:           var(--color-ink);
  --bg-brand:          var(--color-teal);
  --text-primary:      var(--color-ink);
  --text-muted:        #4A4960;
  --text-on-dark:      var(--color-cream);
  --cta-bg:            var(--color-fuchsia);
  --cta-text:          #FFFFFF;
  --border-subtle:     rgba(0,0,0,0.08);

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Fraunces', Georgia, serif;       /* headings */
  --font-body:    'Outfit', system-ui, sans-serif;  /* body, UI */

  /* Type scale (1.25 ratio, rem). Pair with clamp() for fluid sizing. */
  --fs-hero:   clamp(2.6rem, 8vw, 6rem);   /* h1 / hero */
  --fs-h2:     clamp(1.8rem, 4vw, 2.8rem);
  --fs-h3:     1.3rem;
  --fs-lead:   1.05rem;                    /* intro paragraphs */
  --fs-body:   1rem;
  --fs-small:  0.82rem;
  --fs-label:  0.72rem;                    /* uppercase eyebrow labels */

  --lh-tight:  0.95;   /* display headings */
  --lh-snug:   1.2;
  --lh-body:   1.55;

  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-black:  900;

  --tracking-label: 0.32em;   /* uppercase eyebrows */
  --tracking-sub:   0.34em;   /* "HISPANOS" subline */

  /* ---- SPACING (8px rhythm) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.5rem;   /* 24 */
  --space-5: 2rem;     /* 32 */
  --space-6: 3rem;     /* 48 */
  --space-7: 4rem;     /* 64 */
  --space-section: 64px;        /* vertical section padding */
  --space-section-x: 7vw;       /* horizontal section padding */

  /* ---- RADIUS ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ---- SHADOWS ---- */
  --shadow-sm: 0 6px 18px rgba(0,0,0,0.08);
  --shadow-md: 0 10px 26px rgba(0,0,0,0.10);
  --shadow-lg: 0 18px 40px rgba(28,27,46,0.28);

  /* ---- LAYOUT ---- */
  --max-content: 1200px;
  --max-text:    640px;

  /* ---- BREAKPOINTS (reference; use in media queries) ---- */
  /* mobile:  < 640px   */
  /* tablet:  640–1024px */
  /* desktop: > 1024px  */

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med:  0.35s;
}

/* ---- SIGNATURE MOTIF: woven stripe ----
   Reusable divider. Apply .weave to an empty div.
   .weave--thin for the lighter section breaks. */
.weave {
  height: 14px;
  width: 100%;
  background: repeating-linear-gradient(90deg,
    var(--color-fuchsia)    0 22px,
    var(--color-marigold)  22px 38px,
    var(--color-teal)      38px 64px,
    var(--color-terracotta)64px 80px,
    var(--color-indigo)    80px 100px);
}
.weave--thin { height: 6px; }