/* A copy of apps/web/src/styles/tokens.css without its Tailwind theme, because this static site is built into its own
   image and cannot reach the web app's files. The marketing site's test keeps the colour values equal to the original,
   so edit the original and copy it here. */

:root {
  --paper: #f8fafc;
  --surface: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #cbd5e1;
  --line-soft: #e2e8f0;
  --brand: #3a2fe2;
  --brand-soft: #eef2ff;
  --brand-bar: #4f46e5;
  /* The logo mark's fill, kept from the original design. It is not text, so the 7 to 1 text rule does not apply. */
  --brand-mark: #4f46e5;
  --on-brand: #ffffff;
  --accent: #10632f;
  --accent-hover: #0e592a;
  --on-accent: #ffffff;
  --ok-fill: #f0fdf4;
  --ok-edge: #bbf7d0;
  --ok-text: #10632f;
  --warn-fill: #fef3c7;
  --warn-edge: #fcd34d;
  --warn-bar: #d97706;
  --warn-text: #883b0d;
  --finished-fill: #f4f2fb;
  --finished-edge: #d7d0ec;
  --finished-text: #584b7a;
  --destructive: #a41919;
  --destructive-bg: #fef2f2;
  --btn-line: #64748b;
  --hover-fill: #f8fafc;
  --scrim: rgba(15, 23, 42, 0.5);
  --ring: #3a2fe2;
  --chart-1: #3a2fe2;
  --chart-2: #0e7490;
  --chart-3: #b45309;
  --chart-4: #9333ea;
  --chart-5: #15803d;
  --elev-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --elev-2: 0 4px 10px rgba(15, 23, 42, 0.12);
  --elev-3: 0 6px 18px rgba(15, 23, 42, 0.18);
}

/* Layout sizes and motion. They do not change with the theme, so they sit apart from the colour blocks above and the
   test that keeps the three colour blocks equal. The values are the jobs project's. Four timings and nothing longer:
   a press, a hover or colour change, a fold or fade, a panel opening. */
:root {
  --header-height: 56px;
  --sidebar-width: 240px;
  --motion-press: 80ms;
  --motion-fast: 150ms;
  --motion-fold: 200ms;
  --motion-slow: 300ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f172a;
    --surface: #1e293b;
    --ink: #e2e8f0;
    --muted: #c0cad8;
    --line: #3f4c5f;
    --line-soft: #2a3648;
    --brand: #acb4fa;
    --brand-soft: #312e81;
    --brand-bar: #3730a3;
    /* The logo mark's fill, kept from the original design. It is not text, so the 7 to 1 text rule does not apply. */
    --brand-mark: #818cf8;
    --on-brand: #ffffff;
    --accent: #4ade80;
    --accent-hover: #58e18a;
    --on-accent: #0f172a;
    --ok-fill: #0f2f26;
    --ok-edge: #1f5a48;
    --ok-text: #6ee7b7;
    --warn-fill: #3a2a08;
    --warn-edge: #8a6d1f;
    --warn-bar: #fcd34d;
    --warn-text: #fcd34d;
    --finished-fill: #241f33;
    --finished-edge: #453a5e;
    --finished-text: #c4b8e0;
    --destructive: #fca5a5;
    --destructive-bg: #3a1414;
    --btn-line: #94a3b8;
    --hover-fill: #2a3648;
    --scrim: rgba(0, 0, 0, 0.6);
    --ring: #acb4fa;
    --chart-1: #acb4fa;
    --chart-2: #22d3ee;
    --chart-3: #fbbf24;
    --chart-4: #c084fc;
    --chart-5: #4ade80;
    --elev-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
    --elev-2: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.55);
    --elev-3: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  --paper: #0f172a;
  --surface: #1e293b;
  --ink: #e2e8f0;
  --muted: #c0cad8;
  --line: #3f4c5f;
  --line-soft: #2a3648;
  --brand: #acb4fa;
  --brand-soft: #312e81;
  --brand-bar: #3730a3;
  /* The logo mark's fill, kept from the original design. It is not text, so the 7 to 1 text rule does not apply. */
  --brand-mark: #818cf8;
  --on-brand: #ffffff;
  --accent: #4ade80;
  --accent-hover: #58e18a;
  --on-accent: #0f172a;
  --ok-fill: #0f2f26;
  --ok-edge: #1f5a48;
  --ok-text: #6ee7b7;
  --warn-fill: #3a2a08;
  --warn-edge: #8a6d1f;
  --warn-bar: #fcd34d;
  --warn-text: #fcd34d;
  --finished-fill: #241f33;
  --finished-edge: #453a5e;
  --finished-text: #c4b8e0;
  --destructive: #fca5a5;
  --destructive-bg: #3a1414;
  --btn-line: #94a3b8;
  --hover-fill: #2a3648;
  --scrim: rgba(0, 0, 0, 0.6);
  --ring: #acb4fa;
  --chart-1: #acb4fa;
  --chart-2: #22d3ee;
  --chart-3: #fbbf24;
  --chart-4: #c084fc;
  --chart-5: #4ade80;
  --elev-1: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.5);
  --elev-2: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 10px rgba(0, 0, 0, 0.55);
  --elev-3: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 26px rgba(0, 0, 0, 0.65);
}