/* Elevate / Panelr design tokens.
   The Liquid Glass design system: frosted translucent panels over a dark canvas with soft
   depth layering, subtle gradients and spring-timed animations. Every panel uses backdrop-filter
   blur rather than solid opaque backgrounds, so the layers beneath breathe through. */
:root {
  /* grounds — darker base for the glass to read against */
  --bg-page: #04040a;
  --bg-surface: #0a0a14;
  --bg-raised: #10101c;
  --bg-elevated: #161624;
  --bg-hover: #1c1c2e;

  /* lines — softer, slightly luminous so they catch the glass edge */
  --line-soft: rgba(255 255 255 / .06);
  --line-strong: rgba(255 255 255 / .10);

  /* ink */
  --ink: #f3f1f8;
  --ink-2: #b5b0c4;
  --ink-muted: #8e88a1;

  /* brand, from the Elevate logo */
  --brand: #7a4fd4;
  --brand-bright: #8a62e0;
  --brand-soft: #a98cf0;
  --brand-deep: #4e3795;
  --brand-wash: #1a1230;

  /* states */
  --ok: #45c08a;        --ok-wash: rgba(69 192 138 / .12);
  --warn: #e8b23d;      --warn-wash: rgba(232 178 61 / .12);
  --bad: #e5676c;       --bad-wash: rgba(229 103 108 / .12);
  --info: #5b8def;      --info-wash: rgba(91 141 239 / .12);

  /* charts */
  --chart-1: #8a62e0;
  --chart-2: #45c08a;
  --chart-3: #5b8def;
  --chart-4: #e8b23d;
  --chart-5: #e5676c;

  /* radius — slightly rounder for glass panels */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;

  /* type, the Geist ramp — override system.css's system-ui defaults */
  --font: "Geist", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", system-ui, -apple-system, sans-serif;
  --font-text: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-display: 34px/40px var(--font);
  --t-h1: 24px/30px var(--font);
  --t-h2: 18px/24px var(--font);
  --t-h3: 15px/20px var(--font);
  --t-stat: 30px/34px var(--font);
  --t-body: 14px/21px var(--font);
  --t-small: 13px/18px var(--font);
  --t-label: 11px/14px var(--font);

  /* ---------- Liquid Glass ---------- */
  --glass-bg: rgba(14 14 26 / .55);
  --glass-bg-strong: rgba(14 14 26 / .72);
  --glass-blur: 24px;
  --glass-blur-strong: 40px;
  --glass-border: rgba(255 255 255 / .08);
  --glass-border-bright: rgba(255 255 255 / .14);
  --glass-highlight: linear-gradient(135deg, rgba(255 255 255 / .06) 0%, transparent 50%);
  --glass-shadow: 0 4px 24px -4px rgba(0 0 0 / .5), 0 1px 2px rgba(0 0 0 / .3);
  --glass-shadow-lg: 0 8px 48px -8px rgba(0 0 0 / .6), 0 2px 4px rgba(0 0 0 / .3);
  --glass-glow: 0 0 80px -20px rgba(122 79 212 / .25);

  /* animation */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.0, .0, .2, 1);
  --dur-fast: .18s;
  --dur-med: .32s;
  --dur-slow: .5s;
  --dur-enter: .6s;

  --shadow-card: var(--glass-shadow);
}