/* ==========================================================================
   Look & feel: site-wide choices, not section swaps.

   Each control is one attribute on <html>, set by the picker:
     data-o-look-text     1 = Larger text
     data-o-look-space    1 = Roomier spacing
     data-o-look-corners  1 = Rounder, 2 = Crisp
     data-o-look-buttons  1 = Rounded rectangle buttons
   No attribute = today's choice. They work by retuning the shared tokens
   (--band, --sec, --r-*, root font size), so every section and every option
   follows them. When baking in, copy the chosen values into style.css :root.
   ========================================================================== */

/* Text size: Larger. Every rem-based size scales with the root. */
html[data-o-calm][data-o-look-text="1"] { font-size: 106.25%; }
@media (min-width: 900px) {
  html[data-o-calm][data-o-look-text="1"] body { font-size: 16.5px; }
}
@media (max-width: 899px) {
  html[data-o-calm][data-o-look-text="1"] { font-size: 112%; }
  html[data-o-calm][data-o-look-text="1"] body { font-size: 16px; }
}

/* Spacing: Roomier. About a third more air between sections. */
html[data-o-calm][data-o-look-space="1"] {
  --band:    clamp(44px, 4.6vw, 64px);
  --band-lg: clamp(48px, 5vw, 72px);
  --sec:     clamp(44px, 4.2vw, 60px);
  --hill-gap: 32px;
}
@media (max-width: 899px) {
  html[data-o-calm][data-o-look-space="1"] {
    --band: 40px;
    --band-lg: 44px;
    --sec: 40px;
    --hill-gap: 24px;
  }
}

/* Corners: Rounder (friendlier) or Crisp (tidier). */
html[data-o-calm][data-o-look-corners="1"] {
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 36px;
}
html[data-o-calm][data-o-look-corners="2"] {
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
}

/* Buttons: rounded rectangle instead of pill. */
html[data-o-calm][data-o-look-buttons="1"] .btn { border-radius: var(--r-sm); }