@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@800;900&family=Inter+Tight:wght@600;800&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --pt-yellow: #FFC31F;
  --pt-roast: #2B1A10;
  --pt-cream: #FFF5E1;
  --pt-crust: #E07B1F;
  --pt-butter: #FFE38A;
  --pt-chili: #E2432A;
  --pt-roast-70: rgba(43, 26, 16, .7);
  --pt-roast-12: rgba(43, 26, 16, .12);

  --pt-sauce-corn-coconut: #F7D888;
  --pt-sauce-cheese: #FFB21C;
  --pt-sauce-thai-tea: #E8803A;
  --pt-sauce-pandan-custard: #9CC65A;
  --pt-sauce-salted-caramel: #C0742E;
  --pt-sauce-korean-honey: #D9362B;
  --pt-sauce-choco-malt: #5B3220;
  --pt-sauce-taro-milk: #BE9BE0;

  --pt-font-display: 'Prompt', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --pt-font-latin: 'Inter Tight', 'Prompt', system-ui, sans-serif;
  --pt-font-text: 'IBM Plex Sans Thai', system-ui, sans-serif;
  --pt-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --pt-size-hero: 10rem;
  --pt-size-h1: 5.5rem;
  --pt-size-h2: 3.5rem;
  --pt-size-h3: 2rem;
  --pt-size-label: 0.875rem;
  --pt-size-body-lg: 1.25rem;
  --pt-size-body: 1rem;
  --pt-size-small: 0.8125rem;
  --pt-size-num: 0.875rem;
  --pt-size-price: 2.5rem;

  --pt-space-0: 0px;
  --pt-space-1: 4px;
  --pt-space-2: 8px;
  --pt-space-3: 12px;
  --pt-space-4: 16px;
  --pt-space-5: 24px;
  --pt-space-6: 32px;
  --pt-space-7: 48px;
  --pt-space-8: 64px;
  --pt-space-9: 96px;
  --pt-space-10: 128px;
  --pt-radius-none: 0px;
  --pt-radius-sm: 6px;
  --pt-radius-md: 12px;
  --pt-radius-lg: 20px;
  --pt-radius-xl: 32px;
  --pt-radius-pill: 999px;
  --pt-shadow-food: 0 24px 48px -16px rgba(43,26,16,.45);
  --pt-shadow-card: 0 1px 0 rgba(43,26,16,.08), 0 12px 32px -12px rgba(43,26,16,.25);
}

.pt-hero { font-family: var(--pt-font-display); font-weight: 900; font-size: clamp(4rem, 18vw, var(--pt-size-hero)); line-height: .86; letter-spacing: -.01em; color: var(--pt-roast); }
.pt-h1 { font-family: var(--pt-font-display); font-weight: 900; font-size: clamp(2.5rem, 9vw, var(--pt-size-h1)); line-height: .9; letter-spacing: -.01em; }
.pt-h2 { font-family: var(--pt-font-display); font-weight: 900; font-size: var(--pt-size-h2); line-height: .95; }
.pt-h3 { font-family: var(--pt-font-display); font-weight: 800; font-size: var(--pt-size-h3); line-height: 1.1; }
.pt-label { font-family: var(--pt-font-latin); font-weight: 800; font-size: var(--pt-size-label); letter-spacing: .12em; text-transform: uppercase; }
.pt-body { font-family: var(--pt-font-text); font-weight: 400; font-size: var(--pt-size-body); line-height: 1.6; }
.pt-num { font-family: var(--pt-font-mono); font-weight: 600; font-size: var(--pt-size-num); letter-spacing: .04em; }
.pt-price { font-family: var(--pt-font-display); font-weight: 900; font-size: var(--pt-size-price); line-height: 1; }
.pt-rule { border: 0; border-top: 2px solid currentColor; }