:root {
    /*--jr: #af6b18;*/
    --white: #F9FAFB;
    --max-width-content: 1200px;
    --text: #222;
}

:root {

  /* Menu */
  --header-bg: #f8fcffcc;
  --header-border: 1px solid #ffffff4d;
  --header-dropdown: #fff;
  --header-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

  /* Base brand color */
  --color-primary: #AF6B18;
  --color-primary-hover: #8E5410;
  --color-primary-soft: #C9852F;

  /* Backgrounds (light mode) */
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F2E8DB;

  /* UI accents */
  --color-border: #E3C19A;
  --color-muted: #A88963;

  /* Text colors */
  --color-text: #2A1E12;
  --color-text-muted: #6E5A43;
  --color-text-on-primary: #FFFFFF;

  /* Footer */
  --color-footer-bg: #1C1309;
  --color-footer-text: #E9D4B8;
  --color-footer-link: #D79A4A;
  --color-footer-link-hover: #F0B56C;

}


/* Dark mode palette */
@media (prefers-color-scheme: dark) {

  :root {

    /* Menu */
    --header-bg: #0f141acc;
    --header-border: 1px solid #ffffff1a;
    --header-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    --header-dropdown: #000;

    /* Backgrounds */
    --color-bg: #0F0E0C;
    --color-surface: #1A140E;
    --color-surface-muted: #241B13;

    /* Brand colors adjusted for dark */
    --color-primary: #D6953F;
    --color-primary-hover: #F0B45D;
    --color-primary-soft: #8F642B;

    /* UI */
    --color-border: #3A2C1D;
    --color-muted: #8C7A63;

    /* Text */
    --color-text: #F3EDE6;
    --color-text-muted: #B9A892;
    --color-text-on-primary: #1A1208;

    /* Footer */
    --color-footer-bg: #0B0A08;
    --color-footer-text: #D8C4A8;
    --color-footer-link: #E0A552;
    --color-footer-link-hover: #F3BE75;

  }

}