/* ============================================================
   SANTJAKOV — Design Tokens (v2 / dark rebrand)
   Source: Brand Guidelines SANTJAKOV (2026-06-03)
   ============================================================ */

:root {
  /* ---- COLOR PALETTE ---- */
  --black:      #000000;   /* pure black — hero / backgrounds        */
  --brown-900:  #121110;   /* dark neutral brown — sections (antes #1a130d, muy naranjoso) */
  --olive-900:  #262014;   /* dark olive brown — blocks / layers      */
  --taupe:      #bab2a7;   /* warm taupe — secondary text / muted    */
  --cream:      #e7e2d9;   /* warm off-white — primary text on dark  */

  /* semantic
     PRIMARY background = brown-900 (#1a130d). Black is for SHADOWS / depth only. */
  --bg:           var(--brown-900);   /* color principal de la página */
  --bg-deep:      var(--black);       /* solo sombras / vignettes / profundidad */
  --surface:      var(--olive-900);   /* bloques elevados sobre el bg */
  --text:         var(--cream);
  --text-muted:   var(--taupe);
  --line:         rgba(231, 226, 217, 0.14);
  --shadow:       rgba(0, 0, 0, 0.6); /* sombras con negro puro */

  /* ---- TYPOGRAPHY: FAMILIES ----
     Titles  → The Seasons (transitional serif)   [fallback: Cormorant Garamond]
     Body    → Helvetica Now Display (neutral sans)[fallback: Helvetica Neue / system] */
  --font-display: "The Seasons", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- TYPE SCALE (desktop defaults) ---- */
  --t-display-xl: clamp(72px, 14vw, 240px);
  --t-display:    96px;
  --t-h1:         64px;
  --t-h2:         40px;
  --t-h3:         24px;
  --t-body-l:     22px;
  --t-body-m:     17px;
  --t-body-s:     14px;
  --t-label:      11px;

  /* ---- WEIGHTS ---- */
  --w-display:    700;  /* Bold       */
  --w-heading:    600;  /* Semi Bold  */
  --w-body:       400;  /* Regular    */

  /* ---- LINE-HEIGHT ---- */
  --lh-display-xl: 0.86;
  --lh-display:    0.95;
  --lh-h1:         1.05;
  --lh-h2:         1.15;
  --lh-h3:         1.30;
  --lh-body-l:     1.45;
  --lh-body-m:     1.60;
  --lh-body-s:     1.55;
  --lh-label:      1.40;

  /* ---- LETTER-SPACING ---- */
  --ls-display-xl: -0.02em;
  --ls-display:    -0.015em;
  --ls-h1:         -0.01em;
  --ls-h2:         -0.005em;
  --ls-label:      0.24em;
}

@media (max-width: 1024px) {
  :root {
    --t-display: 72px; --t-h1: 48px; --t-h2: 32px; --t-h3: 20px;
    --t-body-l: 20px; --t-body-m: 16px; --t-body-s: 13px;
  }
}
@media (max-width: 640px) {
  :root {
    --t-display: 56px; --t-h1: 36px; --t-h2: 28px; --t-h3: 18px;
    --t-body-l: 18px; --t-body-m: 16px; --t-body-s: 13px;
  }
}

/* ============================================================
   TYPE CLASSES
   ============================================================ */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  font-weight: var(--w-display);
  text-transform: uppercase;
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-display);
}
.t-h1 { font-family: var(--font-display); font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--w-heading); }
.t-h2 { font-family: var(--font-display); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--w-heading); }
.t-h3 { font-family: var(--font-display); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: var(--w-heading); }

.t-body-l { font-family: var(--font-body); font-size: var(--t-body-l); line-height: var(--lh-body-l); font-weight: var(--w-body); }
.t-body-m { font-family: var(--font-body); font-size: var(--t-body-m); line-height: var(--lh-body-m); font-weight: var(--w-body); }
.t-body-s { font-family: var(--font-body); font-size: var(--t-body-s); line-height: var(--lh-body-s); font-weight: var(--w-body); }

.t-label, .t-nav {
  font-family: var(--font-body);
  font-size: var(--t-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: var(--w-body);
}