/* The shared design tokens: the greys, the meanings, the score scale, the
   chart colors, the note heat, type, space, corners and edges. They are the
   same in every app of the suite. What goes with an app's accent (the
   accent, its tint, its hover, and the words and frames on it) is in its
   named palette, design/palette.css (Harbor, for Homer). Load this file,
   then palette.css, then parts.css.

   /style-guide reads both files to draw its swatches, so a value changed
   here changes there. Each color line ends with a note on its one job. */

:root {
  /* Greys: the same in every app of the suite */
  --ink: #1B1D1F;           /* words, frames, edges, a chart's one line */
  --grey: #55585B;          /* the second line, hints, the flash line, labels */
  --edge: #8C8F8A;          /* a field's frame, the period before, Other */
  --line: #C4C6C1;          /* rules between rows, a frame that is not ready */
  --shade: #D3D5D0;         /* a track, a saved chip, a switch that is off */
  --desk: #E4E5E1;          /* the desk under the paper, gridlines, a row under the pointer */
  --paper: #FAFAF8;         /* the panel */
  --white: #FFFFFF;         /* buttons, fields, menus */
  --scrim: rgba(27, 29, 31, 0.45);

  /* Meanings */
  --amber: #7A5A00;         /* check this: a person needs to look or act */
  --amber-light: #F5ECCF;   /* the fill under amber words */
  --red: #A33A2C;           /* broken, or it deletes */
  --red-light: #F6E3DF;     /* the fill under red words */
  --red-deep: #86281C;      /* the far end of bad, and the danger button under the pointer */
  --green: #3C6A2E;         /* good, and added text */
  --green-light: #E5EEDC;   /* the fill under green words, the on-track band */
  --green-deep: #2A531D;    /* the far end of good */
  --orange: #934302;        /* the middle of bad, between amber and red */
  --orange-light: #FBE5D2;  /* the fill under orange words */

  /* The score scale: a fill under words, and a bar, for each step from
     -5 (worst) to +5 (best). The words take the meanings above. */
  --score-fill-bad5: #F3D4CE;
  --score-fill-bad4: #F6E3DF;
  --score-fill-bad3: #FBE5D2;
  --score-fill-bad2: #F5ECCF;
  --score-fill-bad1: #F9F3E1;
  --score-fill-even: #E4E5E1;
  --score-fill-good1: #EEF5E9;
  --score-fill-good2: #EEF5E9;
  --score-fill-good3: #E5EEDC;
  --score-fill-good4: #E5EEDC;
  --score-fill-good5: #D6E5CC;
  --score-bar-bad5: #A33A2C;
  --score-bar-bad4: #BB584A;
  --score-bar-bad3: #B66B31;
  --score-bar-bad2: #B79245;
  --score-bar-bad1: #D9B979;
  --score-bar-even: #C4C6C1;
  --score-bar-good1: #C1D9BA;
  --score-bar-good2: #A2C397;
  --score-bar-good3: #7DA66F;
  --score-bar-good4: #5C884C;
  --score-bar-good5: #3C6A2E;

  /* Charts, the same in every app. One series is ink. Several series take
     these colors in this order, never cycled: an eighth folds into Other.
     No accent is ever a chart color. */
  --chart-1: #5B7FC2;       /* the first series */
  --chart-2: #D27271;       /* the second series */
  --chart-3: #8959AA;       /* the third series */
  --chart-4: #848E38;       /* the fourth series */
  --chart-5: #A54881;       /* the fifth series */
  --chart-6: #C28D2E;       /* the sixth series: light, so its chart keeps a legend */
  --chart-7: #018D87;       /* the seventh series */
  --note-heat-1: #C9D8F3;   /* one note on a day */
  --note-heat-2: #99B2DE;   /* two notes on a day */
  --note-heat-3: #6586C3;   /* three or more notes on a day */

  /* Type */
  --font-sans: 'Adwaita Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, monospace;
  --text-title: 40px;
  --text-thing: 36px;
  --text-lead: 18px;
  --text-heading: 20px;
  --text-row: 17px;
  --text-body: 16px;
  --text-small: 15px;
  --text-meta: 14px;
  --text-tag: 13px;
  --text-key: 12px;

  /* Space, named by size in px */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-36: 36px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;

  /* Radius */
  --radius-panel: 14px;
  --radius-logo: 12px;
  --radius-button: 10px;
  --radius-pill: 6px;
  --radius-check: 5px;
  --radius-small-tile: 4px;
  --radius-round: 50%;
  --radius-token: 999px;

  /* Edges: solid ink, never blurred */
  --edge-button: 0 3px 0 #1B1D1F;
  --edge-dialog: 0 6px 0 #1B1D1F;

  /* Widths */
  --shell-width: 1224px;
  --measure-text: 640px;
  --measure-list: 760px;

  /* Glyph sizes: the 12 by 12 grid at whole steps */
  --glyph-title: 36px;
  --glyph-menu: 24px;
  --glyph-list: 20px;
  --glyph-inline: 16px;
}