/* ===========================================================================
   Theme

   The only file you need to touch to re-skin the server-rendered views (splash,
   local client, errors, OIDC interactions) and the auth widget. Everything else
   derives from the four tokens below.

   To override without editing this file, drop a theme.css into public/custom/
   (served at /custom/theme.css). It loads straight after this one, so it only
   needs to redeclare the tokens you want to change:

       :root { --theme-primary: #14532d; --theme-accent: #b45309; }

   In a container, mount your own directory over /app/public/custom -- see the
   commented volume in docs/deploy/docker-compose.yml.

   Derived tints use color-mix(), so the tokens can stay plain hex.
   =========================================================================== */

:root {
  /* Dominant brand colour: panel headers, primary buttons, focus rings. */
  --theme-primary: #1e335f;

  /* Accent: errors, alerts, accent icons. */
  --theme-accent: #e81926;

  /* Page background. */
  --theme-page: #e8edf5;

  /* Body text. */
  --theme-ink: #1f2937;
}

/* --- Derived ---------------------------------------------------------------
   These follow the four tokens above; override a token rather than a value
   here. bonsai.css and the widget read --primary/--secondary, so those are
   mapped too: --primary is the accent (it drives error styling), --secondary
   is the dominant brand colour.
   --------------------------------------------------------------------------- */

:root {
  --primary: var(--theme-accent);
  --secondary: var(--theme-primary);

  --navy: var(--theme-primary);
  --ink: var(--theme-ink);
  --ink-muted: color-mix(in srgb, var(--theme-ink) 65%, #fff);
  --hairline: color-mix(in srgb, var(--theme-ink) 12%, transparent);
  --sunken: color-mix(in srgb, var(--theme-ink) 5%, transparent);
  --inset: rgba(255, 255, 255, 0.72);

  /* Panels carry a faint tint rather than flat white; inset blocks lift back
     towards white so they read on either tint. */
  --panel-tint: linear-gradient(165deg,
                color-mix(in srgb, var(--theme-primary) 2%, #fff) 0%,
                color-mix(in srgb, var(--theme-primary) 7%, #fff) 45%,
                color-mix(in srgb, var(--theme-primary) 14%, #fff) 100%);

  --panel-tint-error: linear-gradient(165deg,
                      color-mix(in srgb, var(--theme-accent) 1%, #fff) 0%,
                      color-mix(in srgb, var(--theme-accent) 5%, #fff) 45%,
                      color-mix(in srgb, var(--theme-accent) 9%, #fff) 100%);

  --panel-shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
                  0 20px 40px -12px rgba(16, 24, 40, 0.35);

  /* Page: the flat --theme-page with a wide glow of the brand colour above it. */
  --page-bg: radial-gradient(1100px 620px at 50% -12%,
             color-mix(in srgb, var(--theme-primary) 11%, transparent), transparent 68%),
             linear-gradient(180deg,
             color-mix(in srgb, var(--theme-page) 45%, #fff) 0%,
             var(--theme-page) 100%);
}