@layer tokens {
  /* ========================================
     Earth-Dominant Theme (Default, Light Mode)
     ======================================== */
  :root {
    /* Colors — Light Mode */
    --color-bg: #faf5ef;
    --color-text: #5c524a;
    --color-heading: #3a2e25;
    --color-accent: #2a9d8f;
    --color-accent-text: #1e706a;
    --color-border: #d4c4b0;
    --color-surface: #f0e8dd;
    --color-accent-hover: #238578;

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-section: clamp(4rem, 3.5rem + 2vw, 8rem);

    /* Typography — Font Families */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono: Menlo, Consolas, Monaco, "Liberation Mono", "Lucida Console",
      monospace;

    /* Typography — Fluid Sizes (375px to 1440px) */
    --text-body: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
    --text-sm: clamp(0.812rem, 0.79rem + 0.094vw, 0.875rem);
    --text-h1: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem);
    --text-h2: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
    --text-h3: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
    --text-h4: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);

    /* Typography — Line Heights */
    --line-height-body: 1.6;
    --line-height-heading: 1.2;

    /* Layout */
    --content-max-width: 960px;
    --content-padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  }

  /* Earth-Dominant — Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #1c1815;
      --color-text: #b0a599;
      --color-heading: #e8ddd0;
      --color-accent: #3dbdad;
      --color-accent-text: #3dbdad;
      --color-border: #3a322a;
      --color-surface: #252019;
      --color-accent-hover: #4dd4c0;
    }
  }

  /* ========================================
     Balanced-Blend Theme (~30% turquoise)
     ======================================== */

  /* Balanced — Light Mode */
  :root[data-theme="balanced"] {
    --color-bg: #f5f5ef;
    --color-text: #5c524a;
    --color-heading: #3a2e25;
    --color-accent: #2a9d8f;
    --color-accent-text: #1e706a;
    --color-border: #b8ccc4;
    --color-surface: #e8f0ed;
    --color-accent-hover: #238578;
  }

  /* Balanced — Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="balanced"] {
      --color-bg: #181c1b;
      --color-text: #b0a599;
      --color-heading: #e8ddd0;
      --color-accent: #3dbdad;
      --color-accent-text: #3dbdad;
      --color-border: #2a3532;
      --color-surface: #1f2624;
      --color-accent-hover: #4dd4c0;
    }
  }

  /* ========================================
     Turquoise-Forward Theme (~60% turquoise)
     ======================================== */

  /* Turquoise-Forward — Light Mode */
  :root[data-theme="turquoise-forward"] {
    --color-bg: #edf5f3;
    --color-text: #5c524a;
    --color-heading: #3a2e25;
    --color-accent: #2a9d8f;
    --color-accent-text: #1e706a;
    --color-border: #a8d4ca;
    --color-surface: #dceee9;
    --color-accent-hover: #238578;
  }

  /* Turquoise-Forward — Dark Mode */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="turquoise-forward"] {
      --color-bg: #141d1b;
      --color-text: #b0a599;
      --color-heading: #e8ddd0;
      --color-accent: #3dbdad;
      --color-accent-text: #3dbdad;
      --color-border: #243834;
      --color-surface: #1a2825;
      --color-accent-hover: #4dd4c0;
    }
  }
}