/* ============================================================================
   FOUNDATIONS — Latino Ceramics design tokens + base + utilities
   Source of truth for the WordPress build. Maps to:
     • tailwind.config.js  → theme.extend (colors, fontFamily, fontSize, spacing)
     • theme.json          → settings.color.palette / typography / spacing
   Everything visual derives from the custom properties below — change a token
   here and it cascades through every block.
   ========================================================================== */
:root{
  /* ---- Backgrounds (the 5 Section Styles) ---- */
  --bg-light:#ffffff;   /* Surface / default        */
  --bg-subtle:#f7f5f3;  /* Subtle warm off-white    */
  --bg-tinted:#dceaf5;  /* Tinted brand wash        */
  --bg-dark:#0f3d6b;    /* Dark brand navy          */
  --bg-deep:#081f38;    /* Deep ink (footer)        */

  /* ---- Brand ---- */
  --primary:#1a6dab;
  --primary-ink:#155a8e;      /* darker, for hover/contrast */
  --accent:#4a9fd4;           /* light brand blue, icons on dark */

  /* ---- Ceramic accent — fired-clay terracotta (baked direction) ---- */
  --accent2:#c2562e;
  --accent2-on-dark:#e08a63;  /* contrast-contract accent on dark surfaces */
  --hero-em:#eec9ab;          /* italic emphasis in hero headline */

  /* ---- Text ---- */
  --text-base:#0f2a45;
  --text-muted:#4a6a8a;
  --text-inverted:#ffffff;
  --line:rgba(15,42,69,.12);

  /* ---- Type ---- */
  --font-head:'Playfair Display', Georgia, serif;
  --font-body:'Inter', system-ui, sans-serif;
  --fs-display:clamp(54px,9.4vw,128px);
  --fs-h2:clamp(31px,3.9vw,50px);
  --fs-h3:clamp(21px,2.3vw,27px);
  --fs-lead:clamp(18px,1.5vw,22px);
  --fs-body:17px;
  --fs-small:14px;
  --fs-eyebrow:13px;

  /* ---- Spacing scale ---- */
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section-y:clamp(64px,8.5vw,112px);
  --gutter:clamp(22px,5vw,48px);
  --maxw:1200px;

  /* ---- Radius + shadow ---- */
  --radius:6px;
  --radius-lg:12px;
  --shadow-card:0 1px 2px rgba(8,31,56,.06), 0 6px 22px rgba(8,31,56,.08);
  --shadow-hover:0 10px 18px rgba(8,31,56,.10), 0 28px 60px rgba(8,31,56,.18);
}

/* ============ BASE ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text-base);
  background:var(--bg-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head);line-height:1.06;margin:0;font-weight:700;letter-spacing:-.01em;text-wrap:balance;}
p{margin:0;text-wrap:pretty;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--primary);color:#fff;}
h1 em,h2 em{font-style:italic;font-weight:inherit;letter-spacing:0;}
.hero h1 em{color:var(--hero-em);}

/* ============ LAYOUT UTILITIES ============ */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%;}
.section{padding-block:var(--section-y);}

/* ============ SECTION STYLES (backgrounds) ============
   Each maps to a registered block style variation in theme.json (WP 6.6+).
   A Section wrapper owns ONE of these; inner blocks adapt via .on-dark. */
.bg-light{background:var(--bg-light);}
.bg-subtle{background:var(--bg-subtle);}
.bg-tinted{background:var(--bg-tinted);}
.bg-dark{background:var(--bg-dark);color:var(--text-inverted);}
.bg-deep{background:var(--bg-deep);color:var(--text-inverted);}
/* .on-dark is applied alongside .bg-dark / .bg-deep — it is the CONTRAST CONTRACT.
   Text colour cascades for free; everything below must be redefined explicitly. */
.on-dark{color:var(--text-inverted);}
.on-dark .lead{color:rgba(255,255,255,.82);}
.on-dark .eyebrow{color:var(--accent2-on-dark);}
.on-dark .eyebrow::before{background:var(--accent2-on-dark);}

/* ============ SHARED INLINE BITS ============ */
.eyebrow{
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);margin:0 0 var(--s4);display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--accent2);transform:rotate(45deg);border-radius:1.5px;display:inline-block;flex:none;}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:1.5;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1;
  padding:16px 26px;border-radius:var(--radius);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-ink);border-color:var(--primary-ink);box-shadow:0 8px 22px rgba(26,109,171,.32);}
.btn-secondary{background:transparent;color:var(--primary);border-color:var(--primary);}
.btn-secondary:hover{background:rgba(26,109,171,.08);}
.btn-ghost{background:transparent;color:var(--text-base);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn-ghost-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.65);}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn svg{width:18px;height:18px;}
/* CONTRAST CONTRACT — buttons SWAP on dark surfaces (semantic, not auto-flip):
   solid-primary becomes a white button; ghost/secondary go to white outlines. */
.on-dark .btn-primary{background:#fff;color:var(--primary);border-color:#fff;}
.on-dark .btn-primary:hover{background:#eaf3fb;border-color:#eaf3fb;box-shadow:0 8px 26px rgba(0,0,0,.25);}
.on-dark .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.on-dark .btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4);}
.on-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}

/* ============ SECTION HEADING (latino/section-heading) ============
   Three variants: .sec-head (stack), .sec-head.center, .sec-split (asymmetric). */
.sec-head{max-width:680px;margin-bottom:var(--s8);}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-head.center .eyebrow{justify-content:center;}
.sec-head h2{font-size:var(--fs-h2);margin-bottom:var(--s4);}

.sec-split{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:18px var(--s8);align-items:end;border-top:1px solid var(--line);padding-top:var(--s5);margin-bottom:var(--s8);}
.sec-split::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--accent2);transform:rotate(45deg);border-radius:1.5px;}
.sec-split h2{font-size:var(--fs-h2);}
.sec-split .eyebrow{margin-bottom:var(--s3);}
.sec-split .eyebrow::before{display:none;}
.sec-split .lead{font-size:17.5px;line-height:1.6;padding-bottom:5px;}
/* contrast contract (lifted from v2) */
.on-dark .sec-split{border-top-color:rgba(255,255,255,.18);}
.on-dark .sec-split::before{background:var(--accent2-on-dark);}
@media(max-width:760px){.sec-split{grid-template-columns:1fr;gap:12px;}}