/* Ridderholt design system, generation 2: tokens. Every colour, size and
   duration the components use is one of these. Light by default, dark when
   the system asks for it (prefers-color-scheme), and either one forced with
   data-theme="light" or data-theme="dark" on <html> or on any element,
   which then themes everything inside it.

   Generation 2 is made for screens that are looked at more than they are
   worked in: bigger type and touch targets, round shapes, cards with a
   little depth, and colour that says how something is before a word does. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-regular-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-sans-medium-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-sans-semibold-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-sans-italic-latin.woff2") format("woff2"); }

:root {
  /* Type: one face, IBM Plex Sans (SIL Open Font Licence), whose figures
     are all the same width, so columns of numbers line up. Fewer sizes,
     further apart: a label, what you read, a heading, and the number. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 12px;    /* labels over numbers, badges, column headings */
  --text-sm: 13.5px;  /* second lines, meta */
  --text-base: 15px;  /* what you read */
  --text-md: 16px;    /* inputs (16 px keeps iOS from zooming) */
  --text-lg: 19px;    /* section and card headings */
  --text-xl: 27px;    /* page title */
  --text-num: 34px;   /* a card's number */
  --text-hero: 48px;  /* the one number a page is about */
  --leading: 1.45;
  --leading-tight: 1.2;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 600;

  /* Space: a 4 px grid. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Sizes */
  --row: 40px;         /* a table row on a desktop */
  --tap: 44px;         /* the smallest thing to press, anywhere */
  --control: 40px;     /* a button or a field on a desktop */
  --control-sm: 32px;  /* a small button */
  --header: 56px;      /* the page header */
  --dock: 60px;        /* the phone's bar of sections at the bottom */
  --page-max: 1200px;  /* the widest the content gets */
  --form-max: 440px;   /* a single-column form */

  /* Corners: round. A chip, a field, a card, and the pill. */
  --radius-1: 6px;
  --radius-2: 12px;
  --radius-3: 18px;
  --radius-pill: 999px;

  /* Motion: short, and only for a change of state. --spring overshoots a
     little, for something pressed or opened. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --dur-1: 110ms;
  --dur-2: 200ms;

  /* The phone breakpoint, for reference: components switch at 560px
     (media queries can't read custom properties). */
  --phone: 560px;
}

/* Colour, light. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f3f5f8;  /* the page */
  --surface: #ffffff;  /* cards, menus, tables */
  --surface-2: #eceff4;  /* a quiet button, a field, hover */
  --surface-3: #dfe3ea;  /* pressed, a track */
  --fill: rgba(15, 20, 24, 0.06);  /* a quiet button or a field, on the page or on a card */
  --fill-2: rgba(15, 20, 24, 0.10);  /* the same, pointed at */
  --line: #e3e7ed;  /* hairlines */
  --line-strong: #c6ccd6;  /* a selected outline */
  --text: #0f1418;
  --text-2: #4c5560;  /* secondary */
  --text-3: #77818d;  /* faint: labels, units, hints */
  --accent: #0877a6;  /* links, the primary action, what is current, focus */
  --accent-2: #3b5bdb;  /* where the accent's gradient ends */
  --accent-hover: #066489;
  --accent-fg: #ffffff;
  --accent-soft: #e0f1f8;
  --good: #12a15f;  /* fine, done, right: a dot, a ring, a bar */
  --good-bg: #dff4e8;
  --good-fg: #0b6b41;
  --caution: #f0a81e;  /* wants a look */
  --caution-bg: #fdf0cf;
  --caution-fg: #7a4d00;
  --bad: #d93a2f;  /* wrong, late, missing */
  --bad-bg: #fde4e1;
  --bad-fg: #b3261e;
  --up: #11764a;  /* a price went up */
  --down: #c0392b;  /* a price went down */
  --chart-1: #0877a6;
  --chart-1-fill: rgba(8, 119, 166, 0.12);
  --chart-2: #b26a00;
  --chart-3: #11764a;
  --chart-bar: rgba(8, 119, 166, 0.45);
  --chart-grid: rgba(15, 20, 24, 0.07);
  --tint-1: #e0f1f8;  /* six quiet tints, for a picture that stands for a name */
  --tint-1-fg: #075d82;
  --tint-2: #e6e9fd;
  --tint-2-fg: #3447b8;
  --tint-3: #f3e6fb;
  --tint-3-fg: #7a32a8;
  --tint-4: #fde6ee;
  --tint-4-fg: #b02a5b;
  --tint-5: #fdf0cf;
  --tint-5-fg: #7a4d00;
  --tint-6: #dff4e8;
  --tint-6-fg: #0b6b41;
  --shadow-1: 0 1px 2px rgba(15, 20, 24, 0.06), 0 1px 1px rgba(15, 20, 24, 0.03);  /* a card at rest */
  --shadow-2: 0 8px 24px rgba(15, 20, 24, 0.09), 0 2px 6px rgba(15, 20, 24, 0.05);  /* a card lifted */
  --shadow-pop: 0 12px 32px rgba(15, 20, 24, 0.16), 0 0 0 1px rgba(15, 20, 24, 0.05);  /* a menu, a sheet */
  --glow: 0 6px 18px rgba(8, 119, 166, 0.30);  /* under the primary action */
  --glass: rgba(255, 255, 255, 0.82);  /* the header and the dock, over the page */
  /* Generation 1's names for the same colours: pages written for it keep
     working. New pages use good, caution and bad. */
  --pass-bg: var(--good-bg);
  --pass-fg: var(--good-fg);
  --near-bg: var(--caution-bg);
  --near-fg: var(--caution-fg);
  --fail-fg: var(--bad-fg);
  --warn-bg: var(--caution-bg);
  --warn-fg: var(--caution-fg);
  --warn-strong: var(--caution);
  --warn-strong-fg: #2b1c00;
  --ok-bg: var(--good-bg);
  --held-bg: var(--accent-soft);
  --held-fg: var(--accent);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* Colour, dark: the same names. Written twice, for a page told to be dark
   and for a system that asks for it; a test keeps the two the same. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e12;
  --surface: #151a20;
  --surface-2: #1d232b;
  --surface-3: #29313b;
  --fill: rgba(238, 241, 244, 0.09);
  --fill-2: rgba(238, 241, 244, 0.14);
  --line: #232a32;
  --line-strong: #3b444f;
  --text: #eef1f4;
  --text-2: #a7b0ba;
  --text-3: #76808b;
  --accent: #56c2ea;
  --accent-2: #8a9bff;
  --accent-hover: #7fd3f1;
  --accent-fg: #04202b;
  --accent-soft: #12303d;
  --good: #35c98a;
  --good-bg: #12281d;
  --good-fg: #86e0b0;
  --caution: #f0b94a;
  --caution-bg: #2e2410;
  --caution-fg: #f3c96f;
  --bad: #ff6b5e;
  --bad-bg: #33171a;
  --bad-fg: #ff9388;
  --up: #4cc38a;
  --down: #f07a6c;
  --chart-1: #6cc0dc;
  --chart-1-fill: rgba(108, 192, 220, 0.14);
  --chart-2: #f0b44c;
  --chart-3: #4cc38a;
  --chart-bar: rgba(108, 192, 220, 0.45);
  --chart-grid: rgba(238, 241, 244, 0.08);
  --tint-1: #12303d;
  --tint-1-fg: #8fd9f3;
  --tint-2: #1d2350;
  --tint-2-fg: #b1bcff;
  --tint-3: #2f1b40;
  --tint-3-fg: #dba9f7;
  --tint-4: #3d1a29;
  --tint-4-fg: #ff9fc0;
  --tint-5: #2e2410;
  --tint-5-fg: #f3c96f;
  --tint-6: #12281d;
  --tint-6-fg: #86e0b0;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --glow: 0 6px 20px rgba(86, 194, 234, 0.22);
  --glass: rgba(21, 26, 32, 0.80);
  --pass-bg: var(--good-bg);
  --pass-fg: var(--good-fg);
  --near-bg: var(--caution-bg);
  --near-fg: var(--caution-fg);
  --fail-fg: var(--bad-fg);
  --warn-bg: var(--caution-bg);
  --warn-fg: var(--caution-fg);
  --warn-strong: var(--caution);
  --warn-strong-fg: #2b1c00;
  --ok-bg: var(--good-bg);
  --held-bg: var(--accent-soft);
  --held-fg: var(--accent);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0e12;
    --surface: #151a20;
    --surface-2: #1d232b;
    --surface-3: #29313b;
    --fill: rgba(238, 241, 244, 0.09);
    --fill-2: rgba(238, 241, 244, 0.14);
    --line: #232a32;
    --line-strong: #3b444f;
    --text: #eef1f4;
    --text-2: #a7b0ba;
    --text-3: #76808b;
    --accent: #56c2ea;
    --accent-2: #8a9bff;
    --accent-hover: #7fd3f1;
    --accent-fg: #04202b;
    --accent-soft: #12303d;
    --good: #35c98a;
    --good-bg: #12281d;
    --good-fg: #86e0b0;
    --caution: #f0b94a;
    --caution-bg: #2e2410;
    --caution-fg: #f3c96f;
    --bad: #ff6b5e;
    --bad-bg: #33171a;
    --bad-fg: #ff9388;
    --up: #4cc38a;
    --down: #f07a6c;
    --chart-1: #6cc0dc;
    --chart-1-fill: rgba(108, 192, 220, 0.14);
    --chart-2: #f0b44c;
    --chart-3: #4cc38a;
    --chart-bar: rgba(108, 192, 220, 0.45);
    --chart-grid: rgba(238, 241, 244, 0.08);
    --tint-1: #12303d;
    --tint-1-fg: #8fd9f3;
    --tint-2: #1d2350;
    --tint-2-fg: #b1bcff;
    --tint-3: #2f1b40;
    --tint-3-fg: #dba9f7;
    --tint-4: #3d1a29;
    --tint-4-fg: #ff9fc0;
    --tint-5: #2e2410;
    --tint-5-fg: #f3c96f;
    --tint-6: #12281d;
    --tint-6-fg: #86e0b0;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-pop: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    --glow: 0 6px 20px rgba(86, 194, 234, 0.22);
    --glass: rgba(21, 26, 32, 0.80);
    --pass-bg: var(--good-bg);
    --pass-fg: var(--good-fg);
    --near-bg: var(--caution-bg);
    --near-fg: var(--caution-fg);
    --fail-fg: var(--bad-fg);
    --warn-bg: var(--caution-bg);
    --warn-fg: var(--caution-fg);
    --warn-strong: var(--caution);
    --warn-strong-fg: #2b1c00;
    --ok-bg: var(--good-bg);
    --held-bg: var(--accent-soft);
    --held-fg: var(--accent);
    --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
    --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --spring: var(--ease); }
}