/* Balamb design tokens: the one place for colours, type, strokes and sizes, shared by the Django pages and the React
   app. The category palette must match `Category.Color` (src/planner/models.py) and `PALETTE`
   (frontend/src/design/palette.ts); a vitest compares them. */

@font-face {
  font-family: Excalifont;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/excalifont-latin.woff2") format("woff2");
  unicode-range: U+20-7E, U+A0-A3, U+A5-A6, U+A8-AB, U+AD-B1, U+B4, U+B6-B8, U+BA-FF, U+131, U+152-153, U+2BC, U+2C6,
    U+2DA, U+2DC, U+304, U+308, U+2013-2014, U+2018-201A, U+201C-201E, U+2020, U+2022, U+2024-2026, U+2030,
    U+2039-203A, U+20AC, U+2122, U+2212;
}

@font-face {
  font-family: Excalifont;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/excalifont-latin-ext.woff2") format("woff2");
  unicode-range: U+100-130, U+132-137, U+139-149, U+14C-151, U+154-17E, U+192, U+1FC-1FF, U+218-21B, U+237,
    U+1E80-1E85, U+1EF2-1EF3, U+2113;
}

:root {
  /* Type */
  --font-hand: Excalifont, "Comic Sans MS", "Segoe Print", cursive;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.875rem;

  /* Paper and ink */
  --paper: #fbf8f1;
  --paper-raised: #fffdf8;
  --ink: #1e1e1e;
  --ink-soft: #56545e;
  --rule-dash: #8f8d99;
  --scrim: rgb(30 30 30 / 45%);

  /* Accents */
  --accent: #5b57d1;
  --accent-ink: #ffffff;
  --accent-soft: #e3e2fe;
  /* The "now" line, dark enough to read on paper, and its badge, light enough for ink text */
  --now: #d9480f;
  --now-badge: #f59f00;
  --done-fill: #b2f2bb;
  --done-hatch: #40c057;
  /* The done circle and check: readable on the done fill */
  --done-mark: #2b8a3e;
  --danger: #c92a2a;

  /* Category palette: a pastel fill and the hachure stroke drawn over it */
  --cat-yellow-fill: #ffec99;
  --cat-yellow-hatch: #f59f00;
  --cat-blue-fill: #a5d8ff;
  --cat-blue-hatch: #1c7ed6;
  --cat-orange-fill: #ffd8a8;
  --cat-orange-hatch: #f76707;
  --cat-red-fill: #ffc9c9;
  --cat-red-hatch: #e03131;
  --cat-violet-fill: #d0bfff;
  --cat-violet-hatch: #7048e8;
  --cat-teal-fill: #96f2d7;
  --cat-teal-hatch: #0ca678;
  --cat-pink-fill: #fcc2d7;
  --cat-pink-hatch: #d6336c;
  --cat-grey-fill: #e9ecef;
  --cat-grey-hatch: #868e96;
  --cat-none-fill: #f1f0ec;
  --cat-none-hatch: #868e96;

  /* Strokes: hand-drawn boxes (`.sketch`) wobble through the SVG filter #rough of base.html */
  --stroke: 2px;
  --stroke-bold: 3px;
  --radius-sketch: 14px 10px 15px 9px / 10px 14px 9px 15px;
  --radius-pill: 18px 14px 17px 15px / 15px 18px 14px 17px;
  --hachure-gap: 7px;

  /* Sizes */
  --tap: 44px;
  --gutter: 52px;
  --focus: 3px solid var(--accent);
}