:root,
[data-ab-theme="frost"] {
  --ab-surface-canvas:
    radial-gradient(circle at 16% -5%, rgba(30, 107, 255, 0.13), transparent 35rem),
    radial-gradient(circle at 84% 18%, rgba(0, 212, 255, 0.075), transparent 30rem),
    linear-gradient(180deg, #050914 0%, var(--ab-color-canvas) 48%, #02050b 100%);

  --ab-surface-glass:
    linear-gradient(145deg, rgba(140, 220, 255, 0.055), rgba(140, 220, 255, 0.018));

  --ab-surface-glass-elevated:
    linear-gradient(145deg, rgba(140, 220, 255, 0.105), rgba(140, 220, 255, 0.035));

  --ab-surface-terminal:
    linear-gradient(180deg, rgba(7, 18, 33, 0.88), rgba(3, 10, 20, 0.94));

  --ab-surface-grid-size: 48px;
  --ab-surface-grid-line: rgba(0, 212, 255, 0.045);
  --ab-surface-blur: 18px;
  --ab-surface-blur-elevated: 26px;
  --ab-terminal-fill: rgba(3, 10, 20, 0.94);
  --ab-terminal-fill-strong: rgba(2, 8, 16, 0.98);
}

.ab-frost-canvas {
  min-height: 100%;
  color: var(--ab-color-text-primary);
  background-color: var(--ab-color-canvas);
  background-image: var(--ab-surface-canvas);
}

.ab-frost-grid {
  background-image:
    linear-gradient(var(--ab-surface-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ab-surface-grid-line) 1px, transparent 1px);
  background-size: var(--ab-surface-grid-size) var(--ab-surface-grid-size);
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-ab-theme="frost"] {
    --ab-color-glass: rgba(7, 16, 29, 0.96);
    --ab-color-glass-elevated: rgba(9, 21, 37, 0.98);
    --ab-surface-blur: 0px;
    --ab-surface-blur-elevated: 0px;
  }
}