/* =========================================================
   AUTUMN SCOOP — Colors & Type
   0% sugar added ice cream • Bangkok
   =========================================================
   Warm, earthy, editorial. Never pure black, never pure white.
   ========================================================= */

/* ---------- Fonts ------------------------------------------ */
@font-face {
  font-family: "Canela Text";
  src: url("fonts/Canela-Text-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Futura PT";
  src: url("fonts/FuturaPT.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== CORE PALETTE ============================== */
  /* Hero colors — pick one as the field, the other as the type */
  --terracotta:        #d14a3b;   /* primary brand red — logo, headlines */
  --vanilla-cream:     #f3eadb;   /* primary surface — packaging body */

  /* Warm supporting accents */
  --autumn-orange:     #e78f24;   /* sub-accent — fruity / energetic */
  --golden-beige:      #e8d889;   /* tertiary — warmth, banana, malt */
  --wood-brown:        #704214;   /* deepest grounding tone */
  --forest-green:      #64774b;   /* botanical accent — mint, tea, leaf */

  /* ===== FLAVOR COLORS (official, per flavor) ============
     Each flavor has one ground color. Use as packaging field,
     card background, or tinted hero stage. Pair with --ink for type. */
  --fl-peanut-butter:        #e29544;
  --fl-thai-tea:             #e19f7d;
  --fl-chiangmai-matcha:     #b5c295;
  --fl-yogurt:               #cee7fd;
  --fl-pistachio-oatmilk:    #6d714a;
  --fl-black-sesame:         #b3b5b3;
  --fl-mango-sorbet:         #fcbb25;
  --fl-chrysanthemum:        #edd7a2;
  --fl-mulberry-cheesecake:  #bf89a8;
  --fl-lemon-jasmine:        #f6de87;
  --fl-mulberry-sorbet:      #755467;
  --fl-rice:                 #c8e3f1;
  --fl-chocolate:            #865b48;
  --fl-hojicha:              #705d46;
  --fl-banana-cheese:        #fef3bd;
  --fl-coffee:               #6f4e37;

  /* ===== FOUNDATIONS (never #000 / #fff) =========== */
  --ink:               #2b1d14;   /* near-black — body text, line work */
  --ink-soft:          #5c4a3d;   /* secondary text */
  --ink-mute:          #8a7868;   /* tertiary / placeholder */

  --paper:             #faf4e8;   /* off-white surface — lighter than cream */
  --paper-warm:        #f6ecd8;   /* warm surface */
  --paper-edge:        #ead9b8;   /* divider / hairline on paper */

  /* ===== SEMANTIC ROLES ============================ */
  --bg:                var(--vanilla-cream);
  --bg-alt:            var(--paper);
  --bg-deep:           var(--wood-brown);

  --fg:                var(--ink);
  --fg-soft:           var(--ink-soft);
  --fg-mute:           var(--ink-mute);
  --fg-on-deep:        var(--vanilla-cream);

  --brand:             var(--terracotta);
  --brand-ink:         var(--terracotta);          /* used for inline brand-tinted text */
  --accent:            var(--autumn-orange);
  --accent-leaf:       var(--forest-green);
  --accent-warm:       var(--golden-beige);

  --hairline:          #d9c8a8;                    /* soft divider on cream */
  --hairline-strong:   #b89968;

  /* status — mapped onto the secondary palette, kept on-brand */
  --success:           var(--forest-green);   /* go / confirmed */
  --warn:              var(--autumn-orange);  /* attention / caution */
  --info:              var(--golden-beige);   /* neutral note */
  --danger:            var(--terracotta);     /* error — brand red itself */

  /* ===== TYPE FAMILIES ============================= */
  --font-display:      "Canela Text", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:         "Futura PT", "Futura", "Avenir Next", "Nunito Sans", system-ui, sans-serif;
  --font-script:       "Caveat", "Dancing Script", "Canela Text", cursive;   /* logo-adjacent */

  /* ===== TYPE SCALE — editorial, generous =========== */
  --fs-eyebrow:        13px;
  --fs-body-sm:        14px;
  --fs-body:           16px;
  --fs-body-lg:        18px;
  --fs-h6:             20px;
  --fs-h5:             24px;
  --fs-h4:             30px;
  --fs-h3:             38px;
  --fs-h2:             52px;
  --fs-h1:             72px;
  --fs-display:        104px;

  --lh-tight:          1.05;
  --lh-snug:           1.18;
  --lh-body:           1.55;
  --lh-loose:          1.75;

  --tracking-tight:    -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;   /* small caps eyebrows */

  /* ===== SPACING + RADII =========================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  --r-1:   6px;
  --r-2:   12px;
  --r-3:   20px;     /* default card */
  --r-4:   28px;
  --r-pill: 999px;

  /* ===== SHADOWS — soft, warm, never grey ========== */
  --shadow-1:  0 1px 2px rgba(107, 74, 48, 0.08);
  --shadow-2:  0 4px 14px rgba(107, 74, 48, 0.10);
  --shadow-3:  0 14px 34px rgba(107, 74, 48, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(107, 74, 48, 0.10);
}

/* ---------- Base elements ---------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Utility text styles ---------------------------- */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}

.script-mark {
  /* logo-adjacent script — small, decorative, brand-red */
  font-family: var(--font-script);
  color: var(--brand);
}

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

.caption {
  font-size: var(--fs-body-sm);
  color: var(--fg-mute);
  line-height: var(--lh-body);
}