/* Design tokens. The look is a study desk: pale cool desk with white paper (Mgła), graphite in dark mode, fountain-pen navy ink,
   the red margin line of ruled paper (brand marker), and a yellow highlighter. */

:root {
  --desk: #F4F6FA;
  --paper: #FFFFFF;
  --paper-2: #F7F9FC;
  --paper-3: #ECF0F5;
  --ink: #16233A;
  --ink-2: #33435C;
  --muted: #56667E;
  --on-ink: #FFFFFF;
  --rule: #E6EBF2;
  --rule-strong: #C6D2E2;
  --margin: #D0606F;
  --mark: #FFE173;
  --mark-soft: #FFF4C2;
  --link: #2457C5;
  --focus: #2457C5;
  --good: #1D7A55;
  --good-bg: #E4F2EA;
  --bad: #B3283C;
  --bad-bg: #FBE7EA;
  --warn: #8A5A00;
  --warn-bg: #FCF0D4;
  --code-bg: #F5F7FA;

  /* The sheets and index cards: white paper in light mode, graphite in dark mode */
  --card-paper: #FFFFFF;
  --card-ink: #16233A;
  --card-muted: #56667E;
  --card-rule: #E8EDF4;
  --card-margin: #D0606F;
  --card-link: #2457C5;
  --card-bad: #A3243A;
  --card-good: #17694A;
  --card-warn: #7A5000;
  --card-seq-0: #DCE4EE;
  --card-seq-1: #b7d3f6;
  --card-seq-2: #6da7ec;
  --card-seq-3: #2a78d6;
  --card-seq-4: #184f95;

  /* Chart palette (validated: categorical series, status, sequential) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  --seq-0: #DCE4EE;
  --seq-1: #b7d3f6;
  --seq-2: #6da7ec;
  --seq-3: #2a78d6;
  --seq-4: #184f95;
  --on-seq-low: #16233A;
  --on-seq-mid: #16233A;
  --on-seq-high: #FFFFFF;

  --shadow-s: none;
  --shadow-card: 0 1px 2px rgba(22, 35, 58, .04);
  --shadow-pop: 0 16px 40px -20px rgba(22, 35, 58, .22);
  --sheet-edge: var(--rule);  /* light mode separates sheets with a fine line instead of a shadow */
  --grad-ink: linear-gradient(100deg, var(--ink) 30%, color-mix(in srgb, var(--link) 75%, var(--ink)));
  --grad-ring: linear-gradient(130deg, var(--link), var(--series-2), var(--mark));

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;

  --on-solid: #FFFFFF;
  --on-good: #FFFFFF;  /* the letter on a --good / --bad fill: dark in the dark theme, where those two are light */
  --on-bad: #FFFFFF;
  --on-mark: #10161F;
  --avatar-from: #A9BCF0;  /* the default round picture, in both themes */
  --avatar-to: #EBD27A;
  --reg-page: var(--desk);
  --reg-card: var(--paper);
  --reg-ink: var(--ink);
  --reg-muted: var(--muted);
  --reg-line: var(--rule-strong);
  --reg-accent: #C8364A;
  --reg-link: var(--link);
  --reg-good: var(--good);
  --reg-solid: var(--ink);
  --reg-on-solid: var(--paper);
  --hl-strength: 70%;  /* how strong a highlight is over the page, so the text on it stays readable */
  --backdrop: rgba(10, 16, 28, .5);
  --mask: #000;
  --code-number: #8F5F00;

  --serif: "Source Serif 4", Georgia, serif;
  --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale (16px base, ~1.25 ratio) */
  --t-xs: 13px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 18px;
  --t-xl: 22px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-hero: 64px;

  --rail-w: 248px;
  --content-w: 1120px;
  --reading-w: 780px;
  --ease: cubic-bezier(.3, .7, .2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --reg-page: #121316;
    --reg-card: #1E2026;
    --reg-ink: #ECEBE6;
    --reg-muted: #9A9CA3;
    --reg-line: #34373F;
    --reg-link: #A9BCF0;
    --reg-good: #5FC58E;
    --reg-solid: #ECEBE6;
    --reg-on-solid: #121316;
    --desk: #121316;
    --paper: #1E1F24;
    --paper-2: #25262C;
    --paper-3: #2D2F36;
    --ink: #ECEAE4;
    --ink-2: #CFCDC6;
    --muted: #A8A6A0;
    --on-ink: #121316;
    --rule: #303138;
    --rule-strong: #4C4E58;
    --margin: #DC7A84;
    --mark: #EBD27A;
    --mark-soft: #3A3317;
    --link: #A5BEF5;
    --focus: #A5BEF5;
    --good: #7CCFA6;
    --on-good: #10161F;
    --on-bad: #10161F;
    --good-bg: #163A2B;
    --bad: #F09AA4;
    --bad-bg: #40202A;
    --warn: #E6C26E;
    --warn-bg: #3A2F14;
    --code-bg: #17181C;
    --series-1: #3987e5;
    --series-2: #d95926;
    --seq-0: #2D2F36;
    --seq-1: #184f95;
    --seq-2: #256abf;
    --seq-3: #3987e5;
    --seq-4: #86b6ef;
    --on-seq-low: #ECEAE4;
    --on-seq-mid: #FFFFFF;
    --on-seq-high: #121316;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .8);
    --shadow-pop: 0 24px 70px -20px rgba(0, 0, 0, .85);
    --card-paper: #1E1F24;
    --card-ink: #ECEAE4;
    --card-muted: #A8A6A0;
    --card-rule: #34353D;
    --card-margin: #DC7A84;
    --card-link: #A5BEF5;
    --card-bad: #F09AA4;
    --card-good: #7CCFA6;
    --card-warn: #E6C26E;
    --card-seq-0: #2D2F36;
    --card-seq-1: #184f95;
    --card-seq-2: #256abf;
    --card-seq-3: #3987e5;
    --card-seq-4: #86b6ef;
    --code-number: #E7B765;
    --hl-strength: 28%;
    --sheet-edge: transparent;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --reg-page: #121316;
  --reg-card: #1E2026;
  --reg-ink: #ECEBE6;
  --reg-muted: #9A9CA3;
  --reg-line: #34373F;
  --reg-link: #A9BCF0;
  --reg-good: #5FC58E;
  --reg-solid: #ECEBE6;
  --reg-on-solid: #121316;
  --desk: #121316;
  --paper: #1E1F24;
  --paper-2: #25262C;
  --paper-3: #2D2F36;
  --ink: #ECEAE4;
  --ink-2: #CFCDC6;
  --muted: #A8A6A0;
  --on-ink: #121316;
  --rule: #303138;
  --rule-strong: #4C4E58;
  --margin: #DC7A84;
  --mark: #EBD27A;
  --mark-soft: #3A3317;
  --link: #A5BEF5;
  --focus: #A5BEF5;
  --good: #7CCFA6;
  --on-good: #10161F;
  --on-bad: #10161F;
  --good-bg: #163A2B;
  --bad: #F09AA4;
  --bad-bg: #40202A;
  --warn: #E6C26E;
  --warn-bg: #3A2F14;
  --code-bg: #17181C;
  --series-1: #3987e5;
  --series-2: #d95926;
  --seq-0: #2D2F36;
  --seq-1: #184f95;
  --seq-2: #256abf;
  --seq-3: #3987e5;
  --seq-4: #86b6ef;
  --on-seq-low: #ECEAE4;
  --on-seq-mid: #FFFFFF;
  --on-seq-high: #121316;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, .35), 0 18px 40px -18px rgba(0, 0, 0, .8);
  --shadow-pop: 0 24px 70px -20px rgba(0, 0, 0, .85);
  --card-paper: #1E1F24;
  --card-ink: #ECEAE4;
  --card-muted: #A8A6A0;
  --card-rule: #34353D;
  --card-margin: #DC7A84;
  --card-link: #A5BEF5;
  --card-bad: #F09AA4;
  --card-good: #7CCFA6;
  --card-warn: #E6C26E;
  --card-seq-0: #2D2F36;
  --card-seq-1: #184f95;
  --card-seq-2: #256abf;
  --card-seq-3: #3987e5;
  --card-seq-4: #86b6ef;
  --code-number: #E7B765;
  --hl-strength: 28%;
  --sheet-edge: transparent;
  color-scheme: dark;
}

/* Large monitors: wider content and a larger type scale, so a 23" or 27" screen is used
   instead of leaving half of it empty. Laptop sizes keep the base scale above. */
@media (min-width: 1600px) {
  :root {
    --t-xs: 14px;
    --t-s: 15px;
    --t-m: 17px;
    --t-l: 19.5px;
    --t-xl: 24px;
    --t-2xl: 31px;
    --t-3xl: 40px;
    --t-hero: 72px;
    --rail-w: 272px;
    --content-w: 1440px;
    --reading-w: 880px;
  }
}

@media (min-width: 2200px) {
  :root {
    --t-xs: 15px;
    --t-s: 16.5px;
    --t-m: 18.5px;
    --t-l: 21px;
    --t-xl: 26px;
    --t-2xl: 34px;
    --t-3xl: 44px;
    --t-hero: 80px;
    --rail-w: 296px;
    --content-w: 1760px;
    --reading-w: 980px;
  }
}