/* Niwa AI — CSS Variables */
:root {
  /* Brand */
  --za-dark: #020c0a;
  --za-accent: #d2ef9a;
  --za-white: #FFFFFF;

  /* Layout */
  --za-gap: 16px;
  --za-flyout-radius: 24px;

  /* Shadows */
  --za-shadow: 0 18px 60px rgba(2, 12, 10, .28);
  --za-bubble-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  --za-input-shadow: 0 6px 22px rgba(15, 23, 42, 0.1);

  /* Light glass theme */
  --niwa-bg: rgba(255, 255, 255, 0.18);
  --niwa-border: rgba(255, 255, 255, 0.35);
  --niwa-text: #0b0b0b;
  --niwa-blur: 20px;

  /* Dark glass theme */
  --za-dark-glass-shell: rgba(14, 16, 20, 0.82);
  --za-dark-glass-panel: rgba(20, 20, 20, 0.5);
  --za-dark-glass-border: rgba(255, 255, 255, 0.15);
  --za-dark-glass-text: #f8f8f8;
  --za-dark-glass-muted: rgba(248, 248, 248, 0.72);
  --za-dark-glass-soft: rgba(255, 255, 255, 0.1);
  --za-dark-glass-soft-strong: rgba(255, 255, 255, 0.16);
  --za-dark-glass-blur: 24px;
  --za-dark-glass-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

@supports (color: oklch(0.5 0 0)) {
  :root {
    --za-dark-glass-shell: oklch(.18 0 0 / .82);
    --za-dark-glass-panel: oklch(.145 0 0 / .5);
    --za-dark-glass-border: oklch(1 0 0 / 15%);
    --za-dark-glass-text: oklch(.985 0 0);
    --za-dark-glass-muted: oklch(.86 0 0 / .78);
    --za-dark-glass-soft: oklch(1 0 0 / 10%);
    --za-dark-glass-soft-strong: oklch(1 0 0 / 16%);
  }
}