/* =============================================================
   PORTIMÃO SOUP KITCHEN — COLORS & TYPE
   Single source of truth for design tokens + semantic styles.
   Mirrors the production styles.css. Import this file directly.
   ============================================================= */

/* Self-hosted variable Nunito (uploaded by brand) */
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLORS — sand & paper (warm neutrals) ---------- */
  --sand-50:  #FBF5EA;
  --sand-100: #F5E9D4;
  --sand-200: #EDD9B8;
  --cream:    #FAF3E7;
  --paper:    #F7EEDD;

  /* ---------- COLORS — sunset (primary brand) ---------- */
  --terracotta-700: #9A3A1E;
  --terracotta-600: #B8451F;   /* primary accent text / links */
  --terracotta-500: #C8502E;   /* hover accents */
  --coral-500:      #E87A5D;   /* warm secondary */
  --sun-500:        #E8A84A;   /* amber */
  --sun-300:        #F3C76A;   /* soft amber */

  /* ---------- COLORS — teal (deep ink) ---------- */
  --teal-900: #132A2D;         /* primary heading + ink */
  --teal-800: #1F3A3D;
  --teal-700: #2A5458;
  --teal-500: #3E7478;

  /* ---------- COLORS — semantic ink ---------- */
  --ink:       #132A2D;
  --ink-soft:  #3D4F50;
  --ink-faint: #6C7C7D;

  /* ---------- GRADIENTS ---------- */
  --orange-gradient: linear-gradient(90deg, #F59E63, #EF7D4E 50%, #F3B05A);
  --btn-gradient:    linear-gradient(90deg, #F59E63, #EF7D4E);
  --card-gradient:   linear-gradient(135deg, #FFF1E0 0%, #FDF8EE 45%, #EFF3E8 100%);
  --page-gradient:   linear-gradient(180deg, #FBF6EC 0%, #F6EEDD 100%);

  /* ---------- BORDERS / SHADOWS / RADII ---------- */
  --card-border:  1px solid rgba(19,42,45,.06);
  --hairline:     1px solid rgba(19,42,45,.08);
  --shadow-card:  0 4px 14px -10px rgba(19,42,45,.15);
  --shadow-heavy: 0 8px 24px -16px rgba(19,42,45,.20);
  --shadow-glow:  0 6px 16px -8px rgba(239,125,78,.55);
  --shadow-feature: 0 20px 50px -24px rgba(239,125,78,.45);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (8pt scale, with 4pt half-step) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 100px;

  /* ---------- TYPE TOKENS ---------- */
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-eyebrow: 15px;
  --fs-body:    16px;
  --fs-lede:    22px;
  --fs-h3:      24px;
  --fs-h2:      48px;
  --fs-h1:      64px;
  --fs-display: 84px;

  --lh-tight: 1.0;
  --lh-snug:  1.1;
  --lh-base:  1.55;
  --lh-loose: 1.6;

  --tracking-tight: -0.04em;
  --tracking-cap:    0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---------- VINE & FIRE PALETTE (per build brief) ----------
     Namespaced as --vnf-* to avoid clashing with global --ink/--gold
     and the local --vf-* tokens in events/vine-and-fire/event.css. */
  --vnf-ink:    #08140D;
  --vnf-ash:    #14201A;
  --vnf-soot:   #1F2D24;
  --vnf-bone:   #F4EDE1;
  --vnf-bone-2: #E8DEC9;
  --vnf-candle: #F6CF85;
  --vnf-ember:  #C25A2A;
  --vnf-gold:   #B88A3C;
  --vnf-vine:   #56713E;
  --vnf-smoke:  #7A786F;
  --vnf-rule:   rgba(244,237,225,0.16);
  --vnf-rule-2: rgba(8,20,13,0.16);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.ds-h1, h1.ds {
  font-family: var(--font-sans);
  font-size: clamp(44px, 6vw, var(--fs-display));
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
  color: var(--teal-900);
}

.ds-h2, h2.ds {
  font-family: var(--font-sans);
  font-size: clamp(36px, 5.5vw, 60px);
  font-weight: var(--fw-black);
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--teal-900);
}

.ds-h3, h3.ds {
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  color: var(--teal-900);
  line-height: 1.2;
}

.ds-lede {
  font-size: clamp(19px, 2vw, var(--fs-lede));
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--teal-900);
}

.ds-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  color: var(--terracotta-600);
}

.ds-cap {
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-cap);
  color: var(--terracotta-500);
}

.ds-meta {
  font-size: 14px;
  color: var(--ink-soft);
}

.ds-faint {
  font-size: 14px;
  color: var(--ink-faint);
}

/* Gradient emphasis on <em> inside headings — signature pattern */
.ds-h1 em, .ds-h2 em, h1.ds em, h2.ds em {
  font-style: normal;
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}