/* Lota Coffee design tokens and local fonts */
@font-face {
  font-family: "Sukar-Black";
  src: url("fonts/sukar/Sukar\ Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukar-Light";
  src: url("fonts/sukar/Sukar\ Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSans-Normal";
  src: url("fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSans-Bold";
  src: url("fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OpenSans-Semi";
  src: url("fonts/open-sans/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --primary-green: #18321b;
  --primary-grey: #cbbfa4;
  --light-brown: #c9a75e;
  --dark-brown: #553f28;
  --primary-brown: #794816;

  /* Text colors */
  --text-dark: #0f1117;
  --text-light: #ffffff;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  /* Borders */
  --border-color: rgba(0, 0, 0, 0.12);
  --border-color-strong: rgba(0, 0, 0, 0.18);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Surfaces */
  --bg-page: #f0f2f5;
  --bg-card: #ffffff;
  --bg-subtle: #f8f9fb;
  --bg-row-alt: #dde6f7;
  --bg-dark: #5f5e5e;

  /* Fonts */
  --major-heading: "Sukar-Black", Georgia, serif;
  --minor-heading: "Sukar-Light", Georgia, serif;
  --sub-heading: "OpenSans-Bold", Arial, sans-serif;
  --sub-heading-1: "OpenSans-Semi", Arial, sans-serif;
  --paragraph: "OpenSans-Normal", Arial, sans-serif;

  /* Spacing scale */
  --sizing-1: 8px;
  --sizing-2: 16px;
  --sizing-3: 24px;
  --sizing-4: 32px;
  --sizing-5: 40px;
  --sizing-6: 48px;
  --sizing-7: 56px;
  --sizing-8: 64px;
  --sizing-9: 72px;
  --sizing-10: 80px;
  --sizing-11: 88px;
  --sizing-12: 96px;
  --sizing-13: 104px;
  --sizing-14: 112px;
  --sizing-15: 120px;

  --transition: 0.22s ease;
  --content-width: 1200px;
}