/* The palette and type. The brand red is from aboutgrm.com; the neutrals are a
   cool grey so the red is the only colour on the page that means anything. */

:root {
  color-scheme: light;
  --white: #ffffff;

  /* Fluent neutrals, lightest to darkest. */
  --n-lighter-alt: #fafbfc;
  --n-lighter: #f4f5f7;
  --n-light: #e7e9ee;
  --n-quaternary: #cfd4dc;
  --n-tertiary: #98a0ac;
  --n-secondary: #5a6270;
  --n-primary: #1d2229;
  --n-dark: #14181d;

  /* Brand red. Also the delete colour: destructive confirms use the accent
     and the dialog title carries the warning, so two shades of red never
     mean two different things. */
  --brand: #a51225;
  --brand-dk: #8a0f1f;
  --brand-lt: #fdf3f4;
  /* The logo's own colours, from the GRM Connect wordmark. */
  --logo-red: #991b1e;
  --logo-ink: #1f2937;
  /* The sidebar: the brand red itself, the app's frame. */
  --nav-bg: var(--brand);
  --nav-ink: rgb(255 255 255 / 76%);
  --nav-hover: rgb(255 255 255 / 9%);
  --nav-on: rgb(255 255 255 / 16%);

  --ok: #107c10;
  --warn-bg: #fff4ce;
  --warn-dot: #d69e00;
  --warn-ink: #8a6914;
  --err: #a4262c;
  --err-bg: #fde7e9;

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --mono: Consolas, "Courier New", monospace;

  /* Depth: soft and low, so surfaces lift off the page without outlines. */
  --sh2: 0 1px 2px rgb(16 24 40 / 5%), 0 2px 8px rgb(16 24 40 / 5%);
  --sh16: 0 4px 12px rgb(16 24 40 / 8%), 0 1px 3px rgb(16 24 40 / 6%);
  --sh64: 0 24px 48px rgb(16 24 40 / 18%), 0 4px 12px rgb(16 24 40 / 10%);

  /* Controls round a little; surfaces round more, so hierarchy shows. */
  --radius: 8px;
  --radius-lg: 14px;

  --suite-height: 56px;
  --nav-width: 232px;
  --panel-width: 360px;
  --row-height: 48px;
  --header-height: 36px;
}

/* Night mode: the same names, darker values. Follows the device until the
   moon or sun is tapped, then theme.js pins the choice on <html>. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --white: #1b1f26;

    --n-lighter-alt: #20252d;
    --n-lighter: #121519;
    --n-light: #2b313a;
    --n-quaternary: #3c434e;
    --n-tertiary: #7b8492;
    --n-secondary: #a4acb9;
    --n-primary: #e4e7ec;
    --n-dark: #f3f5f8;

    --brand: #d23a4f;
    --brand-dk: #b8283c;
    --brand-lt: #3a1b21;
    --nav-bg: #7a0e1c;
    --logo-red: #e5484d;
    --logo-ink: var(--n-dark);

    --ok: #55c255;
    --warn-bg: #3a3116;
    --warn-dot: #e2b33a;
    --warn-ink: #e8c76c;
    --err: #ff6d74;
    --err-bg: #3e1d21;

    --sh2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
    --sh16: 0 4px 12px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
    --sh64: 0 24px 48px rgb(0 0 0 / 55%), 0 4px 12px rgb(0 0 0 / 40%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --white: #1b1f26;

  --n-lighter-alt: #20252d;
  --n-lighter: #121519;
  --n-light: #2b313a;
  --n-quaternary: #3c434e;
  --n-tertiary: #7b8492;
  --n-secondary: #a4acb9;
  --n-primary: #e4e7ec;
  --n-dark: #f3f5f8;

  --brand: #d23a4f;
  --brand-dk: #b8283c;
  --brand-lt: #3a1b21;
  --nav-bg: #7a0e1c;
  --logo-red: #e5484d;
  --logo-ink: var(--n-dark);

  --ok: #55c255;
  --warn-bg: #3a3116;
  --warn-dot: #e2b33a;
  --warn-ink: #e8c76c;
  --err: #ff6d74;
  --err-bg: #3e1d21;

  --sh2: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
  --sh16: 0 4px 12px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
  --sh64: 0 24px 48px rgb(0 0 0 / 55%), 0 4px 12px rgb(0 0 0 / 40%);

  color-scheme: dark;
}