/* Getta Smoothie — generated from tokens.json by tools/build-tokens.mjs. Do not edit by hand. */

@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("../fonts/Rubik-Variable.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Baloo Bhaijaan 2"; src: url("../fonts/BalooBhaijaan2-Variable.woff2") format("woff2"), url("../fonts/BalooBhaijaan2-Variable.ttf") format("truetype"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-sand: #f7f1ea;
  --line: #efe3dc;
  --line-strong: #96827a;
  --ink: #3b2620;
  --ink-muted: #6f5a54;
  --getta-red: #d23c4b;
  --red-press: #b32d3c;
  --on-red: #ffffff;
  --blush: #fde6ef;
  --peach: #ffeadf;
  --butter: #fff1c9;
  --deep: #3b2620;
  --on-deep: #fde6ef;
  --flavour-berry: #a81f48;
  --flavour-peach: #f37578;
  --flavour-straw: #f8b6c2;
  --flavour-mango: #bcd15e;
  --flavour-blue: #5ac5c8;
  --on-flavour: #3b2620;
  --on-berry: #ffffff;
  --tint-berry: #fbe6ee;
  --tint-peach: #feeae6;
  --tint-straw: #fdeef1;
  --tint-mango: #f2f6df;
  --tint-blue: #e2f5f5;
  --focus: #3b2620;
  --focus-on-deep: var(--on-deep);
  --link: var(--getta-red);
  --kraft: #c9a47c;
  --shadow-float: 0 12px 30px #3b26201a;
  --shadow-drink: 0 18px 22px #3b262029;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 9999px;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-sans: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "Baloo Bhaijaan 2", "Noto Sans Arabic", Tahoma, sans-serif;
}

.display-xl { font-family: var(--font-display); font-size: 96px; line-height: 0.95; font-weight: 720; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 720; letter-spacing: -0.02em; }
.display-m { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; }
.title { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 680; letter-spacing: -0.01em; }
.title-s { font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 680; }
.body-l { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.body-s { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.button { font-family: var(--font-sans); font-size: 17px; line-height: 20px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.1em; }
.slide-xl { font-family: var(--font-display); font-size: 128px; line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; }
.slide-l { font-family: var(--font-display); font-size: 80px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.slide-m { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.slide-body-l { font-family: var(--font-sans); font-size: 30px; line-height: 40px; font-weight: 400; }
.slide-body { font-family: var(--font-sans); font-size: 24px; line-height: 34px; font-weight: 400; }
.post-xl { font-family: var(--font-display); font-size: 150px; line-height: 0.95; font-weight: 720; letter-spacing: -0.02em; }
.post-l { font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 720; letter-spacing: -0.02em; }
.post-title { font-family: var(--font-display); font-size: 56px; line-height: 1.05; font-weight: 680; letter-spacing: -0.01em; }
.post-body { font-family: var(--font-sans); font-size: 32px; line-height: 42px; font-weight: 400; }
.post-small { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 500; }
.ar-display-xl { font-family: var(--font-arabic); font-size: 96px; line-height: 1.3; font-weight: 800; }
.ar-display-l { font-family: var(--font-arabic); font-size: 64px; line-height: 1.3; font-weight: 800; }
.ar-display-m { font-family: var(--font-arabic); font-size: 44px; line-height: 1.3; font-weight: 800; }
.ar-title { font-family: var(--font-arabic); font-size: 30px; line-height: 1.35; font-weight: 700; }
.ar-title-s { font-family: var(--font-arabic); font-size: 22px; line-height: 1.4; font-weight: 700; }
.ar-body-l { font-family: var(--font-arabic); font-size: 20px; line-height: 34px; font-weight: 500; }
.ar-body { font-family: var(--font-arabic); font-size: 17px; line-height: 30px; font-weight: 500; }
.ar-body-s { font-family: var(--font-arabic); font-size: 16px; line-height: 27px; font-weight: 500; }
.ar-button { font-family: var(--font-arabic); font-size: 17px; line-height: 24px; font-weight: 700; }
.ar-label { font-family: var(--font-arabic); font-size: 15px; line-height: 22px; font-weight: 700; }