:root {
  /* Surface */
  --we-bg-page: #F5F1EA;
  --we-bg-raised: #EFEAE0;
  --we-bg-deep: #1A1816;
  --we-bg-white: #FEFEFE;
  --we-bg-paper: #F7F6F3;
  --we-bg-soft-gray: #EBEBEB;
  --we-bg-stone: #E8E5E1;
  --we-bg-mist: #DEE4E4;
  --we-bg-black: #000000;

  /* Text */
  --we-text-primary: #2A2622;
  --we-text-secondary: #5C5650;
  --we-text-tertiary: #8A847C;
  --we-text-ghost: #B5AFA6;

  /* Accent */
  --we-accent: #8C7355;

  /* Lines */
  --we-line-hair: rgba(42, 38, 34, 0.08);
  --we-line-strong: rgba(42, 38, 34, 0.16);

  /* Typography */
  --we-font-display: "Neue Haas Grotesk Display", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Arial, sans-serif;
  --we-font-sans: "Roboto", Helvetica, Arial, sans-serif;
  --we-font-serif: "EB Garamond", Georgia, serif;
  --we-font-mono: "DM Mono", "JetBrains Mono", monospace;

  /* Motion */
  --we-ease-flow: cubic-bezier(0.32, 0.08, 0.24, 1);
  --we-dur-fast: 200ms;
  --we-dur-med: 320ms;
  --we-dur-slow: 480ms;

  /* Layout */
  --we-section-pad-y: 96px;
  --we-section-pad-x: 64px;
  --we-meta-col-width: 240px;
  --we-meta-gap: 48px;
  --we-thumb-gap: 24px;
}

@media (max-width: 900px) {
  :root {
    --we-section-pad-x: 32px;
    --we-meta-col-width: 100%;
    --we-meta-gap: 24px;
  }
}