/* Renewvane design tokens. Source of truth for the marketing site and the app's server rendered pages.
   Link this file before any page stylesheet. Documented in DESIGN_SYSTEM.md.

   Idea: a copper weather vane that has weathered to verdigris. Verdigris marks what our emails did
   (the emailed group, primary actions). Hatched graphite marks the holdout that got nothing from us.
   Brass is reserved for money you pay, so the eye always finds the price.

   Fonts are self hosted, SIL Open Font License 1.1 (fonts/OFL.txt, fonts/OFL-bricolage-grotesque.txt).
   No requests to other sites. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/bricolage-grotesque-latin-wght-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-400-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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-600-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;
}

:root {
  /* Color: light */
  --rv-fog: #eef3f1;          /* page background, cool and slightly green */
  --rv-paper: #ffffff;        /* raised surfaces: panels, inputs, tables */
  --rv-paper-2: #f6f9f8;      /* sunken rows, code */
  --rv-ink: #13232a;          /* text, strong borders */
  --rv-ink-2: #4c5d63;        /* secondary text (6.1:1 on fog) */
  --rv-line: #cdd8d5;         /* hairlines */
  --rv-line-2: #9fb1ad;       /* ticks, secondary button edges */
  --rv-field-line: #788a86;   /* input borders: 3:1 or more against fog and paper (WCAG 1.4.11) */
  --rv-verdigris: #1d7462;    /* emailed group, links, primary action (5.6:1 on paper) */
  --rv-verdigris-2: #155a4c;  /* hover */
  --rv-on-verdigris: #ffffff;
  --rv-verdigris-soft: #dcede8;
  --rv-graphite: #66757b;     /* holdout group (always hatched, never color alone) */
  --rv-brass: #7e5b0e;        /* the price, and only the price */
  --rv-brass-soft: #f6ecd6;
  --rv-danger: #a8392b;       /* field errors */
  --rv-focus: #1d7462;
  --rv-shadow: 0 1px 0 rgba(19, 35, 42, .04), 0 18px 40px -24px rgba(19, 35, 42, .28);

  /* Type */
  --rv-font-display: "Bricolage Grotesque", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --rv-font-text: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rv-font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Major third scale on a 17px base */
  --rv-step--2: .75rem;      /* 12 */
  --rv-step--1: .875rem;     /* 14 */
  --rv-step-0: 1.0625rem;    /* 17 body */
  --rv-step-1: 1.3125rem;    /* 21 */
  --rv-step-2: 1.625rem;     /* 26 */
  --rv-step-3: clamp(1.75rem, 1.2rem + 1.9vw, 2.125rem);   /* 28 to 34 */
  --rv-step-4: clamp(2.125rem, 1.3rem + 3.2vw, 3.125rem);  /* 34 to 50 */
  --rv-step-5: clamp(2.25rem, 1.5rem + 2.6vw, 3.25rem);    /* 36 to 52, home hero only */

  /* Space: 4px base */
  --rv-s1: .25rem; --rv-s2: .5rem; --rv-s3: .75rem; --rv-s4: 1rem; --rv-s5: 1.5rem;
  --rv-s6: 2rem; --rv-s7: 3rem; --rv-s8: 4rem; --rv-s9: 6rem;

  /* Shape: radius grows with the size of the thing */
  --rv-r-sm: 4px;   /* inputs, tags, table cells */
  --rv-r-md: 8px;   /* buttons */
  --rv-r-lg: 14px;  /* panels */

  --rv-measure: 40rem;   /* prose, about 70 characters */
  --rv-wide: 72rem;
  --rv-ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rv-fog: #0d1a1d; --rv-paper: #13252a; --rv-paper-2: #10201f; --rv-ink: #e4eeec; --rv-ink-2: #a3b6b3;
    --rv-line: #24393d; --rv-line-2: #3e575b; --rv-field-line: #66807f; --rv-verdigris: #57c2a6; --rv-verdigris-2: #7fd6bf; --rv-on-verdigris: #062019;
    --rv-verdigris-soft: #163a33; --rv-graphite: #819599; --rv-brass: #e2b85c; --rv-brass-soft: #3a2e12;
    --rv-danger: #ff8a7a; --rv-focus: #7fd6bf; --rv-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -24px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --rv-fog: #0d1a1d; --rv-paper: #13252a; --rv-paper-2: #10201f; --rv-ink: #e4eeec; --rv-ink-2: #a3b6b3;
  --rv-line: #24393d; --rv-line-2: #3e575b; --rv-field-line: #66807f; --rv-verdigris: #57c2a6; --rv-verdigris-2: #7fd6bf; --rv-on-verdigris: #062019;
  --rv-verdigris-soft: #163a33; --rv-graphite: #819599; --rv-brass: #e2b85c; --rv-brass-soft: #3a2e12;
  --rv-danger: #ff8a7a; --rv-focus: #7fd6bf; --rv-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -24px rgba(0, 0, 0, .6);
  color-scheme: dark;
}