/*
  The look of dot, as variables. Everything else only uses these names, so a new look is a new block here.
  The page carries its choices as attributes on <html>:
    data-theme    the colors         graphite | midnight | moss | paper | mist | ink
    data-accent   the main action    auto (the theme's own) | blue | green | amber | rose | violet
    data-density  the sizes          cozy | compact
    data-radius   the corners        soft | sharp | round
    data-font     the type           inter | system | journal (serif headings)
*/

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --fs-caption: 12px;
  --fs-body: 14px;
  --fs-title: 15px;
  --fs-heading: 20px;
  --fs-display: 30px;

  /* Space, on a grid of 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  /* Corners */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;

  /* Heights of controls */
  --h-sm: 26px; --h-md: 32px; --h-lg: 38px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 140ms;

  /* ---- Graphite (the default): the four grays of the program ---- */
  color-scheme: dark;
  --bg: #121314;
  --surface: #191a1b;
  --raised: #202122;
  --raised-hover: #2a2b2c;
  --line: #313233;
  --line-soft: #242526;
  --selected: #313233;
  --selected-hover: #3a3b3d;
  --on-selected: #ededee;
  --text: #ededee;
  --text-2: #a1a2a4;
  --text-3: #6c6d6f;
  --primary: #ededee;
  --primary-hover: #ffffff;
  --on-primary: #121314;
  --danger: #f0716b;
  --danger-soft: #2b1d1e;
  --overlay: rgba(0, 0, 0, .55);
  --shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .02);

  /* Shades of a note of the schedule: the swatches in the note dialog and the notes on the grid (0 is no color) */
  --nc-1: #ff5f57; --nc-2: #ff9f0a; --nc-3: #f2c80f; --nc-4: #34c759; --nc-5: #0a84ff; --nc-6: #af6bf2; --nc-7: #ff6b95;
}

/* ---- Themes ---- */

[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #000000; --surface: #0b0b0c; --raised: #151516; --raised-hover: #1e1e20;
  --line: #28282a; --line-soft: #1a1a1c; --selected: #28282a; --selected-hover: #323235; --on-selected: #f5f5f7;
  --text: #f5f5f7; --text-2: #98989d; --text-3: #636366;
  --primary: #f5f5f7; --primary-hover: #ffffff; --on-primary: #000000;
  --danger: #ff6961; --danger-soft: #2a1514; --overlay: rgba(0, 0, 0, .7);
  --shadow: 0 12px 40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04);
}

[data-theme="moss"] {
  color-scheme: dark;
  --bg: #0c0f0b; --surface: #121610; --raised: #1a1f17; --raised-hover: #232a1f;
  --line: #2c3526; --line-soft: #1e251a; --selected: #2c3526; --selected-hover: #36412f; --on-selected: #e8ece4;
  --text: #e8ece4; --text-2: #9aa592; --text-3: #667060;
  --primary: #a9cb7c; --primary-hover: #bcdb92; --on-primary: #0c0f0b;
  --danger: #f08a6c; --danger-soft: #2a1b16; --overlay: rgba(4, 6, 3, .62);
}

[data-theme="paper"] {
  color-scheme: light;
  --bg: #f4f3ef; --surface: #fcfcfa; --raised: #f1f0ec; --raised-hover: #e9e8e2;
  --line: #dedcd4; --line-soft: #eceae4; --selected: #e4e2da; --selected-hover: #dad8cf; --on-selected: #1d1d1f;
  --text: #1d1d1f; --text-2: #6e6d68; --text-3: #a3a19a;
  --primary: #1d1d1f; --primary-hover: #000000; --on-primary: #ffffff;
  --danger: #d33a30; --danger-soft: #fbe9e6; --overlay: rgba(36, 32, 24, .32);
  --shadow: 0 12px 40px rgba(60, 50, 30, .16), 0 0 0 1px rgba(0, 0, 0, .04);
}

[data-theme="mist"] {
  color-scheme: light;
  --bg: #edf0f4; --surface: #ffffff; --raised: #f3f5f8; --raised-hover: #e8ecf1;
  --line: #dce1e8; --line-soft: #e9edf2; --selected: #dfe5ec; --selected-hover: #d4dbe4; --on-selected: #14181d;
  --text: #14181d; --text-2: #5d6875; --text-3: #98a2af;
  --primary: #14181d; --primary-hover: #000000; --on-primary: #ffffff;
  --danger: #d33a30; --danger-soft: #fbe9e6; --overlay: rgba(20, 30, 45, .32);
  --shadow: 0 12px 40px rgba(30, 50, 80, .16), 0 0 0 1px rgba(0, 0, 0, .04);
}

[data-theme="ink"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --raised: #f5f5f5; --raised-hover: #ebebeb;
  --line: #d6d6d6; --line-soft: #ececec; --selected: #000000; --selected-hover: #222222; --on-selected: #ffffff;
  --text: #000000; --text-2: #5a5a5a; --text-3: #9a9a9a;
  --primary: #000000; --primary-hover: #222222; --on-primary: #ffffff;
  --danger: #c8261c; --danger-soft: #fdeceb; --overlay: rgba(0, 0, 0, .35);
  --shadow: 0 12px 40px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .06);
}

/* ---- Accents: the color of the main action ---- */

[data-accent="blue"]   { --primary: #0a84ff; --primary-hover: #3b9bff; --on-primary: #ffffff; }
[data-accent="green"]  { --primary: #2fb260; --primary-hover: #45c474; --on-primary: #ffffff; }
[data-accent="amber"]  { --primary: #f5a30a; --primary-hover: #ffb52e; --on-primary: #1a1300; }
[data-accent="rose"]   { --primary: #ff3b6b; --primary-hover: #ff5f87; --on-primary: #ffffff; }
[data-accent="violet"] { --primary: #8a63f2; --primary-hover: #9f7ef5; --on-primary: #ffffff; }

/* ---- Density ---- */

[data-density="compact"] { --h-sm: 22px; --h-md: 28px; --h-lg: 32px; --fs-body: 13px; --fs-caption: 11px; --fs-title: 14px; }

/* ---- Corners ---- */

[data-radius="sharp"] { --r-sm: 3px; --r-md: 5px; --r-lg: 8px; --r-xl: 10px; }
[data-radius="round"] { --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; }

/* ---- Type ---- */

[data-font="system"]  { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-font="journal"] { --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }

/* A finger is bigger than a pointer: controls keep a size that can be hit */
@media (pointer: coarse) {
  :root { --h-sm: 34px; --h-md: 40px; --h-lg: 46px; }
}