/* Endyoursearch design tokens: the one place for every colour, font, size, space and radius.
   Screens use these names, never raw values. Dark is the default; light uses the same names.
   Neither theme is pure black or pure white. */

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

  /* Surfaces: from the app's floor up to raised pieces */
  --surface-0: #111317;
  --surface-1: #171a1f;
  --surface-2: #1f2329;
  --surface-3: #282d34;
  --mail-paper: #fbfaf8; /* a mail is drawn by its sender for light paper: the light surface in both themes */
  --mail-ink: #1c1e22;

  /* Text */
  --text-1: #e8eaed;
  --text-2: #a4aab4;
  --text-3: #6e7580;

  /* Lines */
  --line: #2a2f37;
  --line-strong: #3b414b;

  /* Accent: one per screen, on the action that matters most */
  --accent: #f07a2a;
  --accent-hover: #f58c45;
  --on-accent: #1b1007;

  /* Data colours: for charts, statuses and kinds, always paired with a word or a shape */
  --data-blue: #6ea8fe;
  --data-green: #5cc995;
  --data-violet: #b39dfa;
  --data-yellow: #e9c25a;
  --data-red: #f0736b;

  /* Status (Your health dashboard): good, watch, bad; always with its word and its shape
     (a circle, a diamond, a triangle). Bad is a rose, clearly apart from the orange accent. */
  --status-good: #5cc995;
  --status-watch: #e9c25a;
  --status-bad: #e2609b;
}

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

  --surface-0: #f4f3f0;
  --surface-1: #fbfaf8;
  --surface-2: #ebe9e5;
  --surface-3: #e0ded9;
  --mail-paper: #fbfaf8; /* a mail is drawn by its sender for light paper: the light surface in both themes */
  --mail-ink: #1c1e22;

  --text-1: #1c1e22;
  --text-2: #545a63;
  --text-3: #858b94;

  --line: #dcd9d3;
  --line-strong: #c4c0b8;

  --accent: #d9621a;
  --accent-hover: #c4560f;
  --on-accent: #fff8f2;

  --data-blue: #2f6fd6;
  --data-green: #1f8a5b;
  --data-violet: #6c4fd1;
  --data-yellow: #a57a0c;
  --data-red: #c83c33;

  --status-good: #1f8a5b;
  --status-watch: #a57a0c;
  --status-bad: #b8336f;
}

:root {
  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale: seven sizes, from a title down to a label */
  --type-title: 28px;
  --type-heading: 22px;
  --type-subheading: 18px;
  --type-body-large: 16px;
  --type-body: 15px;
  --type-small: 13px;
  --type-label: 12px;
  --type-icon: 20px; /* a mark drawn as a character, like the Weekly Goal star */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Spacing */
  --space-hair: 1px; /* a hairline nudge: a mark lined up with its text */
  --space-half: 2px; /* the gap between a title and its meta line */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-xs: 2px; /* tiny marks and bars */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-full: 999px;

  /* Lines and sizes */
  --line-width: 1px;
  --sidebar-width: 240px;
  --control-height: 34px;
  --panel-width: 340px; /* a panel or notice at the side of the screen */
}