/* -----------------------------------------------------------------------
 * Bostadsnotan - designtokens
 *
 * Färgerna är Bostadsnotans egna: marinblått, dis och sand. Ett ljust tema
 * hela vägen, eftersom siffror ska läsas i dagsljus och skrivas ut på papper.
 * Dataserierna är valda inom samma familj och kontrollerade för färgblindhet
 * (normalseende delta E över 15 för alla par; grönt mot ockra ligger i det
 * lägre bandet för protanopi och bär därför alltid en utskriven etikett).
 * -------------------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* ytor */
  --page: #fbfaf9;
  --surface: #ffffff;
  --surface-sunken: #f5f2ed;
  --surface-head: #f0ece6;
  --surface-tint: #eaf2f8;
  --surface-invert: #1e3a52;

  /* bläck */
  --ink: #2c2c2c;
  --ink-strong: #1e3a52;
  --ink-secondary: #5b6572;
  /* Mätt mot vitt, sidbotten och sänkt yta: 5,1 / 4,9 / 4,8 mot kravet 4,5.
     Den gamla tonen #8b8b8b låg på 3,4 och klarade alltså inte brödtext. */
  --ink-muted: #6e6e6e;
  --ink-invert: #ffffff;

  /* linjer */
  --hairline: #e8e2d8;
  --hairline-strong: #d6cfc4;

  /* accent */
  --accent: #2c4a6e;
  --accent-strong: #1e3a52;
  --accent-line: #6b8faf;
  --accent-soft: #eaf2f8;
  /* Ljus text på marinblå botten. --accent-line ger bara 3,5 och duger till
     linjer och ikoner, inte till text. Den här ger 6,2. */
  --on-invert-soft: #9dc0dd;
  /*
   * Statusfärger avsedda för marinblå botten. De ljusa varianterna behövs
   * eftersom --good, --warning och --critical är gjorda för att ligga på en
   * ljus tvättyta och blir oläsliga på mörkt. Mätta mot #1e3a52:
   * grönt 6,9:1, ockra 7,2:1, tegel 5,9:1. Vit text ligger på 11,8:1.
   */
  --on-invert-good: #8fd6a8;
  --on-invert-warning: #f2c464;
  --on-invert-critical: #ff9d9d;

  /* status */
  --good: #2d6a40;
  --good-wash: #e4f0e8;
  --warning: #7a4d10;
  --warning-line: #d4a82a;
  --warning-wash: #f8efdb;
  --critical: #9b2c2c;
  --critical-wash: #fae8e8;

  /* dataserier */
  --series-boende: #2c4a6e;
  --series-ranta: #2c4a6e;
  --series-kostnad: #7fa6c4;
  --series-lan: #9b5c4a;
  --series-drift: #c08a2e;
  --series-sparande: #c08a2e;
  /* Grönt något mörkare än förut, #3f8a5c, som gav 4,2 mot vit text i stapeln.
     Skillnaden syns inte, men siffran i stapeln blir läsbar. */
  --series-amortering: #3b8155;
  --series-kvar: #3b8155;
  --grid: #e8e2d8;

  /* Texten som står inuti en stapel. Ljus serie kräver mörk text och tvärtom,
     och båda hållen är uträknade mot 4,5 enligt WCAG 1.4.3, inte gissade. */
  --on-series-boende: #ffffff;   /* 9,1 */
  --on-series-ranta: #ffffff;    /* 9,1 */
  --on-series-kostnad: #0f2438;  /* 6,1 */
  --on-series-lan: #ffffff;      /* 5,2 */
  --on-series-drift: #2b1c02;    /* 5,5 */
  --on-series-sparande: #2b1c02; /* 5,5 */
  --on-series-amortering: #ffffff; /* 4,7 */
  --on-series-kvar: #ffffff;     /* 4,7 */

  /* form */
  --r-card: 12px;
  --r-control: 8px;
  --r-pill: 999px;
  --shadow-pop: 0 10px 28px -14px rgba(30, 58, 82, .38);

  /* typografi */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rytm */
  --gap: 14px;
  --maxw: 1240px;
}