/* Softspoken Water Co. design tokens.
   The single source for color, type, spacing and shape. Change values here only;
   site.css must use these variables and never a raw color, font or radius. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/source-sans-3-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Neutrals: cool paper, green-black ink. No pure white or black. */
  --paper: #F3F5F4;      /* page background */
  --surface: #FBFCFB;    /* cards, panels, inputs */
  --mist: #E7ECEA;       /* tinted bands */
  --wash: #E2EEEA;       /* pale patina band behind the one data section per page */
  --line: #D3DAD8;       /* hairlines and borders */
  --ink: #12201F;        /* headings and body text */
  --ink-2: #48595A;      /* secondary text */
  --ink-3: #5C6C6B;      /* captions, source lines */

  /* Patina is the brand color: the logo, text links, the wash band and the charts. */
  --brand: #1F5A53;
  --link: #1F5A53;       /* text links, underlined */
  --link-hover: #17443F;

  /* Copper is the action color: the primary button and nothing else. */
  --copper: #B4491F;     /* button background; white text passes AA */
  --copper-deep: #9A3D18;/* primary button hover */
  --copper-soft: #F6E3DA;/* quiet highlight background */
  --on-copper: #FFFFFF;

  /* Patina: data only (charts, diagrams). Never for buttons or links. */
  --data: #1F5A53;       /* bars and marks */
  --data-1: #DCEAE7;     /* lightest class band */
  --data-2: #C6DDD8;
  --data-3: #AACDC6;
  --data-4: #8DBDB5;     /* darkest class band */

  /* Type */
  --font-display: "Archivo", "Arial Narrow", Arial, system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --text-s: 0.9375rem;
  --text-m: 1.125rem;    /* body */
  --text-l: 1.3125rem;   /* lead paragraphs */
  --head-s: 1.375rem;
  --head-m: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem);
  --head-l: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --head-xl: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem); /* home hero only */
  --leading-tight: 1.04;
  --leading-body: 1.6;
  --tracking-head: -0.022em;

  /* Space: one scale, used everywhere */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Shape: buttons, inputs and pills 8px; cards and figures 12px. No other radius. */
  --r-control: 8px;
  --r-card: 12px;

  /* Layout */
  --wrap: 86rem;
  --measure: 65ch;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --shadow-card: 0 1px 2px rgb(18 32 31 / 0.06), 0 10px 28px rgb(18 32 31 / 0.07);
  --focus: 3px solid var(--link);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1716;
    --surface: #16211F;
    --mist: #1B2826;
    --wash: #13282A;
    --line: #2B3A38;
    --ink: #E9EEEC;
    --ink-2: #B3C0BD;
    --ink-3: #92A19E;

    --brand: #7FC4B8;
    --link: #7FC4B8;
    --link-hover: #A5D8CF;

    --copper: #B4491F;
    --copper-deep: #C9582B; /* primary button hover on dark */
    --copper-soft: #2A1C15;
    --on-copper: #FFFFFF;

    --data: #7FC4B8;
    --data-1: #1C3531;
    --data-2: #234540;
    --data-3: #2B554F;
    --data-4: #35675F;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 28px rgb(0 0 0 / 0.25);
    --focus: 3px solid #7FC4B8;
  }
}