:root{
  /* Colors */
  --c-bg: #F2F2F2;         /* Main page background */
  --c-text: #111111;       /* Default text color */
  --c-primary: #400F0A;    /* Brand / main action color (buttons, links, highlights) */
  --c-on-primary: #F2F2F2; /* Text/icon color shown on top of primary background */
  --c-muted: #8C6258;      /* Secondary / muted text (meta, hints, placeholders) */

  /* Button config */
  --btn-bg: var(--c-primary); /* Button background color */
  --btn-fg: var(--c-on-primary); /* Button text/icon color on the background */
  --btn-bg-hover: color-mix(in srgb, var(--c-primary) 85%, #000); /* Hover background (slightly darker primary) */
  --btn-radius: var(--r-lg, 14px); /* Button corner radius (falls back to 14px) */
  --btn-py: 0.85em; /* Vertical padding (top/bottom) */
  --btn-px: 1.15em; /* Horizontal padding (left/right) */
  --btn-shadow: var(--sh-1, 0 8px 24px rgba(0,0,0,.12)); /* Button shadow (falls back to a soft default) */

    /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  /* shadow */
  --sh-1: 0 8px 24px rgba(0,0,0,.12);

}