/* Greenarc design tokens (SITEPLAN.md 2.2, 2.3, 2.4, 2.10) */
:root {
  /* Palette */
  --ink: #12291B;          /* Convent ink */
  --forest: #2B5E3A;       /* Greenarc forest */
  --lime: #A6CE39;         /* Tipper lime */
  --lime-light: #C9E27A;   /* Lime light */
  --stone: #DEDACD;        /* Limestone */
  --white: #F6F7F2;        /* Livery white */
  --bougain: #B0186A;      /* Bougainvillea */
  --moss: #3F5A47;         /* Moss */
  --rule-light: rgb(18 41 27 / .22);
  --rule-dark: rgb(246 247 242 / .28);
  --on-dark-muted: rgb(246 247 242 / .78);

  /* Type */
  --font-display: "Besley", "Rockwell", "Georgia", serif;
  --font-text: "Libre Franklin", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --font-stencil: "Big Shoulders Stencil", "Libre Franklin", sans-serif;

  --step--1: clamp(0.84rem, 0.80rem + 0.20vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.10rem + 0.50vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.30rem + 1.00vw, 2.1rem);
  --step-3: clamp(2rem, 1.50rem + 2.40vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.60rem + 4.60vw, 5.6rem);
  --step-5: clamp(2.6rem, 1.00rem + 6.20vw, 7rem);
  --price: clamp(3.25rem, 2.00rem + 6.00vw, 7.5rem);

  /* Grid and spacing */
  --max: 1440px;
  --margin: clamp(16px, 4vw, 64px);
  --gap: clamp(16px, 2.2vw, 32px);
  --section-pad: clamp(4rem, 3rem + 5vw, 9rem);
  --section-pad-s: clamp(3rem, 2.4rem + 3vw, 6rem);
  --header-h: 76px;
  --cab-h: 64px;
  --hoop-gap: clamp(8px, 1.4vw, 18px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-arch: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-ui: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-micro: 160ms;
  --dur-ui: 280ms;
  --dur-reveal: 700ms;
  --dur-arch: 900ms;

  /* Print shadow for the two real photos */
  --print-shadow: 0 1px 2px rgb(0 0 0 / .14), 0 18px 34px -18px rgb(0 0 0 / .5);
}

/* Surfaces: each sets its own text, link, rule, hoop and focus colours. */
[data-surface="forest"] {
  --bg: var(--forest); --fg: var(--white); --link: var(--lime-light); --hoop: var(--lime);
  --focus: var(--lime); --rule: var(--rule-dark); --muted: var(--on-dark-muted); --accent: var(--lime-light);
  --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-fill-fg: var(--ink);
}
[data-surface="ink"] {
  --bg: var(--ink); --fg: var(--white); --link: var(--lime); --hoop: var(--lime);
  --focus: var(--lime); --rule: var(--rule-dark); --muted: var(--on-dark-muted); --accent: var(--lime);
  --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-fill-fg: var(--ink);
}
[data-surface="lime"] {
  --bg: var(--lime); --fg: var(--ink); --link: var(--ink); --hoop: var(--ink);
  --focus: var(--ink); --rule: var(--rule-light); --muted: var(--ink); --accent: var(--ink);
  --btn-bg: var(--ink); --btn-fg: var(--lime); --btn-fill: var(--forest); --btn-fill-fg: var(--white);
}
[data-surface="stone"] {
  --bg: var(--stone); --fg: var(--ink); --link: var(--forest); --hoop: var(--forest);
  --focus: var(--forest); --rule: var(--rule-light); --muted: var(--moss); --accent: var(--forest);
  --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--lime);
}
[data-surface="white"] {
  --bg: var(--white); --fg: var(--ink); --link: var(--forest); --hoop: var(--forest);
  --focus: var(--forest); --rule: var(--rule-light); --muted: var(--moss); --accent: var(--forest);
  --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--lime);
}
/* Over a photograph: the page shows through (heroes). */
[data-surface="photo"] {
  --bg: transparent; --fg: var(--white); --link: var(--lime-light); --hoop: var(--lime);
  --focus: var(--lime); --rule: var(--rule-dark); --muted: var(--on-dark-muted); --accent: var(--lime-light);
  --btn-bg: var(--lime); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-fill-fg: var(--ink);
}
[data-surface="bougain"] {
  --bg: var(--bougain); --fg: var(--white); --link: var(--white); --hoop: var(--white);
  --focus: var(--white); --rule: var(--rule-dark); --muted: var(--on-dark-muted); --accent: var(--white);
  --btn-bg: var(--white); --btn-fg: var(--ink); --btn-fill: var(--ink); --btn-fill-fg: var(--white);
}