/* ============================================================
   Design tokens
   ============================================================ */
:root {
  /* Surfaces */
  --color-surface:                  #fbf9f4;
  --color-surface-dim:              #dbdad5;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f5f3ee;
  --color-surface-container:        #f0eee9;
  --color-surface-container-high:   #eae8e3;
  --color-surface-container-highest:#e4e2dd;
  --color-surface-variant:          #e4e2dd;
  --color-background:               #fbf9f4;

  /* Content on surfaces */
  --color-on-surface:               #1b1c19;
  --color-on-surface-variant:       #434841;
  --color-on-background:            #1b1c19;
  --color-outline:                  #737971;
  --color-outline-variant:          #c3c8bf;

  /* Primary — Sage Green */
  --color-primary:                  #4d644b;
  --color-on-primary:               #ffffff;
  --color-primary-container:        #8da689;
  --color-on-primary-container:     #263b25;
  --color-primary-fixed:            #cfeaca;
  --color-primary-fixed-dim:        #b4ceaf;
  --color-on-primary-fixed:         #0b200c;
  --color-on-primary-fixed-variant: #364c35;

  /* Secondary — Peach */
  --color-secondary:                #81533b;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:      #ffc1a3;
  --color-on-secondary-container:   #7a4d35;
  --color-secondary-fixed:          #ffdbcb;
  --color-secondary-fixed-dim:      #f5b99b;
  --color-on-secondary-fixed:       #2c1600;
  --color-on-secondary-fixed-variant: #5c3617;

  /* Tertiary — Sandy/Brown */
  --color-tertiary:                 #6b5c4c;
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:       #ae9c8a;
  --color-on-tertiary-container:    #403426;
  --color-tertiary-fixed:           #f4dfcb;
  --color-tertiary-fixed-dim:       #d7c3b0;
  --color-on-tertiary-fixed:        #241a0e;

  /* Error */
  --color-error:                    #ba1a1a;
  --color-on-error:                 #ffffff;
  --color-error-container:          #ffdad6;
  --color-on-error-container:       #93000a;

  /* Inverse */
  --color-inverse-surface:          #30312e;
  --color-inverse-on-surface:       #f2f1ec;
  --color-inverse-primary:          #b4ceaf;

  /* Typography */
  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-display-lg-size:    32px;
  --text-display-lg-lh:      40px;
  --text-display-lg-weight:  700;
  --text-display-lg-ls:      -0.02em;

  --text-headline-lg-size:   28px;
  --text-headline-lg-lh:     34px;
  --text-headline-lg-weight: 700;

  --text-headline-md-size:   24px;
  --text-headline-md-lh:     32px;
  --text-headline-md-weight: 600;
  --text-headline-md-ls:     -0.01em;

  --text-headline-sm-size:   20px;
  --text-headline-sm-lh:     28px;
  --text-headline-sm-weight: 600;

  --text-body-lg-size:       16px;
  --text-body-lg-lh:         24px;
  --text-body-lg-weight:     400;

  --text-body-md-size:       14px;
  --text-body-md-lh:         20px;
  --text-body-md-weight:     400;

  --text-label-md-size:      12px;
  --text-label-md-lh:        16px;
  --text-label-md-weight:    600;
  --text-label-md-ls:        0.05em;

  /* Spacing */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-margin: 20px;
  --space-gutter: 12px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-lh);
  color: var(--color-on-background);
  background: var(--color-background);
  margin: 0;
  padding: 0;
}

a { text-decoration: none; color: inherit; }

/* ============================================================
   Typography utilities
   ============================================================ */
.text-display-lg  { font-size: var(--text-display-lg-size);  line-height: var(--text-display-lg-lh);  font-weight: var(--text-display-lg-weight);  letter-spacing: var(--text-display-lg-ls,  normal); }
.text-headline-lg { font-size: var(--text-headline-lg-size); line-height: var(--text-headline-lg-lh); font-weight: var(--text-headline-lg-weight); }
.text-headline-md { font-size: var(--text-headline-md-size); line-height: var(--text-headline-md-lh); font-weight: var(--text-headline-md-weight); letter-spacing: var(--text-headline-md-ls, normal); }
.text-headline-sm { font-size: var(--text-headline-sm-size); line-height: var(--text-headline-sm-lh); font-weight: var(--text-headline-sm-weight); }
.text-body-lg     { font-size: var(--text-body-lg-size);     line-height: var(--text-body-lg-lh);     font-weight: var(--text-body-lg-weight);     }
.text-body-md     { font-size: var(--text-body-md-size);     line-height: var(--text-body-md-lh);     font-weight: var(--text-body-md-weight);     }
.text-label-md    { font-size: var(--text-label-md-size);    line-height: var(--text-label-md-lh);    font-weight: var(--text-label-md-weight);    letter-spacing: var(--text-label-md-ls, normal); }

/* ============================================================
   Page layout
   ============================================================ */
.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-margin);
  padding-top: 72px;
  padding-bottom: 80px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
  display: block;
  width: 100%;
  min-height: 48px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  cursor: pointer;
  padding: 0 var(--space-lg);
}

.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  display: block;
  width: 100%;
  min-height: 48px;
  background: none;
  color: var(--color-secondary);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  cursor: pointer;
  padding: 0 var(--space-lg);
}

.btn-destructive {
  background: none;
  border: none;
  color: var(--color-error);
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  cursor: pointer;
  min-height: 48px;
  padding: 0;
}

/* ============================================================
   Inputs
   ============================================================ */
.input {
  display: block;
  width: 100%;
  min-height: 48px;
  background: var(--color-surface-container-low);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  color: var(--color-on-surface);
  padding: 0 var(--space-md);
  outline: none;
  transition: border-color 0.15s;
}

.input:focus { border-color: var(--color-primary); }

.textarea {
  display: block;
  width: 100%;
  background: var(--color-surface-container-low);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  color: var(--color-on-surface);
  padding: var(--space-md);
  outline: none;
  resize: none;
  transition: border-color 0.15s;
}

.textarea:focus { border-color: var(--color-primary); }

.form-field { display: flex; flex-direction: column; gap: var(--space-sm); }

.form-label {
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
  color: var(--color-on-surface-variant);
}

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  box-shadow: 0 4px 20px -2px rgba(77, 100, 75, 0.08);
}

/* ============================================================
   Chips & badges
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-2xl);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.chip.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.badge-none, .badge-positive {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
}

.badge-neutral {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
}

.badge-allergic {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed-variant);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
}

/* ============================================================
   Top app bar
   ============================================================ */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-outline-variant);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-md);
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  font-weight: 600;
}

.topbar-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius-full);
}

/* Centred logo slot inside the fixed topbar */
.topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  pointer-events: none;
}

/* ============================================================
   Bottom nav
   ============================================================ */
.bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(251, 249, 244, 0.8);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

a.bottomnav-tab { text-decoration: none; }

.bottomnav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-height: 48px;
  color: var(--color-on-surface-variant);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
  cursor: pointer;
  padding: var(--space-sm);
  border-radius: var(--radius-full);
  text-align: center;
}

.bottomnav-tab.active {
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  border-radius: var(--radius-2xl);
}

.bottomnav-tab.disabled {
  color: var(--color-outline-variant);
  pointer-events: none;
}

/* ============================================================
   Avatar
   ============================================================ */
.avatar {
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Avatar edit affordance */
.avatar-edit {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  border-radius: var(--radius-full);
  background: none;
  border: none;
  padding: 0;
}

.avatar-edit:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.avatar-edit .avatar-edit-overlay {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.avatar-edit:hover .avatar-edit-overlay,
.avatar-edit:focus .avatar-edit-overlay {
  opacity: 1;
}

.avatar-edit .avatar-edit-overlay .icon {
  width: 22px;
  height: 22px;
  color: #fff;
}

.avatar-edit--sm .avatar-edit-overlay .icon {
  width: 14px;
  height: 14px;
}

/* ============================================================
   Dashed add button
   ============================================================ */
.dashed-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: 2px dashed var(--color-outline-variant);
  border-radius: var(--radius-xl);
  color: var(--color-primary);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
  cursor: pointer;
  width: 100%;
  padding: var(--space-md);
  background: none;
}

/* ============================================================
   FAB (Floating Action Button)
   ============================================================ */
.fab {
  position: fixed;
  bottom: calc(80px + var(--space-lg));
  right: var(--space-margin);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-primary-container);
  color: var(--color-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(77, 100, 75, 0.3);
  z-index: 50;
}

/* ============================================================
   SVG icon utility
   ============================================================ */
.icon {
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================================================
   Log page — filter bar, timeline, entry cards
   ============================================================ */
.filter-bar {
  position: sticky;
  top: 56px;
  background: rgba(251, 249, 244, 0.95);
  backdrop-filter: blur(12px);
  z-index: 40;
  padding: var(--space-md) 0;
  margin: 0 calc(-1 * var(--space-margin));
  padding-left: var(--space-margin);
  padding-right: var(--space-margin);
  margin-bottom: var(--space-sm);
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-variant);
  pointer-events: none;
}

.search-input {
  width: 100%;
  min-height: 44px;
  background: var(--color-surface-container-low);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  padding: 0 var(--space-md) 0 calc(var(--space-md) + 28px);
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.15s;
}

.search-input:focus { border-color: var(--color-primary); }

.chips-scroll {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.chips-scroll::-webkit-scrollbar { display: none; }

.date-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-sm);
}

.date-divider-label { color: var(--color-on-surface-variant); }

.date-divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-outline-variant);
}

.log-entry {
  position: relative;
  overflow: hidden;
}

.log-entry-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.log-icon-tile {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
  background: var(--color-surface-container-high);
}

.log-icon-tile--positive {
  background: rgba(143, 166, 137, 0.25);
  color: var(--color-on-primary-container);
}

.log-icon-tile--allergic {
  background: rgba(255, 193, 163, 0.3);
  color: var(--color-on-secondary-container);
}

.log-entry-content { flex: 1; min-width: 0; }

.log-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-right: var(--space-xl);
}

.log-entry-delete {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-outline);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--radius-full);
}

.log-entry-delete:hover { color: var(--color-error); }

.new-food-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(174, 156, 138, 0.2);
  color: var(--color-on-tertiary-container);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  letter-spacing: var(--text-label-md-ls);
  padding: 3px var(--space-sm);
  border-bottom-left-radius: var(--radius-md);
}

/* ============================================================
   Log form — reaction tiles, food search, save button
   ============================================================ */
.reaction-tiles {
  display: flex;
  gap: var(--space-sm);
}

.reaction-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 72px;
  border: 2px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  background: var(--color-surface-container-low);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-on-surface-variant);
  transition: border-color 0.15s, background 0.15s;
}

.reaction-tile[data-value="positive"].selected {
  border-color: var(--color-primary);
  background: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
}

.reaction-tile[data-value="neutral"].selected {
  border-color: var(--color-outline);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

.reaction-tile[data-value="allergic"].selected {
  border-color: var(--color-secondary);
  background: var(--color-secondary-fixed);
  color: var(--color-on-secondary-fixed-variant);
}

.food-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.food-dropdown-item {
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-size: var(--text-body-md-size);
}

.food-dropdown-item:hover { background: var(--color-surface-container-low); }

.btn-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  background: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-family);
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  cursor: pointer;
}

.btn-save:hover { opacity: 0.9; }

/* ============================================================
   Login page
   ============================================================ */
.login-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  color: var(--color-primary);
  z-index: 50;
  max-width: 480px;
  margin: 0 auto;
}

.login-logo-icon {
  width: 28px;
  height: 28px;
}

.login-logo-text {
  color: var(--color-on-surface);
}

.login-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 80px var(--space-margin) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.login-hero {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 4px 20px -2px rgba(77, 100, 75, 0.12);
  aspect-ratio: 4/3;
}

.login-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.login-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(251, 249, 244, 0.4), transparent);
}

.login-hero-text {
  position: absolute;
  bottom: var(--space-lg);
  left: var(--space-md);
  right: var(--space-md);
  text-align: center;
}

.login-hero-heading {
  color: var(--color-on-surface);
  margin: 0 0 var(--space-xs);
}

.login-hero-sub {
  color: var(--color-on-surface-variant);
  max-width: 280px;
  margin: 0 auto;
}

.login-error {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
  border-radius: var(--radius-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-body-md-size);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-form--hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.toggle-btn { text-align: center; }

.login-reg-closed {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-on-surface-variant);
  margin-bottom: var(--space-sm, 8px);
}

.login-version {
  text-align: center;
  font-size: 0.65rem;
  color: var(--color-on-surface-variant);
  opacity: 0.5;
  margin-top: var(--space-xs, 4px);
}

.login-footer {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-margin);
  max-width: 480px;
  margin: 0 auto;
}

.login-footer-link {
  color: var(--color-on-surface-variant);
}

/* ── Error state (404, etc.) ─────────────────────────────────────────── */

.page--center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 56px - 80px); /* subtract topbar + bottomnav */
  padding: var(--space-xl) var(--space-margin);
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  max-width: 320px;
}

.error-state__icon {
  width: 64px;
  height: 64px;
  color: var(--color-primary-container);
}

.error-state__code {
  font-size: var(--text-display-lg-size);
  font-weight: var(--text-display-lg-weight);
  line-height: var(--text-display-lg-lh);
  color: var(--color-primary);
  margin: 0;
}

.error-state__heading {
  font-size: var(--text-headline-sm-size);
  font-weight: var(--text-headline-sm-weight);
  line-height: var(--text-headline-sm-lh);
  color: var(--color-on-surface);
  margin: 0;
}

.error-state__body {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--color-on-surface-variant);
  margin: 0;
}