@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --loyco-bg: #0f2834;
  --loyco-bg-deep: #0f2834;
  --loyco-panel: #0f2834;
  --loyco-text-primary: #f4f8ff;
  --loyco-text-secondary: rgba(244, 248, 255, 0.7);
  --loyco-border-soft: rgba(255, 255, 255, 0.3);
  --loyco-border-strong: rgba(255, 255, 255, 0.3);
  --loyco-accent: #9fd9ff;
  --loyco-positive: #9fed96;
  --loyco-warning: #ffcb85;

  /* Severity foreground colors used by ErrorBanner + future toast/status UIs.
     Background tints are derived from these via color-mix at the call site. */
  --loyco-severity-error: #ff8a8a;
  --loyco-severity-warning: #ffcb85;
  --loyco-severity-info: #9fd9ff;

  /* Semantic aliases — preferred names for component authors who want
     intent-based tokens rather than severity-layer tokens. */
  --loyco-danger: var(--loyco-severity-error);

  --loyco-glass-1: rgba(255, 255, 255, 0.04);
  --loyco-glass-2: rgba(255, 255, 255, 0.04);
  --loyco-glass-3: rgba(255, 255, 255, 0.04);
  --loyco-glass-blur: blur(24px);

  /* Semi-opaque overlay used by the Modal primitive. Darkens + blurs
     the underlying page so the modal-card pops without losing context. */
  --loyco-backdrop: rgba(8, 24, 36, 0.6);

  --loyco-radius-sm: 6px;     /* small chips, badges, inline pills */
  --loyco-radius-md: 12px;    /* mid-size containers — filter cards, presets, modal sections */
  --loyco-radius-card: 18px;
  --loyco-radius-pill: 999px;
  --loyco-radius-lg: 18px;    /* alias for card-level radius; used by large editor hosts */

  /* Semantic surface + text aliases used by editor-host and future full-bleed
     components that need a named background rather than a glass layer. */
  --loyco-surface-1: rgba(255, 255, 255, 0.04); /* equiv. glass-layer-1 */
  --loyco-text-muted: rgba(244, 248, 255, 0.45); /* dimmer than text-secondary */

  --loyco-space-1: 0.25rem;
  --loyco-space-2: 0.5rem;
  --loyco-space-3: 0.75rem;
  --loyco-space-4: 1rem;
  --loyco-space-5: 1.5rem;
  --loyco-space-6: 2rem;

  --loyco-shadow-1: 0 0 0 rgba(0, 0, 0, 0);
  --loyco-shadow-2: 0 0 0 rgba(0, 0, 0, 0);

  --loyco-chart-stroke: #e8f7ff;
  --loyco-chart-bar: #9ecbe5;
  --loyco-chart-series-1: #d9ec80;
  --loyco-chart-series-2: #8fabff;
  --loyco-chart-series-3: #f6b786;
  --loyco-chart-grid: rgba(255, 255, 255, 0.08);
  --loyco-chart-tick: rgba(227, 239, 255, 0.72);
  --loyco-chart-tooltip-bg: #0a2b44;
  --loyco-chart-tooltip-border: rgba(255, 255, 255, 0.2);

  --loyco-stroke-top: rgba(255, 255, 255, 0.15);
  --loyco-stroke-bottom: rgba(255, 255, 255, 0);
}