/* Ridderholt design system: 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. */

@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. */
  --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;   /* captions, column headings, badges */
  --text-sm: 13px;   /* secondary lines, meta */
  --text-base: 14px; /* body and table cells */
  --text-md: 16px;   /* inputs on a phone (16 px keeps iOS from zooming) */
  --text-lg: 18px;   /* section headings */
  --text-xl: 22px;   /* page title */
  --text-num: 26px;  /* the one big number on a page (a share's price) */
  --leading: 1.45;
  --leading-tight: 1.25;
  --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;

  /* Sizes */
  --row: 32px;        /* a table row on a desktop */
  --tap: 40px;        /* the smallest tap target on a phone */
  --header: 48px;     /* the page header */
  --page-max: 1200px; /* the widest the content gets */
  --form-max: 440px;  /* a single-column form */

  /* Corners: small and few. */
  --radius-1: 3px;
  --radius-2: 6px;
  --radius-pill: 999px;

  /* Motion: short and only for state changes. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-1: 90ms;
  --dur-2: 160ms;

  /* 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: #f5f6f7;          /* the page */
  --surface: #ffffff;     /* panels, menus, tables */
  --surface-2: #eef0f2;   /* a table's heading row, hover, chips */
  --line: #e0e3e6;        /* hairlines */
  --line-strong: #c4cad0; /* inputs, a selected outline */
  --text: #15191c;
  --text-2: #525c66;      /* secondary */
  --text-3: #7c868f;      /* faint: units, hints */
  /* The one accent: a calm petrol blue, for links, the primary action,
     the current tab and focus. */
  --accent: #0a6a86;
  --accent-hover: #08566d;
  --accent-fg: #ffffff;
  --accent-soft: #e2f0f4;
  /* Meaning */
  --up: #11764a;        /* a price went up */
  --down: #c0392b;      /* a price went down */
  --pass-bg: #e3f2e9;   /* clears its rule */
  --pass-fg: #0e5f3a;
  --near-bg: #fbefd2;   /* close to the line */
  --near-fg: #7f5200;
  --fail-fg: #b42318;   /* misses it; errors */
  --warn-bg: #fbefd2;
  --warn-fg: #6e4700;
  --ok-bg: #e3f2e9;     /* a notice that something worked */
  --held-bg: #e2f0f4;   /* in one of your portfolios */
  --held-fg: #074e63;
  /* Charts */
  --chart-1: #0a6a86;
  --chart-1-fill: rgba(10, 106, 134, 0.10);
  --chart-2: #b26a00;
  --chart-3: #11764a;
  --chart-bar: rgba(10, 106, 134, 0.45);
  --chart-grid: rgba(21, 25, 28, 0.07);
  --shadow-pop: 0 4px 16px rgba(21, 25, 28, 0.12), 0 0 0 1px rgba(21, 25, 28, 0.06);
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* Colour, dark: the same names. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1214;
  --surface: #151a1d;
  --surface-2: #1c2226;
  --line: #262d32;
  --line-strong: #3a434a;
  --text: #e5e9ec;
  --text-2: #a1abb3;
  --text-3: #76818a;
  --accent: #5bb5d3;
  --accent-hover: #7cc6df;
  --accent-fg: #06212b;
  --accent-soft: #15303a;
  --up: #4cc38a;
  --down: #f07a6c;
  --pass-bg: #15291e;
  --pass-fg: #8bdcaf;
  --near-bg: #2f2510;
  --near-fg: #f0c56d;
  --fail-fg: #ff8a7d;
  --warn-bg: #2f2510;
  --warn-fg: #f0c56d;
  --ok-bg: #15291e;
  --held-bg: #15303a;
  --held-fg: #a9dcec;
  --chart-1: #6cc0dc;
  --chart-1-fill: rgba(108, 192, 220, 0.13);
  --chart-2: #f0b44c;
  --chart-3: #4cc38a;
  --chart-bar: rgba(108, 192, 220, 0.45);
  --chart-grid: rgba(229, 233, 236, 0.08);
  --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1214;
    --surface: #151a1d;
    --surface-2: #1c2226;
    --line: #262d32;
    --line-strong: #3a434a;
    --text: #e5e9ec;
    --text-2: #a1abb3;
    --text-3: #76818a;
    --accent: #5bb5d3;
    --accent-hover: #7cc6df;
    --accent-fg: #06212b;
    --accent-soft: #15303a;
    --up: #4cc38a;
    --down: #f07a6c;
    --pass-bg: #15291e;
    --pass-fg: #8bdcaf;
    --near-bg: #2f2510;
    --near-fg: #f0c56d;
    --fail-fg: #ff8a7d;
    --warn-bg: #2f2510;
    --warn-fg: #f0c56d;
    --ok-bg: #15291e;
    --held-bg: #15303a;
    --held-fg: #a9dcec;
    --chart-1: #6cc0dc;
    --chart-1-fill: rgba(108, 192, 220, 0.13);
    --chart-2: #f0b44c;
    --chart-3: #4cc38a;
    --chart-bar: rgba(108, 192, 220, 0.45);
    --chart-grid: rgba(229, 233, 236, 0.08);
    --shadow-pop: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

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