/* ============================================================
   ENTREMENTES — Foundations
   Colors, type, spacing tokens for the Entrementes brand
   ============================================================ */

/* ---------- Webfonts ---------- */
/* @import must come first in a CSS file (before any other rules including @font-face).
   Body/UI/auxiliary families come from Google Fonts.
   The display family (The Seasons) is brand-owned and loaded locally below;
   no web substitute is referenced anywhere. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* The Seasons — brand display font, three weights/styles installed locally. */
@font-face {
  font-family: "The Seasons";
  src: url("fonts/the-seasons-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("fonts/the-seasons-light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "The Seasons";
  src: url("fonts/the-seasons-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Color tokens ---------- */
:root {
  /* Brand core */
  --terracota:        #C6866E;   /* primary accent */
  --verde-oliva:      #BFC5A1;   /* secondary accent */
  --beige:            #FFF9F1;   /* canvas / background */
  --gris-piedra:      #646464;   /* primary text */

  /* Tonal range — derived from the four cores */
  --terracota-100:    #F4E4DC;
  --terracota-200:    #E6C2B1;
  --terracota-400:    #C6866E;
  --terracota-600:    #A86850;
  --terracota-800:    #7A4631;

  --oliva-100:        #EDEEDD;
  --oliva-200:        #DCDFC2;
  --oliva-400:        #BFC5A1;
  --oliva-600:        #9CA37C;
  --oliva-800:        #6B7150;

  --beige-50:         #FFFDF8;
  --beige-100:        #FFF9F1;
  --beige-200:        #F6EEDE;
  --beige-300:        #ECE1C9;

  --piedra-300:       #B5B5B5;
  --piedra-500:       #8A8A8A;
  --piedra-600:       #646464;
  --piedra-800:       #3D3D3D;
  --piedra-900:       #2A2A2A;

  /* Semantic — surfaces */
  --bg:               var(--beige-100);
  --bg-elev:          var(--beige-50);
  --bg-warm:          var(--beige-200);
  --surface-card:     #FFFFFF;
  --surface-quote:    var(--beige-50);

  /* Semantic — foreground */
  --fg-1:             var(--piedra-800);   /* high-emphasis body */
  --fg-2:             var(--piedra-600);   /* default body */
  --fg-3:             var(--piedra-500);   /* muted / captions */
  --fg-display:       #4A4A47;             /* display headings (warm graphite) */
  --fg-on-terracota:  var(--beige-50);
  --fg-on-oliva:      var(--piedra-800);

  /* Semantic — accents */
  --accent:           var(--terracota);
  --accent-soft:      var(--terracota-100);
  --accent-2:         var(--verde-oliva);
  --accent-2-soft:    var(--oliva-100);

  /* Lines & dividers */
  --line:             #E8DECA;
  --line-strong:      #D6C7AC;

  /* ---------- Type tokens ---------- */
  --font-display:     "The Seasons", Georgia, "Times New Roman", serif;
  --font-body:        "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui:          "Montserrat", "Source Sans 3", system-ui, sans-serif;
  --font-soft:        "Poppins", "Source Sans 3", system-ui, sans-serif;

  /* Scale (modular, base 16) */
  --fs-display-xl:   72px;
  --fs-display-lg:   56px;
  --fs-display-md:   44px;
  --fs-display-sm:   32px;
  --fs-h1:           36px;
  --fs-h2:           28px;
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-overline:     11px;

  /* Line heights */
  --lh-tight:        1.1;
  --lh-snug:         1.25;
  --lh-display:      1.18;
  --lh-body:         1.55;
  --lh-loose:        1.7;

  /* Letter spacing */
  --ls-tight:        -0.01em;
  --ls-normal:       0;
  --ls-wide:         0.06em;
  --ls-wider:        0.14em;       /* used for ALL-CAPS @PSICO.ENTREMENTES caption */
  --ls-display:      -0.005em;

  /* ---------- Spacing (4-pt base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Radii — soft, generous */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-pill:  999px;

  /* Shadows — warm, low, never harsh */
  --shadow-xs:  0 1px 2px rgba(74, 56, 41, 0.04);
  --shadow-sm:  0 2px 8px rgba(74, 56, 41, 0.06);
  --shadow-md:  0 8px 24px rgba(74, 56, 41, 0.08);
  --shadow-lg:  0 18px 48px rgba(74, 56, 41, 0.10);
  --shadow-inset: inset 0 0 0 1px var(--line);

  /* Motion */
  --ease-soft:   cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick:   140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic typography utilities
   ============================================================ */

body {
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, .display-lg, .display-md, .display-sm,
h1.serif, h2.serif, h3.serif,
.eyebrow-quote {
  font-family: var(--font-display);
  color: var(--fg-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-wrap: balance;
}

.display-xl  { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.display-lg  { font-size: var(--fs-display-lg); line-height: var(--lh-tight); }
.display-md  { font-size: var(--fs-display-md); }
.display-sm  { font-size: var(--fs-display-sm); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-display);
  font-weight: 400;
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  color: var(--fg-display);
  font-weight: 400;
  margin: 0 0 var(--s-3);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--s-3);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.body-sm  { font-size: var(--fs-body-sm); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); }

.overline {
  font-family: var(--font-ui);
  font-size: var(--fs-overline);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-3);
  font-weight: 500;
}

/* Brand attribution caption (e.g. "@PSICO.ENTREMENTES — LIC. LEAN ABREVAYA") */
.attribution {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--piedra-500);
  font-weight: 400;
}

/* Pull-quote / instagram-card style — display serif, centered */
.quote {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display);
  color: var(--fg-display);
  font-weight: 400;
  text-align: center;
  text-wrap: balance;
  letter-spacing: var(--ls-display);
}

/* Small UI labels — Montserrat, lightly tracked */
.ui-label {
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--fg-1);
}

a {
  color: var(--terracota-600);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick) var(--ease-soft),
              color var(--dur-quick) var(--ease-soft);
}
a:hover { border-bottom-color: var(--terracota-400); color: var(--terracota-800); }