/* The design library's tokens: every colour, font, size, spacing and radius of the planner, in one file.
   Tom Solid's foundations/8, step 1. A screen never uses a raw colour; it uses a name from here
   (tests/design.test.js fails on a raw colour anywhere else). Light is the default; dark is the same names.
   Neither theme is pure white or pure black. A new colour or component needs BG's yes first (AGENTS.md, Design). */

:root, :root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: #fbfbfa;          /* the page */
  --side: #f7f7f6;        /* the tray, side lists, panels */
  --surface: #fdfdfc;     /* cards, dialogs, menus, fields */
  --hover: #f3f4f4;       /* a row or item under the pointer */
  --sunken: #f2f3f4;      /* code, keys, bars, the day strip */
  --overlay: rgba(20, 25, 28, .28); /* behind a dialog, dimming the page */

  /* Text */
  --ink: #1d2227; /* the text, and the dark line that marks the one chosen thing */
  --soft: #6b737b; /* quieter text: meta lines, hints, counts */
  --faint: #9aa1a8; /* the faintest text: key hints, the hours, a link to something gone */
  --on-accent: #fbfbfa;   /* text on the accent, on red, on the toast */

  /* Lines */
  --line: #e6e8ea; /* borders and dividers */
  --line-soft: #f0f1f2; /* the faintest divider: a bar's track, a look's rule */
  --line-strong: #b7bdc2; /* empty checkboxes, lamps, idle dots */

  /* Accent: one colour, on the one action that matters most on a screen */
  --accent: #2f6b5f;

  /* Data colours: states and kinds, always with a shape or a word beside them */
  --red: #c0392b;         /* over budget, now, recording, danger */
  --red-ring: rgba(192, 57, 43, .18); /* the ring that pulses round the microphone while it records */
  --amber: #b7791f;       /* nearly over, drifting */
  --warn: #a35a00;        /* an error or a warning in words */
  --rust: #a0522d;        /* rotting */
  --gold: #d99a00;        /* thinking, waiting on Google */
  --gold-bg: #fffaf0; /* behind a Google change still waiting to go */
  --note-bg: #fff6e5; /* a calendar note's paper */
  --note-line: #f0d9a8; /* a calendar note's edge */
  --blue: #2e7dd7;        /* speaking */
  /* time/1: each calendar's line in the Calendar, always with its name in the legend beside it */
  --cal-1: #3f6fb5;       /* Google */
  --cal-2: #8a5bb0;       /* the first calendar by link */
  --cal-3: #2f8a6f;       /* the second */
  --cal-4: #b0603a;       /* the third and on */
  --steel: #4a7fb5;       /* a mail card */
  --violet: #7a6bb0;      /* a background job */
  --strip-mark: #cfd6da;  /* a meeting on the day strip */
  --strip-work: #b9d5cd;  /* a block of work on the day strip */
  --bar-fill: #9cc2b9; /* the filled part of a bar */

  /* health/3: a status, always with its word and its shape (good a circle, watch a diamond, bad a triangle) */
  --good: #2f7d32;        /* good: within your usual */
  --good-bg: #edf6ee;     /* behind a good day in a calendar of days */
  --watch: #a86a00;       /* watch: off your usual for some days */
  --watch-bg: #fbf3e2;    /* behind a watch day */
  --bad: #b3261e;         /* bad: off your usual for long, or far off; well apart from the accent */
  --bad-bg: #fbeceb;      /* behind a bad day */

  /* Type scale */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* the one typeface, the system's own */
  --fs-title: 22px;       /* the page title, and the Now view's task and timer */
  --fs-heading: 16px; /* a dialog's title, a heading in a note */
  --fs-body: 15px; /* the body text */
  --fs-small: 14px; /* an empty list's words, a person's role, a suggestion's reason */
  --fs-meta: 13px; /* meta lines, section headings, links in a line */
  --fs-caption: 12px; /* captions, keys, the hours, an arrow's label */
  --fs-label: 11px; /* the smallest labels: key hints, the day strip's marks */

  /* Spacing: the steps the planner uses (px). Every padding, margin and gap is one of these. */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-64: 64px;

  /* Radius */
  --r-xs: 3px; /* the smallest round: marks, tags, a bar */
  --r-sm: 4px; /* small pieces: keys, code, file chips, board cards */
  --r-md: 6px; /* buttons and fields, menus, rows */
  --r-lg: 8px; /* blocks, panels, the toast */
  --r-xl: 10px; /* highlights, columns, menus */
  --r-2xl: 12px; /* a dialog */
  --r-3xl: 14px; /* a chat bubble, the call pill */
  --r-pill: 999px; /* chips, the search box, mentions */
  --r-round: 50%; /* dots and the microphone: a circle */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #17191b;
  --side: #1b1e20;
  --surface: #202326;
  --hover: #272b2e;
  --sunken: #25292c;
  --overlay: rgba(0, 0, 0, .5);

  --ink: #e4e7e9;
  --soft: #a2a9b0;
  --faint: #737b83;
  --on-accent: #10201c;   /* dark text on the lighter dark-theme accent and red */

  --line: #30353a;
  --line-soft: #262a2d;
  --line-strong: #4b5258;

  --accent: #5fae9b;

  --red: #e0675a;
  --red-ring: rgba(224, 103, 90, .25);
  --amber: #d9a145;
  --warn: #e39a4f;
  --rust: #cc7d55;
  --gold: #e0b030;
  --gold-bg: #29231a;
  --note-bg: #2b2415;
  --note-line: #4b3e22;
  --blue: #5a9be6;
  --cal-1: #7ea4dc;
  --cal-2: #b48ad6;
  --cal-3: #6cc0a4;
  --cal-4: #d9926e;
  --steel: #739dca;
  --violet: #a196d4;
  --strip-mark: #3a4146;
  --strip-work: #2e4a43;
  --bar-fill: #3f7466;
  --good: #6cc070;
  --good-bg: #1f2b20;
  --watch: #e0a648;
  --watch-bg: #2c2517;
  --bad: #ec6a5e;
  --bad-bg: #321e1c;
}

/* system: written from the dark set above by bin/token-list.mjs (Follow the system, the default: no theme chosen, the
   computer's own setting decides); tests/design.test.js fails while it is behind. Do not edit by hand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  
    --bg: #17191b;
    --side: #1b1e20;
    --surface: #202326;
    --hover: #272b2e;
    --sunken: #25292c;
    --overlay: rgba(0, 0, 0, .5);
  
    --ink: #e4e7e9;
    --soft: #a2a9b0;
    --faint: #737b83;
    --on-accent: #10201c;   /* dark text on the lighter dark-theme accent and red */
  
    --line: #30353a;
    --line-soft: #262a2d;
    --line-strong: #4b5258;
  
    --accent: #5fae9b;
  
    --red: #e0675a;
    --red-ring: rgba(224, 103, 90, .25);
    --amber: #d9a145;
    --warn: #e39a4f;
    --rust: #cc7d55;
    --gold: #e0b030;
    --gold-bg: #29231a;
    --note-bg: #2b2415;
    --note-line: #4b3e22;
    --blue: #5a9be6;
    --cal-1: #7ea4dc;
    --cal-2: #b48ad6;
    --cal-3: #6cc0a4;
    --cal-4: #d9926e;
    --steel: #739dca;
    --violet: #a196d4;
    --strip-mark: #3a4146;
    --strip-work: #2e4a43;
    --bar-fill: #3f7466;
    --good: #6cc070;
    --good-bg: #1f2b20;
    --watch: #e0a648;
    --watch-bg: #2c2517;
    --bad: #ec6a5e;
    --bad-bg: #321e1c;
  }
}
/* /system */