/*
 * Single source of truth for both dashboard surfaces: the Vaadin view at /dashboard and the
 * static public page at /rewards (build.gradle copies this file into static/rewards/css).
 *
 * Density is a token step, not a separate stylesheet: `.dashboard-shell--console` overrides
 * padding, gap and type sizes, and the whole layout follows.
 */
.dashboard-shell {
  color-scheme: dark;

  /*
   * JetBrains Mono is the intended face and is picked up when installed locally. Drop the woff2
   * files next to this file and add an @font-face block to bundle it; the stack below is the
   * fallback chain and needs no assets.
   */
  --dash-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --dash-space-2xs: .25rem;
  --dash-space-xs: .5rem;
  --dash-space-sm: .75rem;
  --dash-space-md: 1rem;
  --dash-space-lg: 1.25rem;
  --dash-space-xl: 1.625rem;
  --dash-space-2xl: 2.25rem;

  /* Density step — see .dashboard-shell--console below. */
  --dash-pad: var(--dash-space-xl);
  --dash-gap: 1.375rem;
  --dash-col-gap: 2.25rem;
  --dash-font-base: .9375rem;
  --dash-font-label: .71875rem;
  --dash-font-meta: .78125rem;
  --dash-font-address: .84375rem;
  --dash-size-value: 1.875rem;
  --dash-size-node: 1.3125rem;
  --dash-size-figure: clamp(2.5rem, 6.4vw, 5.25rem);
  --dash-size-block-title: .875rem;
  --dash-sky-height: 21.25rem;

  /* Surfaces. Flat: no gradients, no shadows, hairlines only. */
  --dash-void: #05070e;
  --dash-field: #0b111b;
  --dash-rule: #1b2532;
  --dash-rule-strong: #2e3a4a;

  /* Warm ink on a cold ground. */
  --dash-fg: #ede6d9;
  --dash-fg-secondary: #9da9b8;
  --dash-fg-muted: #67707e;

  /* Accent carries data; the three signal colours are reserved for state. */
  --dash-accent: #5b95ff;
  --dash-accent-soft: rgba(91, 149, 255, .16);
  --dash-accent-wash: rgba(91, 149, 255, .08);
  --dash-ok: #37c48e;
  --dash-warn: #e5a93f;
  --dash-bad: #f0705f;

  --dash-background:
    radial-gradient(78% 55% at 82% -12%, rgba(91, 149, 255, .13), transparent 68%),
    radial-gradient(50% 40% at 8% -8%, rgba(140, 120, 255, .07), transparent 70%),
    var(--dash-void);

  --dash-content-max: 84rem;
  --dash-skeleton-base: rgba(157, 169, 184, .12);
  --dash-skeleton-shine: rgba(237, 230, 217, .18);
}

/* Operator console: same tokens, one step denser. */
.dashboard-shell--console {
  --dash-pad: var(--dash-space-lg);
  --dash-gap: 1.0625rem;
  --dash-col-gap: 2.25rem;
  --dash-font-base: .875rem;
  --dash-font-label: .6875rem;
  --dash-font-meta: .75rem;
  --dash-font-address: .8125rem;
  --dash-size-value: 1.4375rem;
  --dash-size-node: 1.3125rem;
  --dash-size-block-title: .875rem;
  --dash-sky-height: 13.125rem;
}

@media (max-width: 720px) {
  .dashboard-shell {
    --dash-pad: var(--dash-space-md);
    --dash-size-value: 1.5rem;
  }

  .dashboard-shell--console {
    --dash-pad: .875rem;
    --dash-size-value: 1.25rem;
  }
}