/*
 * tokens.css — every colour, font and shape decision on the site.
 *
 * This is the only file you need to touch to restyle the whole page, including
 * re-skinning it to match another product's brand later. Nothing in styles.css
 * hardcodes a colour.
 */

:root {
  /* ---- Brand -------------------------------------------------------- */
  --brand:            #1c5f4a;   /* primary: buttons, links, accents */
  --brand-hover:      #17503e;
  --brand-contrast:   #ffffff;   /* text on top of --brand */
  --accent:           #c2703d;   /* sparingly: highlights, the "unlisted" mark */

  /* ---- Surfaces ------------------------------------------------------ */
  --bg:               #fbfaf7;
  --surface:          #ffffff;
  --surface-sunken:   #f2f0ea;
  --border:           #e2ded4;
  --border-strong:    #cdc7b8;

  /* ---- Text ---------------------------------------------------------- */
  --text:             #1a1a18;
  --text-muted:       #5c5a54;
  --text-faint:       #85827a;

  /* ---- Feedback ------------------------------------------------------ */
  --ok:               #1c5f4a;
  --warn:             #8a5a12;

  /* ---- Type ---------------------------------------------------------- */
  /* System stack only: no webfont request, nothing loaded from a third party. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);

  --leading-tight: 1.2;
  --leading-body: 1.65;

  /* ---- Shape --------------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 5%);

  /* ---- Layout -------------------------------------------------------- */
  --measure: 34rem;      /* readable line length */
  --container: 62rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-gap: clamp(3rem, 8vw, 5.5rem);
}

/*
 * Dark theme. `prefers-color-scheme` is the default signal; the explicit
 * [data-theme] selectors let the in-page toggle override it in both directions.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:          #6bbf9c;
    --brand-hover:    #85d0af;
    --brand-contrast: #0e1512;
    --accent:         #e0955f;

    --bg:             #12140f;
    --surface:        #191c16;
    --surface-sunken: #21251d;
    --border:         #2e332a;
    --border-strong:  #454b3f;

    --text:           #eef0e9;
    --text-muted:     #b3b7ab;
    --text-faint:     #8a8e83;

    --ok:             #6bbf9c;
    --warn:           #d9a84e;

    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 20px rgb(0 0 0 / 30%);
  }
}

:root[data-theme="dark"] {
  --brand:          #6bbf9c;
  --brand-hover:    #85d0af;
  --brand-contrast: #0e1512;
  --accent:         #e0955f;

  --bg:             #12140f;
  --surface:        #191c16;
  --surface-sunken: #21251d;
  --border:         #2e332a;
  --border-strong:  #454b3f;

  --text:           #eef0e9;
  --text-muted:     #b3b7ab;
  --text-faint:     #8a8e83;

  --ok:             #6bbf9c;
  --warn:           #d9a84e;

  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 20px rgb(0 0 0 / 30%);
}