/* ==========================================================================
   Panyaza Lesufi Education Foundation — Site 2 · palette options
   --------------------------------------------------------------------------
   FOREST is the chosen palette and lives in :root — no attribute needed.
   The other three are kept as opt-in alternates: add data-theme="ivory",
   "navy" or "sand" to the <html> tag to switch. Colour tokens only; no
   layout changes.

   Ochre #BF8229 is constant across all four — it is the logo colour.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · IVORY  (alternate)
   White body, charcoal panels. Cleanest, most neutral.
   -------------------------------------------------------------------------- */
[data-theme="ivory"] {
  --ink: #1a1a18;
  --ink-2: #4a4844;
  --ink-3: #6f6b64;

  --paper: #ffffff;
  --paper-2: #faf9f7;
  --paper-3: #f2efea;

  --rule: #e4e0d9;
  --rule-dark: #cfc9bf;

  --surface-dark: #1a1a18;
  --scrim-top: rgba(20,19,17,.55);
  --scrim-mid: rgba(20,19,17,.30);
  --scrim-bottom: rgba(20,19,17,.92);

  --ochre: #BF8229;
  --ochre-dark: #97651c;
  --ochre-pale: #f7efe1;
  --ochre-text: #9a6a1c;
}


/* --------------------------------------------------------------------------
   2 · NAVY  — drawn straight from the Golf Day flyer (#011023 + ochre)
   White body, deep navy panels, cool pale tints. Most institutional.
   -------------------------------------------------------------------------- */
[data-theme="navy"] {
  --ink: #101d2b;
  --ink-2: #41525f;
  --ink-3: #5f6d79;

  --paper: #ffffff;
  --paper-2: #f6f8fa;
  --paper-3: #eaeff4;

  --rule: #dce3ea;
  --rule-dark: #c2ccd6;

  --surface-dark: #011023;
  --scrim-top: rgba(1,16,35,.58);
  --scrim-mid: rgba(1,16,35,.32);
  --scrim-bottom: rgba(1,16,35,.94);

  --ochre: #BF8229;
  --ochre-dark: #9a6c20;
  --ochre-pale: #f7efe0;
  --ochre-text: #9a6c20;
}


/* --------------------------------------------------------------------------
   3 · FOREST  ***DEFAULT*** — deep green panels against warm neutrals.
   Reads as education / growth; keeps the ochre very warm by contrast.
   -------------------------------------------------------------------------- */
:root,
[data-theme="forest"] {
  --ink: #17231b;
  --ink-2: #465043;
  --ink-3: #666f64;

  --paper: #ffffff;
  --paper-2: #f7faf6;
  --paper-3: #e9f0e7;

  --rule: #dee6da;
  --rule-dark: #c4cfbf;

  --surface-dark: #12281c;
  --scrim-top: rgba(18,40,28,.58);
  --scrim-mid: rgba(18,40,28,.32);
  --scrim-bottom: rgba(18,40,28,.94);

  --ochre: #C08A2C;
  --ochre-dark: #94681c;
  --ochre-pale: #f5efdf;
  --ochre-text: #94681c;
}


/* --------------------------------------------------------------------------
   4 · SAND — the least white option. The page body itself is warm cream,
   panels are a dark espresso. Softest and warmest of the four.
   -------------------------------------------------------------------------- */
[data-theme="sand"] {
  --ink: #2b2118;
  --ink-2: #5b4c3d;
  --ink-3: #78695c;

  --paper: #fdfaf3;
  --paper-2: #f6efe1;
  --paper-3: #ece0ca;

  --rule: #e3d6bf;
  --rule-dark: #cbb896;

  --surface-dark: #2b2118;
  --scrim-top: rgba(43,33,24,.55);
  --scrim-mid: rgba(43,33,24,.30);
  --scrim-bottom: rgba(43,33,24,.93);

  --ochre: #BE7F26;
  --ochre-dark: #8c5915;
  --ochre-pale: #f4e8d2;
  --ochre-text: #8c5915;
}

/* The sand theme tints the page itself, so the sticky masthead needs to
   match rather than stay white. */
[data-theme="sand"] .masthead { background: rgba(253,250,243,.97); }