/* Global CSS Variables */

  :root {
    --max-width: 680px;

    /* =========================
       Base Surfaces
    ========================== */
    --color-bg-page: #faf9f7;
    --color-bg-promo: #f2f0eb;

    /* =========================
       Text Colors
    ========================== */
    --color-text-primary: #1a1a1a;
    --color-text-body: #2a2a2a;
    --color-text-muted: #757575;
    --color-text-heading: #000000;

    /* =========================
       Brand Accent (Green)
    ========================== */
    --color-accent-green: #6B8E23;
    --color-accent-green-85: rgba(107, 142, 35, 0.85);
    --color-accent-green-75: rgba(107, 142, 35, 0.75);
    --color-accent-green-60: rgba(107, 142, 35, 0.6);
    --color-accent-green-55: rgba(107, 142, 35, 0.55);
    --color-accent-green-35: rgba(107, 142, 35, 0.35);
    --color-accent-green-20: rgba(107, 142, 35, 0.2);
    --color-accent-green-12: rgba(107, 142, 35, 0.12);

    /* =========================
       Rules & Dividers
    ========================== */
    --color-rule-primary: rgba(0, 0, 0, 0.12);
    --color-rule-secondary: rgba(0, 0, 0, 0.10);

    /* =========================
       Buttons
    ========================== */
    --color-btn-text: #2a2a2a;
    --color-btn-bg: rgba(107, 142, 35, 0.12);
    --color-btn-bg-hover: rgba(107, 142, 35, 0.2);
    --color-btn-border: rgba(107, 142, 35, 0.35);
    --color-btn-border-hover: rgba(107, 142, 35, 0.55);

    /* =========================
       Effects & UI Tokens
    ========================== */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.06);

    --space-sm: 12px;
    --space-lg: 32px;
    --space-xl: 48px;
    --radius-soft: 8px;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Source Serif 4', serif;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
  }