/* =========================================================================
   colors_and_type.css — Derlot design system tokens
   -------------------------------------------------------------------------
   Reconstructed from the locked Derlot build brief. This file was originally
   hosted at the Claude Design environment root and referenced as
   ../../colors_and_type.css; it now lives inside the project and is linked
   locally by index.html, configurator.html and the exploration pages.

   Locked system rules:
     • Bone background (#f5f3ef), ink foreground (#1a1917)
     • Zero border-radius, 0.5px hairlines, no shadows
     • Sentence case, Poppins for display (300/400/500/600)
   ========================================================================= */

/* ---- Brand webfont — Poppins (self-hosted, SIL OFL — see assets/fonts/OFL.txt)
   Poppins is the ONLY typeface on the site (display + body). Self-hosted woff2
   removes the Google Fonts CDN dependency and the EU-privacy concern. ------- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('assets/fonts/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('assets/fonts/poppins-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
}

:root {
  /* ---- Core palette --------------------------------------------------- */
  --color-bone:       #f5f3ef;   /* primary background */
  --color-ink:        #1a1917;   /* primary foreground / text */
  --color-paper:      #ffffff;   /* pure white surfaces */
  --color-renew-ink:  #5d7158;   /* recycled / sustainability accent (sage) */

  /* Warm stone scale, light → dark */
  --color-stone-50:   #eceae4;
  --color-stone-100:  #e4e2da;
  --color-stone-250:  #d3d1c7;
  --color-stone-350:  #a8a49a;
  --color-stone-400:  #8b877f;
  --color-stone-500:  #6c6862;

  /* ---- Semantic foreground / lines ----------------------------------- */
  --fg:           var(--color-ink);
  --fg-muted:     var(--color-stone-500);   /* #6c6862 — captions, meta */
  --fg-subtle:    var(--color-stone-350);   /* #a8a49a — faint labels */
  --fg-on-ink:    var(--color-bone);        /* text on ink backgrounds */

  --rule:         var(--color-stone-100);   /* hairline rule colour */
  --rule-soft:    rgba(26, 25, 23, 0.10);   /* softer hairline */
  --rule-width:   0.5px;                     /* locked hairline weight */

  /* ---- Typography — Poppins carries the whole site (display + body) --- */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    var(--font-sans);
  --font-serif:   'Poppins', Georgia, serif;
  /* Mono retained for SKU / spec tables only (tabular data) */
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Font weights */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;

  /* Eyebrow / kicker type */
  --fs-eyebrow:   11px;
  --tr-eyebrow:   0.14em;   /* letter-spacing for eyebrows */

  /* ---- Motion ------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     0.18s;
  --dur-base:     0.32s;
}

/* ---- Base typography ----------------------------------------------------
   Apply Poppins as the inherited default so any element WITHOUT an explicit
   fontFamily (e.g. the hero headline) renders in Poppins instead of the
   browser's serif default. Explicit component styles still override this. */
html, body {
  font-family: var(--font-display);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}