/* =====================================================
   THEME SETTINGS - edit the values below to restyle
   every page on the site at once.

   Look: warm paper + ink, with a vermilion accent.
   ===================================================== */

:root {
  color-scheme: light;

  /* Colors (light mode) */
  --color-bg: #f6f1e7;
  --color-surface: #fffcf5;
  --color-surface-2: #eee6d6;
  --color-text: #1b1815;
  --color-muted: #6a6257;
  --color-accent: #ff5b2e;        /* fills, highlights, focus rings */
  --color-link: #bf3f12;          /* accent used for text (higher contrast) */
  --color-border: #e2d9c5;
  --color-header: rgba(246, 241, 231, 0.82);
  --color-glow: rgba(255, 91, 46, 0.2);
  --color-mark: rgba(255, 91, 46, 0.3);
  --color-accent-soft: rgba(255, 91, 46, 0.13);
  --phone-bezel: #1b1815;
  --shadow: 0 1px 0 rgba(27, 24, 21, 0.04), 0 14px 34px -16px rgba(70, 45, 10, 0.25);
  --shadow-lg: 0 28px 60px -24px rgba(60, 35, 5, 0.4);

  /* Fonts (self-hosted in /fonts) */
  --font-heading: "Bricolage Grotesque", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape and layout */
  --radius: 22px;
  --max-width: 1040px;
}

/* Dark mode: follows the device setting until the visitor picks one with the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #12100e;
    --color-surface: #1b1815;
    --color-surface-2: #26221d;
    --color-text: #f4efe6;
    --color-muted: #a39a8b;
    --color-accent: #ff7a4d;
    --color-link: #ff9b72;
    --color-border: #2e2924;
    --color-header: rgba(18, 16, 14, 0.78);
    --color-glow: rgba(255, 122, 77, 0.16);
    --color-mark: rgba(255, 122, 77, 0.34);
    --color-accent-soft: rgba(255, 122, 77, 0.14);
    --phone-bezel: #3a342d;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 34px -16px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, 0.8);
  }
}

/* Dark mode forced by the toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #12100e;
  --color-surface: #1b1815;
  --color-surface-2: #26221d;
  --color-text: #f4efe6;
  --color-muted: #a39a8b;
  --color-accent: #ff7a4d;
  --color-link: #ff9b72;
  --color-border: #2e2924;
  --color-header: rgba(18, 16, 14, 0.78);
  --color-glow: rgba(255, 122, 77, 0.16);
  --color-mark: rgba(255, 122, 77, 0.34);
  --color-accent-soft: rgba(255, 122, 77, 0.14);
  --phone-bezel: #3a342d;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 14px 34px -16px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 28px 60px -24px rgba(0, 0, 0, 0.8);
}