@charset "UTF-8";
/* Tally's design tokens: Outpost's "style A" (public/css/tokens.css), so the two products
   match (founder, November 8). White and ink; cobalt used sparingly (focus, selection, the
   chosen option); the category's data pair, visitors as a sky-blue line and bars, revenue
   in coral; pale tints instead of solid fills; green ONLY for live and success states.
   Primary buttons are ink with white text. Bricolage Grotesque (Outpost's display face)
   for headings and the big numbers; text in Outpost's Inter/system stack.
   The theme is the visitor's choice (System, Light or Dark: crates/tally-web/src/theme.rs).
   Light is the default; dark is written twice with the same values, under
   :root[data-theme="dark"] (chosen) and, for System on a dark device, under
   :root:not([data-theme="light"]) in the prefers-color-scheme query. Every stylesheet's
   dark rules come in that pair (tally-web's stylesheets test holds them equal); a
   component's are scoped with :where(), so they keep their own specificity.
   Dark takes Coolify's look (founder, November 8):
   near-black paper, cards a step up with hairline grey borders, violet for the visitor
   line, focus, selection and primary buttons, a deep purple tint on the top bar, green
   for live. Revenue stays coral. Radii are small and ranked (panels 12, controls 8, bars 4):
   no pill shapes. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Surfaces (Outpost: --canvas, --bg, --mint, --line). */
  --paper: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --line: #eceef2;
  --line-2: #f1f3f6;

  /* Ink: headings and numbers, body text, quieter text. --muted is AA on white and paper. */
  --ink: #0b0d12;
  --ink-2: #1b2230;
  --muted: #6b7180;
  --faint: #9aa0ad;
  --on-ink: #ffffff;

  /* Primary buttons, the selected tab, step numbers; the top bar's background. */
  --button-bg: #0b0d12;
  --button-ink: #ffffff;
  --button-hover: #262a33;
  --chrome: transparent;

  /* Cobalt: focus rings, the selected option, checks. */
  --brand: #004296;
  --brand-tint: #e6eefa;

  /* Visitors: the chart line and area, the "now" dot, row bars. */
  --visitors: #3b78d8;
  --visitors-bar: #e3ecf8;
  --area-top: #3b78d8;

  /* Revenue (wave 2 fills these; wave 1 shows the empty payment slots). --revenue-ink is
     AA on white. */
  --revenue: #ec7d93;
  --revenue-ink: #b4344f;
  --revenue-bar: #f8dfe5;
  --revenue-line: #efa6b6;

  /* Live and success only. --live-ink is AA on white and on --live-tint. */
  --live: #12a777;
  --live-ink: #0b7a55;
  --live-tint: #e7f6ef;

  /* Drops and problems. */
  --down: #b42318;
  --down-tint: #fdeef0;

  --code-bg: #0b0d12;
  --code-ink: #e6eefa;

  --shadow-menu: 0 1px 2px rgba(11, 13, 18, .04), 0 24px 60px -12px rgba(11, 13, 18, .16);

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  --radius-panel: 12px;
  --radius-control: 8px;
  --radius-bar: 4px;

  /* Motion: the same curves and pace as Outpost's motion bar (public/css/motion.css). */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --duration: .8s;
  --duration-draw: 1.4s;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Coolify's greys (base #101010 and the coolgray steps) and its violet. */
  --paper: #0a0a0a;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --line: #262626;
  --line-2: #1f1f1f;

  --ink: #f5f5f5;
  --ink-2: #e5e5e5;
  --muted: #a3a3a3;
  --faint: #737373;
  --on-ink: #0a0a0a;

  --button-bg: #6b16ed;
  --button-ink: #ffffff;
  --button-hover: #7317ff;
  --chrome: linear-gradient(90deg, #1a0d33 0%, #110a1e 45%, #0a0a0a 100%);

  --brand: #9d6bff;
  --brand-tint: #1e1433;

  --visitors: #9d6bff;
  --visitors-bar: #1c1530;
  --area-top: #7c3aed;

  --revenue: #e0607a;
  --revenue-ink: #f08aa0;
  /* A step lighter than the panels, so a breakdown row's revenue overlay shows. */
  --revenue-bar: #45202d;
  --revenue-line: #7a3446;

  --live: #22c55e;
  --live-ink: #4ade80;
  --live-tint: #0d2416;

  --down: #f87171;
  --down-tint: #2a1414;

  --code-bg: #0f0f0f;
  --code-ink: #e5e5e5;

  --shadow-menu: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -12px rgba(0, 0, 0, .7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Coolify's greys (base #101010 and the coolgray steps) and its violet. */
    --paper: #0a0a0a;
    --surface: #141414;
    --surface-2: #1a1a1a;
    --line: #262626;
    --line-2: #1f1f1f;

    --ink: #f5f5f5;
    --ink-2: #e5e5e5;
    --muted: #a3a3a3;
    --faint: #737373;
    --on-ink: #0a0a0a;

    --button-bg: #6b16ed;
    --button-ink: #ffffff;
    --button-hover: #7317ff;
    --chrome: linear-gradient(90deg, #1a0d33 0%, #110a1e 45%, #0a0a0a 100%);

    --brand: #9d6bff;
    --brand-tint: #1e1433;

    --visitors: #9d6bff;
    --visitors-bar: #1c1530;
    --area-top: #7c3aed;

    --revenue: #e0607a;
    --revenue-ink: #f08aa0;
    /* A step lighter than the panels, so a breakdown row's revenue overlay shows. */
    --revenue-bar: #45202d;
    --revenue-line: #7a3446;

    --live: #22c55e;
    --live-ink: #4ade80;
    --live-tint: #0d2416;

    --down: #f87171;
    --down-tint: #2a1414;

    --code-bg: #0f0f0f;
    --code-ink: #e5e5e5;

    --shadow-menu: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px -12px rgba(0, 0, 0, .7);
  }
}