/**
 * Dark mode — Figma “Selection colors” (100% opacity).
 * Loaded after page styles + typography.css; overridden by theme-light.css when [data-theme="light"].
 */
:root {
  --color-bg-deep: #1d1f31;
  --color-periwinkle: #717eff;
  --color-sky-light: #8cccf9;
  --color-sky: #90cbf6;
  --color-pink: #f281f6;
  --color-gold: #fcdd71;

  --blue: var(--color-periwinkle);
  --pink: var(--color-pink);
  --green: var(--color-gold);

  --bg: var(--color-bg-deep);
  --bg-soft: #272a40;
  --card: #2f334d;
  --ink: #f3f5ff;
  --muted: #9cb9ea;

  --bg-gradient: radial-gradient(
    ellipse 130% 90% at 12% -15%,
    #363966 0%,
    #252839 38%,
    var(--color-bg-deep) 68%,
    #171928 100%
  );
  --header-bg: rgba(29, 31, 49, 0.88);
  --line: rgba(140, 204, 249, 0.14);
  --field-line: rgba(113, 126, 255, 0.3);

  --danger: #ff6b7a;
  --warn: #ffd66b;
}

/* Navy panels instead of legacy purple glass (inline CSS uses a fixed rgba). */
:root:not([data-theme="light"]) .panel {
  background: rgba(47, 51, 77, 0.94);
}

/* Logo blobs: gold + pink (dark palette has no lime). */
:root:not([data-theme="light"]) .brand-mark::before {
  background: var(--color-gold);
}

:root:not([data-theme="light"]) .brand-mark::after {
  background: var(--color-pink);
}