/* =============================================================
   Rocklands — "chalk on rock" palette (mockup A)
   Dark glass over deep red Cederberg rock: a thin warm CHALK veil, with
   the backdrop saturation pushed UP so the rock glows through rich and
   warm. Chalk-white type sits on it.

   THE ROCK RAMP IS SAMPLED, NOT INVENTED. Every --rock-* value below
   was averaged from the warm rock pixels in four of the photographs
   in assets/photos, banded by luminance: hue 21-28, saturation
   .49-.67. That is why it reads as real stone.

   Single source of truth for colour; components use tokens, never
   raw hex. Part of the Cederberg "Visit" family (Wupperthal,
   Citrusdal) — own skin, shared bones.
   ============================================================= */
:root{
  /* fonts — bolder + more technical than the town sites */
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-logo:'Archivo',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;   /* for grades / data */

  /* ---- the rock: shadow to sunlit, sampled from the photographs ---- */
  --rock-900:#2E190F;
  --rock-800:#422615;
  --rock-700:#5C3821;
  --rock-600:#754B2F;
  --rock-500:#8F5E3E;
  --rock-400:#B47952;
  --rock-300:#D8A06F;

  /* ---- ember: the deep rich end, pushed red. The brand accent. ---- */
  --ember:#9C3B1B;
  --ember-lit:#C4531F;
  --ember-deep:#5A1E10;

  /* ---- chalk: the light end, used for type and highlights ---- */
  --chalk:#F6F2EA;
  --chalk-dim:rgba(246,242,234,.68);
  --chalk-faint:rgba(246,242,234,.42);

  /* ---- text that sits ON the dark glass ---- */
  --on-glass:#F6F2EA;
  --on-glass-2:rgba(246,242,234,.68);
  --on-glass-3:rgba(246,242,234,.42);
  --hairline:rgba(246,242,234,.14);

  /* ---- ink: kept for the few light surfaces (chalk buttons) ---- */
  --ink:#26120A;
  --ink-2:rgba(38,18,10,.68);
  --ink-3:rgba(38,18,10,.46);

  /* ---- CHALK-ON-ROCK GLASS (mockup A) ----
     A thin, warm chalk veil over the rock, with the backdrop saturation
     pushed UP (180%) rather than down. That is what keeps the sandstone
     glowing warm through the panel instead of going grey. */
  --glass:rgba(246,242,234,.10);       /* a panel */
  --glass-soft:rgba(246,242,234,.07);  /* a tile nested inside one */
  --glass-strong:rgba(246,242,234,.16);
  --glass-solid:rgba(44,25,16,.86);    /* the no-blur fallback (phones) */
  --glass-line:rgba(246,242,234,.22);
  --glass-hi:rgba(255,255,255,.30);    /* the lit top edge */
  --blur:saturate(180%) blur(28px);
  /* Hover: DARKEN the backdrop rather than lightening the veil. Text on this
     skin is chalk-on-dark, so a darker backdrop raises contrast; a lighter
     veil would lower it. That is what makes hovered text easier to read. */
  --blur-hover:saturate(165%) blur(28px) brightness(.62);
  --glass-hover:rgba(30,16,10,.26);
  --glass-line-hover:rgba(246,242,234,.38);

  /* accents that survive on dark glass */
  --accent-on-glass:var(--ember-lit);
  --accent-warm:var(--rock-300);

  /* ---- semantic aliases — reach for these ---- */
  --paper:var(--glass);
  --paper-2:var(--glass-soft);
  --text:var(--on-glass);
  --text-soft:var(--on-glass-2);
  --muted:var(--on-glass-3);
  --line:var(--hairline);
  --accent:var(--accent-on-glass);
  --accent-hover:var(--ember-lit);
  --accent-2:var(--rock-700);
  --sun:var(--rock-300);
  --on-dark:var(--chalk);

  /* wordmark colour (single-colour) */
  --wm-ink:var(--on-glass);
  --wm-paper:var(--chalk);

  /* layout — glass wants generous, soft corners */
  --maxw:1120px;
  --gutter:24px;
  --radius:22px;
  --radius-sm:16px;
}

@media(max-width:720px){
  :root{
    --gutter:18px;
    --radius:18px;
    --radius-sm:14px;
    /* blur cost scales with radius; phones get a cheaper one */
    --blur:saturate(180%) blur(16px);
  }
}