/* ==========================================================================
   un-do DESIGN — Color tokens
   A warm light palette: neutral greys anchored by three botanical chromatics.
   Potters Clay (brown) is the brand primary; Astral (blue) and Alpine (green)
   are supporting accents drawn from wood, sky, and leaf.
   ========================================================================== */

:root {
  /* ---- Neutral ramp — shade-0 (darkest) … shade-7 (lightest) ---- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d9dad9;
  --color-neutral-light: #b4b5b3;
  --color-neutral: #838480;
  --color-neutral-dark: #52524d;
  --color-neutral-darker: #20211b;
  --color-neutral-darkest: #080902;

  /* ---- Potters Clay — primary (warm wood brown) ---- */
  --color-potters-clay-lightest: #f3eeeb;
  --color-potters-clay-lighter: #e7ded8;
  --color-potters-clay-light: #ad8e76;
  --color-potters-clay: #8b5e3c;
  --color-potters-clay-dark: #6f4b30;
  --color-potters-clay-darker: #372518;
  --color-potters-clay-darkest: #291c12;

  /* ---- Astral — secondary (sky blue) ---- */
  --color-astral-lightest: #eaf0f5;
  --color-astral-lighter: #d5e2eb;
  --color-astral-light: #6c9abb;
  --color-astral: #2e6f9e;
  --color-astral-dark: #24587e;
  --color-astral-darker: #122c3f;
  --color-astral-darkest: #0d212f;

  /* ---- Alpine — secondary (leaf green) ---- */
  --color-alpine-lightest: #f6f7ea;
  --color-alpine-lighter: #edefd5;
  --color-alpine-light: #c0c96d;
  --color-alpine: #a6b22f;
  --color-alpine-dark: #848e25;
  --color-alpine-darker: #424712;
  --color-alpine-darkest: #31350e;

  /* ---- Alpha overlays — for protection scrims & translucent surfaces ---- */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);

  --color-ink-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-ink-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-ink-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-ink-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-ink-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-ink-40: color-mix(in srgb, var(--color-neutral-darkest), transparent 60%);
  --color-ink-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-ink-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* ======================================================================
     Semantic aliases — prefer these in product UI.
     Default (light) context. Section schemes below override per-region.
     ====================================================================== */
  --text-body: var(--color-neutral-darkest);
  --text-heading: var(--color-neutral-darkest);
  --text-muted: var(--color-neutral-dark);
  --text-inverse: var(--color-white);
  --accent: var(--color-potters-clay);
  --accent-hover: var(--color-potters-clay-dark);

  --surface-page: var(--color-white);
  --surface-subtle: var(--color-neutral-lightest);
  --surface-card: var(--color-white);
  --surface-clay: var(--color-potters-clay-lightest);
  --surface-inverse: var(--color-neutral-darkest);

  --border-default: var(--color-ink-15);
  --border-strong: var(--color-neutral-darkest);
  --scrim: var(--color-ink-50); /* 50% ink overlay on full-bleed imagery */
}

/* ==========================================================================
   Section color schemes
   Sections derive every color from a single background. Apply one class to a
   section element; children inherit text / accent / border automatically.
   ========================================================================== */
.scheme-1 {
  --scheme-background: var(--color-neutral-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
  --scheme-accent: var(--color-potters-clay);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-2 {
  --scheme-background: var(--color-white);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
  --scheme-accent: var(--color-potters-clay);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-3 {
  --scheme-background: var(--color-potters-clay-lightest);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-border: var(--color-ink-15);
  --scheme-accent: var(--color-potters-clay);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}