/*
 * knvsoft.com design tokens — the only file that writes raw values.
 * Every other stylesheet uses these custom properties; a product sheet may
 * add a token here, never a literal of its own.
 * Ruled s1116 (R1–R3): Merriweather 4 for prose, system UI for the frame,
 * one house teal, a near-black dark scheme. Contrast measured on these
 * exact backgrounds (accent text 4.68:1, white on button 4.89:1, dark teal 9.0:1).
 */

@layer reset, tokens, base, layout, components, product;

/* Self-hosted Merriweather 4 (wght 300–900, opsz 18–144), Latin + Latin Extended.
   SIL OFL 1.1, /fonts/OFL.txt. No request leaves knvsoft.com. */
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/merriweather-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/merriweather-latin-opsz-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/merriweather-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/merriweather-latin-ext-opsz-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Faces */
    --font-prose: "Merriweather", Georgia, "Times New Roman", serif;
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale: no root size is set; 1rem is the reader's own. */
    --text-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --text-small: 0.875rem;
    --text-ui: 0.9375rem;
    --text-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    --text-h2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    --text-h3: 1.25rem;
    --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);

    --leading-body: 1.65;
    --leading-small: 1.5;
    --leading-h1: 1.1;
    --leading-h2: 1.2;
    --leading-h3: 1.3;
    --leading-ui: 1.2;

    --weight-body: 300;            /* Merriweather Light, as the site has always rendered */
    --weight-strong: 700;
    --weight-h1: 700;
    --weight-h2: 650;
    --weight-h3: 600;
    --weight-ui: 590;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Widths */
    --measure: 66ch;
    --width-wide: 64rem;
    --width-toc: 14rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-height: 3.5rem;

    /* Shape */
    --radius-card: 12px;
    --radius-shot: 10px;
    --radius-control: 8px;
    --radius-pill: 999px;
    --hairline: 1px;
    --bar: 2px;

    /* Icons */
    --icon-card: 4rem;
    --icon-brand: 6rem;
    --icon-nav: 1.5rem;
    --icon-project: 3.25rem;
    --tap: 2.75rem;
    --store-button: 2.5rem;        /* the Chrome button, level with Apple's 40px badge */
    --hero-figure: 26rem;
    --step-size: 1.375rem;
    --text-step: 0.8125rem;
    --weight-step: 500;
    --gallery-item: min(70vw, 15rem);

    /* Motion */
    --duration-fade: 180ms;

    /* Colour (R2, R3). light-dark() needs color-scheme above. */
    --bg: light-dark(#FAFAF9, #111618);
    --surface: light-dark(#FFFFFF, #1A2124);
    --text: light-dark(#1B1F22, #E8ECEE);
    --text-2: light-dark(#4A5357, #A9B3B7);
    --rule: light-dark(#DDE2E4, #2C3539);
    /* Form-field edges: 3:1 or more against the field and the page (WCAG 1.4.11). */
    --field-edge: light-dark(#848E93, #707C82);
    --accent: light-dark(#2E98BB, #40C4EF);
    --accent-text: light-dark(#1D7A99, #40C4EF);
    --accent-fill: light-dark(#1D7A99, #40C4EF);
    --on-accent: light-dark(#FFFFFF, #0B1A20);
    /* Step numbers: the house accent by default; a product may point them at its own badge colour. */
    --step-bg: transparent;
    --step-fg: var(--text-2);
    --step-ring: color-mix(in srgb, var(--accent) 55%, transparent);
    /* Contacts Lister's screenshot badges (#F93442), deepened to 5.0:1 for white numerals
       (3.6:1 as a shape on the dark page, 4.8:1 on the light one). */
    --badge-red: #D91F33;
    --on-badge: #FFFFFF;
    --selection: color-mix(in srgb, var(--accent) 30%, transparent);
    --print-text: #000000;
    --print-bg: #FFFFFF;
  }

  /* Browsers before light-dark() (pre May 2024): the same values by media query. */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
      --bg: #FAFAF9;
      --surface: #FFFFFF;
      --text: #1B1F22;
      --text-2: #4A5357;
      --rule: #DDE2E4;
      --field-edge: #848E93;
      --accent: #2E98BB;
      --accent-text: #1D7A99;
      --accent-fill: #1D7A99;
      --on-accent: #FFFFFF;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #111618;
        --surface: #1A2124;
        --text: #E8ECEE;
        --text-2: #A9B3B7;
        --rule: #2C3539;
        --field-edge: #707C82;
        --accent: #40C4EF;
        --accent-text: #40C4EF;
        --accent-fill: #40C4EF;
        --on-accent: #0B1A20;
      }
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --text: light-dark(#000000, #FFFFFF);
      --text-2: light-dark(#222222, #DDDDDD);
      --rule: light-dark(#6B7478, #8A9498);
      --accent-text: light-dark(#0F5A73, #7FD8F5);
      --selection: color-mix(in srgb, var(--accent) 60%, transparent);
    }
  }
}