/* =====================================================================
   GoGaze dashboard: COLOURS, FONTS AND SHAPES
   ---------------------------------------------------------------------
   This is the only file you need to change the look of the dashboard.
   The colours are the same as the gogaze.in website.

   How to change a colour: replace the code after the colon, for example
     --taxi: #FFC21A;   ->   --taxi: #FFB000;
   Save the file and refresh the browser. Pick colours at
   https://htmlcolorcodes.com/color-picker/

   The first block is the light look. The two blocks under it are the
   dark look (used when the computer is in dark mode). If you change a
   colour that is in both, change it in both dark blocks too.
   ===================================================================== */

:root {
  /* ---- Brand colours (from the website) ---- */
  --taxi: #FFC21A;        /* taxi yellow: main buttons, highlights */
  --taxi-hover: #FFD55C;  /* taxi yellow when the mouse is over it */
  --cyan: #00C2F3;        /* GoGaze logo colour */
  --brand: #006E94;       /* deep cyan: links, selected things, the AI's colour */

  /* ---- Page and cards ---- */
  --page: #F3F0E8;        /* page background (the website's paper colour) */
  --card: #FBFAF6;        /* cards and tables */
  --card-2: #E9E5DA;      /* soft fills inside cards */
  --line: rgba(13, 13, 11, 0.12);   /* thin borders */

  /* ---- Text ---- */
  --text: #0D0D0B;        /* main text (the website's ink) */
  --text-2: #3A3832;      /* softer text */
  --text-3: #5E5B53;      /* small grey notes */

  /* ---- Top bar (dark, like the website's dark sections) ---- */
  --bar: #0D0D0B;
  --bar-text: #F3F0E8;
  --bar-text-2: #A39E92;
  --bar-line: rgba(243, 240, 232, 0.12);

  /* ---- Chart colours ---- */
  --ai: #006E94;          /* slots picked by the AI */
  --rotation: #B5AE9F;    /* slots picked by fair rotation */
  /* Map, from few scans to many */
  --heat-0: #ECE8DE; --heat-1: #FFE9A8; --heat-2: #FFD24D; --heat-3: #F2A900; --heat-4: #B87700; --heat-5: #6E4500;
  /* Likely customers, from far fewer (1) to far more (5) than average */
  --div-1: #006E94; --div-2: #8CCFE3; --div-3: #E4E0D6; --div-4: #FFC95A; --div-5: #C98500;

  /* ---- Status colours (keep these meaning good / warning / problem) ---- */
  --good: #1D7F45;  --good-bg: #DDF0E3;
  --warn: #8A5A00;  --warn-bg: #FBEBC4;
  --bad:  #B8322A;  --bad-bg:  #F7DEDA;
  --off:  #6E6B64;  --off-bg:  #E6E2D8;

  /* ---- Fonts (the same as the website) ---- */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;  /* big headings and numbers */
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;          /* everything else */
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;          /* small labels and codes */

  /* ---- Shapes ---- */
  --radius-card: 20px;    /* corner roundness of cards. 0 = square */
  --radius-pill: 999px;   /* buttons and tags are pill shaped like the website */
  --page-width: 1360px;   /* widest the content gets on big screens */
}

/* Dark look, when the computer is set to dark mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --brand: #00C2F3;
  --page: #0D0D0B; --card: #171714; --card-2: #22211D; --line: rgba(243, 240, 232, 0.12);
  --text: #F3F0E8; --text-2: #CFCABE; --text-3: #A39E92;
  --bar: #0D0D0B; --bar-line: rgba(243, 240, 232, 0.12);
  --ai: #00C2F3; --rotation: #7D776B;
  --heat-0: #22211D; --heat-1: #3D2F0B; --heat-2: #6B4C00; --heat-3: #A87400; --heat-4: #E6A100; --heat-5: #FFD55C;
  --div-1: #00C2F3; --div-2: #1D5466; --div-3: #34322C; --div-4: #8A6200; --div-5: #FFC21A;
  --good: #5FC485; --good-bg: #16301F; --warn: #F0BE55; --warn-bg: #3A2C0C;
  --bad: #F07D72; --bad-bg: #3A1A17; --off: #A39E92; --off-bg: #2A2924;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --brand: #00C2F3;
  --page: #0D0D0B; --card: #171714; --card-2: #22211D; --line: rgba(243, 240, 232, 0.12);
  --text: #F3F0E8; --text-2: #CFCABE; --text-3: #A39E92;
  --bar: #0D0D0B; --bar-line: rgba(243, 240, 232, 0.12);
  --ai: #00C2F3; --rotation: #7D776B;
  --heat-0: #22211D; --heat-1: #3D2F0B; --heat-2: #6B4C00; --heat-3: #A87400; --heat-4: #E6A100; --heat-5: #FFD55C;
  --div-1: #00C2F3; --div-2: #1D5466; --div-3: #34322C; --div-4: #8A6200; --div-5: #FFC21A;
  --good: #5FC485; --good-bg: #16301F; --warn: #F0BE55; --warn-bg: #3A2C0C;
  --bad: #F07D72; --bad-bg: #3A1A17; --off: #A39E92; --off-bg: #2A2924;
  color-scheme: dark;
}