/* Theme: the tokens every style is built on. Neutral greys, one accent,
   muted status colours; light and dark. base.css styles plain HTML with
   them, style.css the framework's components.

   An app sets its brand with one colour, in its static/css/app.css:

     :root { --app-accent: #0d9488; }             (dark mode derives a lighter tone)
     :root { --app-accent-dark: #2dd4bf; }        (optional: choose the dark tone)

   The colours here pass WCAG AA (4.5:1) as text on every background they are
   used on, and white text passes on them. Choose an accent that does too: on
   white it needs about 5:1 (it is also read on tinted backgrounds).

   Use the --app-* tokens (not raw colours) in app styles, so both themes work.
   Any token can be overridden the same way (--app-radius, --app-font, ...). */

:root {
  --app-accent: #4e5fc2;
  --app-radius: 0.6rem;
  --app-space: 1rem;
  --app-font: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
  --app-font-mono: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --grid-gutter: 1.5rem;
}

/* Light (also the default without data-theme). */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --app-accent-tone: var(--app-accent);
  --app-on-accent: #ffffff;
  --app-bg: #f6f7f9;
  --app-surface: #ffffff;
  --app-subtle: #f1f2f5;
  --app-border: #e3e5ea;
  --app-border-strong: #d9dce3;
  --app-text: #1f2430;
  --app-muted: #626875;
  --app-secondary: #525f7a;
  --app-secondary-hover: #434d63;
  --app-success: #247859;
  --app-success-soft: #e3f4ec;
  --app-warning: #916313;
  --app-warning-soft: #fbf1dc;
  --app-danger: #b64141;
  --app-danger-soft: #fbe7e7;
  --app-info: #326ab8;
  --app-info-soft: #e5effb;
  --app-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 1px rgba(17, 24, 39, 0.03);
  --app-overlay: #d5d8de;
  --app-tooltip: #1f2430;
  --app-tooltip-text: #ffffff;
  --app-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23626875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --app-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23626875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --app-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23626875' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  --app-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --app-accent-tone: var(--app-accent-dark, color-mix(in srgb, var(--app-accent) 68%, white));
  --app-on-accent: #10131c;
  --app-bg: #121417;
  --app-surface: #1a1d22;
  --app-subtle: #20242a;
  --app-border: #2b3038;
  --app-border-strong: #363c46;
  --app-text: #e5e7eb;
  --app-muted: #9aa0aa;
  --app-secondary: #4a5468;
  --app-secondary-hover: #5a657c;
  --app-success: #5cc49b;
  --app-success-soft: #1d3a2f;
  --app-warning: #e2b25a;
  --app-warning-soft: #3a3020;
  --app-danger: #ec7a7a;
  --app-danger-soft: #402427;
  --app-info: #7fb0f0;
  --app-info-soft: #1e2c40;
  --app-shadow: none;
  --app-overlay: #06070a;
  --app-tooltip: #e5e7eb;
  --app-tooltip-text: #10131c;
  --app-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  --app-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --app-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  --app-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310131c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Derived from the tokens above, for both themes. */
:root {
  --app-accent-soft: color-mix(in srgb, var(--app-accent-tone) 14%, var(--app-surface));
  --app-accent-hover: color-mix(in srgb, var(--app-accent-tone) 85%, var(--app-text));

  /* Short names used by tags and toasts. */
  --color-success: var(--app-success);
  --color-error: var(--app-danger);
  --color-warning: var(--app-warning);
  --color-info: var(--app-info);
  --color-primary: var(--app-accent-tone);
}