/*
 * The design tokens. The only file with colour codes, sizes, fonts and durations (docs/design.md).
 * Names say what a value does, not what it looks like, so a new palette needs no new names.
 * The starting point is the prototype's look. Light theme by default, dark per the system setting or the user's choice.
 */

/* The fonts are self-hosted (licence OFL-1.1, decision 0015). Copied by npm run fonts. */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/noto-sans-latin-400-normal.876b269d87ea.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: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/noto-sans-latin-600-normal.4d5bf5348b83.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: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/noto-sans-latin-700-normal.8a4f634102a0.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: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/pt-sans-narrow-latin-400-normal.29b661fc1e9c.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: "PT Sans Narrow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/pt-sans-narrow-latin-700-normal.a2c7aa6e8718.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 {
  /* Surfaces */
  --color-ground: #efefef;
  --color-surface: #ffffff;
  --color-surface-2: #f7f7f7;
  --color-band: #222222;
  --color-band-text: #ffffff;
  --color-band-muted: rgba(255, 255, 255, 0.63);
  --color-band-control: rgba(255, 255, 255, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.45);

  /* Text */
  --color-text: #232323;
  --color-text-2: #555555;
  --color-text-3: #8a8a8a;
  --color-text-on-strong: #ffffff;
  --color-text-on-warning: #222222;

  /* Lines */
  --color-border: #e2e2e2;
  --color-border-soft: #ededed;
  --color-border-strong: #232323;

  /* Action, link and focus */
  --color-action: #0a8fcc;
  --color-action-text: #ffffff;
  --color-action-soft: #e6f3fa;
  --color-link: #0a8fcc;
  --color-focus: #0a8fcc;
  --color-brand: #01a0e2;

  /* States */
  --color-positive: #0ca30c;
  --color-positive-text: #006300;
  --color-positive-soft: #e3f0ea;
  --color-warning: #fab219;
  --color-warning-text: #8a5205;
  --color-warning-soft: #fdf3dc;
  --color-error: #d03b3b;
  --color-error-soft: #fae4e4;
  --color-negative-amount: #d03b3b;
  --color-editable: #e6f3fa;
  --color-unsaved: #fab219;

  /* Charts: series in a fixed order, for example trades in the schedule */
  --color-chart-1: #0a8fcc;
  --color-chart-2: #e07b00;
  --color-chart-3: #2e9a4b;
  --color-chart-4: #7b5ea7;
  --color-chart-5: #1a9e9e;
  --color-chart-6: #b5543c;

  /* Fonts: the prototype's Noto Sans and PT Sans Narrow, with system fonts as fallback. */
  --font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 26px;
  --text-3xl: 30px;
  --text-hero: 52px;
  --text-field: 13px; /* 16 px on touch screens, see below, so iOS does not zoom on focus */

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --tracking-caps: 0.07em;
  --tracking-display: 0.03em;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 48px;

  /* Sizes */
  --target-min: 44px; /* smallest tap target, 44x44 px for a finger on an iPad (granskningslistan, Björn 10/10) */
  --content-max: 1320px;
  --field-min: 80px;
  --picker-min: 300px;
  --picker-max-height: 340px;
  --dialog-max: 560px;
  --dot: 6px;
  --icon: 16px;
  --corner-flag: 8px;
  --check: 18px;

  /* Radii, lines and shadows */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-round: 999px;
  --line-thin: 1px;
  --line-medium: 2px;
  --line-thick: 3px;
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* Motion */
  --motion-fast: 0.15s; /* @kind other */
  --motion-normal: 0.22s; /* @kind other */
  --ease: ease; /* @kind other */

  /* Breakpoints, for scripts and documentation. CSS media queries cannot read variables, so
     components.css repeats the values: mobile below 600, iPad portrait 820, iPad landscape 1180, desktop 1440. */
  --bp-mobile: 600px;
  --bp-ipad-portrait: 820px;
  --bp-ipad-landscape: 1180px;
  --bp-desktop: 1440px;

  /* Print */
  --print-text: 9.5pt;
  --print-text-small: 8pt;
  --print-heading: 16pt; /* @kind font */
  --print-margin: 14mm;
  --print-signature-height: 14mm; /* @kind spacing */
}

/* Paper: reports in A4 portrait, wide lists in A4 landscape (granskningslistan). */
@page {
  size: A4 portrait;
  margin: 14mm;
}
@page landscape {
  size: A4 landscape;
  margin: 12mm;
}
/* The schedule: A3 or A4 landscape, with room for the title block in the footer. */
@page schedule-a3 {
  size: A3 landscape;
  margin: 10mm 10mm 30mm;
}
@page schedule-a4 {
  size: A4 landscape;
  margin: 10mm 10mm 30mm;
}

/* Touch screens: fields at 16 px, so iOS does not zoom in on focus. */
@media screen and (max-width: 1180px), screen and (pointer: coarse) {
  :root {
    --text-field: 16px;
  }
}

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #161616;
    --color-surface: #222222;
    --color-surface-2: #282828;
    --color-band: #111111;
    --color-band-muted: rgba(255, 255, 255, 0.6);
    --color-text: #f2f2f2;
    --color-text-2: #bdbdbd;
    --color-text-3: #8f8f8f;
    --color-text-on-strong: #0b0b0b;
    --color-border: #3a3a3a;
    --color-border-soft: #2e2e2e;
    --color-border-strong: #f2f2f2;
    --color-action: #1d9fdc;
    --color-action-text: #0b0b0b;
    --color-action-soft: #17303d;
    --color-link: #1d9fdc;
    --color-focus: #1d9fdc;
    --color-brand: #1d9fdc;
    --color-positive-text: #0ca30c;
    --color-positive-soft: #132a22;
    --color-warning-text: #dda64c;
    --color-warning-soft: #3a2f12;
    --color-error-soft: #3d1c1c;
    --color-editable: #17303d;
    --color-chart-1: #1d9fdc;
    --color-chart-2: #f0912a;
    --color-chart-3: #45b863;
    --color-chart-4: #9b80c8;
    --color-chart-5: #2fbaba;
    --color-chart-6: #d0705a;
    --shadow-raised: none;
  }
}

:root[data-theme="dark"] {
  --color-ground: #161616;
  --color-surface: #222222;
  --color-surface-2: #282828;
  --color-band: #111111;
  --color-band-muted: rgba(255, 255, 255, 0.6);
  --color-text: #f2f2f2;
  --color-text-2: #bdbdbd;
  --color-text-3: #8f8f8f;
  --color-text-on-strong: #0b0b0b;
  --color-border: #3a3a3a;
  --color-border-soft: #2e2e2e;
  --color-border-strong: #f2f2f2;
  --color-action: #1d9fdc;
  --color-action-text: #0b0b0b;
  --color-action-soft: #17303d;
  --color-link: #1d9fdc;
  --color-focus: #1d9fdc;
  --color-brand: #1d9fdc;
  --color-positive-text: #0ca30c;
  --color-positive-soft: #132a22;
  --color-warning-text: #dda64c;
  --color-warning-soft: #3a2f12;
  --color-error-soft: #3d1c1c;
  --color-editable: #17303d;
  --color-chart-1: #1d9fdc;
  --color-chart-2: #f0912a;
  --color-chart-3: #45b863;
  --color-chart-4: #9b80c8;
  --color-chart-5: #2fbaba;
  --color-chart-6: #d0705a;
  --shadow-raised: none;
}