/* ==========================================================================
   FERROCON — Design tokens
   One preset. Editorial serif display from the parent brand's audience,
   neutral chrome so finish colours stay honest, per-product accents.
   ========================================================================== */

:root {
  --cft-maxw: 1180px;
  --cft-gutter: clamp(1.25rem, 4vw, 2.5rem);

  --cft-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --cft-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --cft-step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --cft-step-2:  clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --cft-step-3:  clamp(2.1rem, 1.6rem + 2.3vw, 3.4rem);
  --cft-step-4:  clamp(2.8rem, 1.9rem + 4.4vw, 6rem);

  --cft-space-s: clamp(1rem, 2vw, 1.5rem);
  --cft-space-m: clamp(2rem, 4vw, 3.5rem);
  --cft-space-l: clamp(3.5rem, 7vw, 6.5rem);
  --cft-space-xl: clamp(5rem, 11vw, 10rem);

  --cft-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cft-dur: 0.75s;
}

.cft-ferrocon,
.editor-styles-wrapper {
  --cft-font-display: "Alegreya Sans", "Segoe UI", sans-serif;
  --cft-font-body: "Open Sans", system-ui, sans-serif;
  --cft-display-weight: 700;
  --cft-display-tracking: -0.015em;

  --cft-surface: #F5F1EA;
  --cft-surface-2: #E3D9C9;
  --cft-surface-deep: #141210;
  --cft-ink: #1F1C18;
  --cft-ink-soft: #736B5E;
  --cft-ink-invert: #F5F1EA;

  --cft-accent: #A85A38;
  --cft-accent-deep: #7E3F24;
  --cft-line: #DDD5C7;

  /* Calculator results panel — warm cream-beige */
  --cft-calc-panel: #E8DCBE;
  --cft-calc-label: #5F594C;
  /* Lighter clay for use on dark sections, where the base accent fails contrast */
  --cft-accent-light: #D6976D;
  --cft-black: #141210;

  --cft-radius: 2px;
  --cft-radius-lg: 8px;
  --cft-shadow: 0 20px 44px -30px rgba(31, 28, 24, 0.5);
  --cft-texture: none;
}

/* Full-width section band. Colour arrives at section scale, never as trim.
   Alternate down the page: base, band, base, deep. */
.cft-section--band { background: var(--cft-surface-2); }
.cft-section--band .cft-card,
.cft-section--band .cft-stat { background: var(--cft-surface); }
.cft-section--band .cft-calc__form { background: var(--cft-surface); }

/* --------------------------------------------------------------------------
   PER-PRODUCT ACCENTS
   Add one as a page Body Class in Kadence, e.g. "acc-microcement".

   >>> REPLACE THESE FOUR HEX PAIRS WITH REAL PACKAGING COLOURS. <<<
   They are placeholders and are not Ferrocon's colours.
   -------------------------------------------------------------------------- */
/* Packaging is light (pale green bucket, light grey sack), but a pale colour
   cannot carry white button text. These are darkened versions of each
   packaging colour — same hue, enough contrast to read. Refine once the
   packaging photo arrives. */
.cft-ferrocon.acc-microcement { --cft-accent: #5A6068; --cft-accent-deep: #3E434A; }
.cft-ferrocon.acc-elastomeric { --cft-accent: #3F6B4B; --cft-accent-deep: #2C4C35; }
.cft-ferrocon.acc-texture     { --cft-accent: #94573A; --cft-accent-deep: #6E3F28; }

/* Swatch grid */
.cft-swatches { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cft-swatch { text-align: left; }
.cft-swatch__chip {
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: var(--cft-radius); border: 1px solid var(--cft-line);
  background-size: cover; background-position: center;
}
.cft-swatch__name { display: block; margin-top: 0.7rem; font-weight: 600; font-size: var(--cft-step-0); }
.cft-swatch__code { display: block; font-size: var(--cft-step--1); color: var(--cft-ink-soft); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --cft-dur: 0.01ms; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}