:root{
  --color-white: #FFFFFF;
  --color-offwhite: #F2F2F2;      /* also used as light surface/background */
  --color-brand: #6A6041;         /* deep olive (header + primary button bg) */
  --color-brand-ink: #857A59;     /* warm olive text on light bg */
  --color-sand: #A6986F;          /* warm sand background */
  --color-cream: #F2E8C9;         /* cream text on sand */
  --shadow-color: #00000029;      /* XD hex w/ alpha */
  --color-muted: #CCCCCC;
  --color-warning: #D9A443;

  --input-field-shadow: inset 0px 3px 6px #00000029;

  --font-heading: Georgia, serif;
  --font-body: "Proxima Nova", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Type sizes from XD */
  --welcome-text-heading-lg-size: 2.0625rem;  /* 33px */
  --welcome-text-heading-lg-line: 2.3125rem;  /* 37px */

  --text-heading-lg-size: 2.1875rem;          /* 35px */
  --text-heading-lg-line: 1.375rem;           /* 22px */

  --address-text-size: 1.125rem;              /* 18px */
  --address-text-line: 2.375rem;              /* 38px */

  --text-subhead-size: 1.25rem;               /* 20px */
  --text-subhead-line: 1.5rem;                /* 24px */

  --text-nav-total-size: 1.25rem;             /* 20px */
  --text-nav-total-line: 1.5rem;              /* 24px */

  --text-nav-label-size: 0.875rem;            /* 14px */
  --text-nav-label-line: 1.0625rem;           /* 17px */

  --text-body-size: 1rem;                     /* 16px */
  --text-body-line: 1.25rem;                  /* 20px */

  --text-btn-size: 1.5625rem;                 /* 25px */
  --text-btn-line: 1.875rem;                  /* 30px */
  --text-btn-size-md: 1.25rem;                /* 20px */
  --text-btn-line-md: 1.5625rem;              /* 25px */
  --weight-light: 300;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Radius / shadow */
  --radius-sm: .5rem;
  --radius-md: .625rem;
  --shadow-sm: 0 3px 6px var(--shadow-color);

  /* Sizing and spacing */
  --topbar-h: 4rem;                /* 64px */
  --tabbar1-h: 3.5rem;       /* tweak if needed */
  --tabbar2-h: 3rem;         /* tweak if needed */
  --sticky-stack: calc(var(--topbar-h) + var(--tabbar1-h) + var(--tabbar2-h));

  /* 'Device' viewport on example page */
  --device-w: 375px;
  --device-h: 690px;

  --screen-width: 375px; /* XD artboard */
  --touch-target: 44px;  /* accessibility baseline */
}

.c-screen{
  height: 100%;
  display: flex;
  flex-direction: column;
  --gutter: 15%;
  background: var(--color-offwhite);
}

/* On screens that have sticky bars, push content down */
.c-screen--menu{
  padding-top: var(--sticky-stack);
  position: relative;
}

/* Screens with sticky footer need breathing room */
.c-screen--has-sticky-footer{
  padding-bottom: 4.25rem; /* approx footer bar height */
}