/* =====================================================
   泰有福 Thai Blessing Food — Foundations
   Colors & Typography tokens
   ===================================================== */

/* -------- Fonts (Google Fonts substitutions) ----------
   Brand logotype (泰有福) uses a custom Chinese brush script. Closest free
   match on Google Fonts: Ma Shan Zheng (毛笔书法风格).
   The "Thai" decorative serif in the lockup is bespoke — Cormorant Garamond
   is our nearest display serif, paired with a tight tracked small-caps for
   "Blessing Food".
   Body: Noto Sans SC (Chinese) + Inter-like pairing via Noto Sans.
*/
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+SC:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=Caveat:wght@500;700&display=swap');

:root {
  /* ============ COLOR — BRAND ============ */
  /* Sampled from the logo directly */
  --brand-green:         #005000;  /* elephant mark, primary brand */
  --brand-green-deep:    #003a00;  /* for darker backgrounds */
  --brand-green-soft:    #2a6b2a;  /* hover / accents */
  --brand-gold:          #b48c6c;  /* Thai ornament, warm tan-gold */
  --brand-gold-deep:     #8c6a4a;  /* pressed / serious */
  --brand-gold-soft:     #d7b594;  /* subtle gold tint */
  --brand-ink:           #1a1a1a;  /* calligraphy black */

  /* ============ COLOR — NEUTRALS (Coconut & Bamboo) ============ */
  --coconut-00:          #ffffff;
  --coconut-50:          #fbf8f2;  /* page background, warm cream */
  --coconut-100:         #f4ede0;  /* surface, rice paper */
  --coconut-200:         #e8dcc4;  /* borders, dividers */
  --coconut-300:         #d4c4a3;  /* muted gold hairline */
  --bamboo-400:          #a89878;  /* tertiary text */
  --bamboo-500:          #7a6a50;  /* secondary text */
  --bamboo-600:          #4d4030;  /* body text on cream */
  --bamboo-700:          #2d2418;  /* headings */
  --bamboo-800:          #1a1410;  /* near-black */

  /* ============ COLOR — SEMANTIC ============ */
  --bg-page:             var(--coconut-50);
  --bg-surface:          var(--coconut-00);
  --bg-raised:           var(--coconut-100);
  --bg-sunken:           #f1e9d9;
  --bg-inverse:          var(--brand-green-deep);

  --fg-primary:          var(--bamboo-700);
  --fg-secondary:        var(--bamboo-500);
  --fg-tertiary:         var(--bamboo-400);
  --fg-on-brand:         var(--coconut-50);
  --fg-on-gold:          var(--bamboo-800);
  --fg-accent:           var(--brand-green);
  --fg-accent-gold:      var(--brand-gold-deep);

  --border-subtle:       var(--coconut-200);
  --border-default:      var(--coconut-300);
  --border-strong:       var(--bamboo-500);
  --border-brand:        var(--brand-green);
  --border-gold:         var(--brand-gold);

  /* State */
  --state-success:       #4a7c3a;   /* pandan */
  --state-warning:       #c88a2e;   /* turmeric */
  --state-danger:        #a83232;   /* chili */
  --state-info:          #3a6b7c;   /* river */

  /* Surface tints for informational banners */
  --tint-success:        #ecf2e4;
  --tint-warning:        #f7ecd7;
  --tint-danger:         #f4e2e0;
  --tint-info:           #e2ecef;

  /* ============ TYPOGRAPHY — FAMILIES ============ */
  /* Display — brush / hand-lettered character for headlines */
  --font-brush-cn:       'Ma Shan Zheng', 'Noto Serif SC', serif;
  --font-brush-alt-cn:   'ZCOOL KuaiLe', 'Noto Serif SC', serif;
  --font-display-en:     'Cormorant Garamond', 'Noto Serif SC', serif;
  --font-display-sc:     'Cormorant SC', 'Noto Serif SC', serif;
  --font-script:         'Caveat', 'Ma Shan Zheng', cursive;

  /* Text — clean, bilingual body */
  --font-serif-cn:       'Noto Serif SC', 'Cormorant Garamond', serif;
  --font-sans:           'DM Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-sans-cn:        'Noto Sans SC', 'DM Sans', -apple-system, sans-serif;
  --font-mono:           ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ============ TYPOGRAPHY — SIZES ============ */
  --size-xs:   12px;
  --size-sm:   14px;
  --size-md:   16px;
  --size-lg:   18px;
  --size-xl:   22px;
  --size-2xl:  28px;
  --size-3xl:  36px;
  --size-4xl:  48px;
  --size-5xl:  64px;
  --size-6xl:  88px;
  --size-7xl:  120px;

  /* Line height */
  --lh-tight:  1.08;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.14em;    /* for BLESSING FOOD treatment */

  /* ============ SPACING ============ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ============ RADII ============ */
  /* The brand is organic/hand-drawn — radii are generous but not slick */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-2xl:   28px;
  --radius-pill:  999px;
  --radius-circle: 50%;

  /* ============ SHADOWS ============ */
  /* Warm-toned shadows (slight brown undertone) rather than cool grey */
  --shadow-xs:  0 1px 2px rgba(77, 64, 48, 0.08);
  --shadow-sm:  0 2px 6px rgba(77, 64, 48, 0.10);
  --shadow-md:  0 6px 18px rgba(77, 64, 48, 0.12), 0 2px 4px rgba(77, 64, 48, 0.06);
  --shadow-lg:  0 16px 40px rgba(77, 64, 48, 0.16), 0 4px 10px rgba(77, 64, 48, 0.08);
  --shadow-xl:  0 30px 80px rgba(45, 36, 24, 0.22), 0 8px 20px rgba(45, 36, 24, 0.10);
  --shadow-inset: inset 0 1px 2px rgba(77, 64, 48, 0.12);

  /* Hairline borders on cards (we use this a lot — softer than shadow) */
  --hairline:    1px solid var(--coconut-200);
  --hairline-gold: 1px solid var(--brand-gold-soft);

  /* ============ MOTION ============ */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:  cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit:      cubic-bezier(0.4, 0, 1, 1);
  --ease-breath:    cubic-bezier(0.37, 0, 0.63, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   380ms;
  --dur-slower: 560ms;

  /* ============ LAYOUT ============ */
  --container-sm: 640px;
  --container-md: 840px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}

/* =====================================================
   SEMANTIC TYPE CLASSES
   ===================================================== */

.tbf-display-brush {
  font-family: var(--font-brush-cn);
  font-weight: 400;
  font-size: var(--size-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--brand-ink);
}

.tbf-display-serif {
  font-family: var(--font-display-en);
  font-weight: 500;
  font-style: italic;
  font-size: var(--size-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--bamboo-800);
}

.tbf-eyebrow {
  font-family: var(--font-display-sc);
  font-weight: 500;
  font-size: var(--size-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-gold-deep);
}

.tbf-h1 {
  font-family: var(--font-display-en);
  font-weight: 500;
  font-style: italic;
  font-size: var(--size-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--bamboo-800);
}

.tbf-h1-cn {
  font-family: var(--font-brush-cn);
  font-weight: 400;
  font-size: var(--size-4xl);
  line-height: var(--lh-tight);
  color: var(--bamboo-800);
}

.tbf-h2 {
  font-family: var(--font-display-en);
  font-weight: 600;
  font-size: var(--size-3xl);
  line-height: var(--lh-snug);
  color: var(--bamboo-700);
}

.tbf-h2-cn {
  font-family: var(--font-serif-cn);
  font-weight: 600;
  font-size: var(--size-3xl);
  line-height: var(--lh-snug);
  color: var(--bamboo-700);
}

.tbf-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--size-xl);
  line-height: var(--lh-snug);
  color: var(--bamboo-700);
}

.tbf-body {
  font-family: var(--font-sans-cn);
  font-weight: 400;
  font-size: var(--size-md);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.tbf-body-lg {
  font-family: var(--font-sans-cn);
  font-weight: 400;
  font-size: var(--size-lg);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.tbf-body-sm {
  font-family: var(--font-sans-cn);
  font-weight: 400;
  font-size: var(--size-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.tbf-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--size-xs);
  line-height: var(--lh-snug);
  color: var(--fg-tertiary);
  letter-spacing: var(--ls-wide);
}

.tbf-smallcaps {
  font-family: var(--font-display-sc);
  font-weight: 600;
  font-size: var(--size-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--bamboo-700);
}

.tbf-price {
  font-family: var(--font-display-en);
  font-weight: 500;
  font-style: italic;
  font-size: var(--size-2xl);
  color: var(--brand-gold-deep);
}

.tbf-script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: var(--size-3xl);
  color: var(--brand-gold-deep);
  line-height: 1;
}

/* Resetty base */
body.tbf-reset {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans-cn);
  font-size: var(--size-md);
  line-height: var(--lh-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}