/*
 * Dashboard-aligned CSS variables for BypassSite landing.
 * Source: frontend/src/theme/styles.css (:root, data-theme=midnight, brand-light).
 * html[data-theme] must be set (default brand-light); see index.html + bypass-theme.js.
 */

html[data-theme="brand-light"] {
  color-scheme: light;

  --color-bg-page: #f2dffe;
  --color-bg-shell: rgba(255, 255, 255, 0.62);
  --color-bg-overlay: rgba(242, 223, 254, 0.88);

  --color-surface-base: rgba(255, 255, 255, 0.72);
  --color-surface-subtle: rgba(255, 255, 255, 0.38);
  --color-surface-card: rgba(255, 255, 255, 0.62);
  --color-surface-elevated: rgba(255, 255, 255, 0.74);
  --color-surface-hero: rgba(255, 255, 255, 0.54);
  --color-surface-interactive: rgba(149, 0, 253, 0.07);
  --color-surface-input: rgba(255, 255, 255, 0.74);
  --color-surface-disabled: rgba(255, 255, 255, 0.36);

  --surface-bg-page:
    radial-gradient(circle at 18% 26%, rgba(149, 0, 253, 0.08), transparent 22%),
    radial-gradient(circle at 82% 64%, rgba(149, 0, 253, 0.06), transparent 24%),
    radial-gradient(circle at 50% 86%, rgba(149, 0, 253, 0.1), transparent 30%),
    linear-gradient(180deg, #f7e8ff 0%, #f2dffe 52%, #ead0fc 100%);
  --surface-bg-header:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.62)),
    radial-gradient(circle at 18% 20%, rgba(149, 0, 253, 0.06), transparent 44%);
  --surface-bg-card:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.58)),
    radial-gradient(circle at 92% 0, rgba(149, 0, 253, 0.04), transparent 54%);
  --surface-bg-button-primary:
    linear-gradient(180deg, rgba(170, 32, 235, 0.815), rgba(118, 40, 182, 0.856)),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.22), transparent 52%);
  --surface-bg-button-secondary:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.6)),
    radial-gradient(circle at 22% 16%, rgba(149, 0, 253, 0.05), transparent 56%);

  --color-text-primary: #3c2d53;
  --color-text-secondary: #4f346d;
  --color-text-muted: #5f407c;
  --color-text-soft: #9b7eb5;
  --color-text-disabled: rgba(86, 54, 121, 0.39);
  --color-text-on-accent: #ffffff;
  --color-text-on-secondary: #422569;

  --color-border-default: rgba(124, 86, 200, 0.14);
  --color-border-subtle: rgba(124, 86, 200, 0.08);
  --color-border-strong: rgba(124, 86, 200, 0.2);
  --color-border-accent: rgba(124, 86, 200, 0.3);
  --color-border-focus: rgba(124, 86, 200, 0.38);
  --color-divider: rgba(124, 86, 200, 0.09);

  --color-accent-primary: #7c56c8;
  --color-accent-primary-hover: #6c46b9;
  --color-accent-secondary: #9a76da;
  --color-accent-soft: rgba(124, 86, 200, 0.07);
  --color-accent-soft-strong: rgba(124, 86, 200, 0.13);

  --color-status-success: #2f8f74;
  --color-status-success-soft: rgba(47, 143, 116, 0.12);
  --color-status-warning: #b87a12;
  --color-status-danger: #c24a6a;
  --color-status-danger-soft: rgba(194, 74, 106, 0.12);

  --shadow-card: 0 10px 24px rgba(124, 86, 200, 0.05);
  --shadow-card-strong: 0 16px 40px rgba(124, 86, 200, 0.08);
  --shadow-overlay: 0 20px 48px rgba(124, 86, 200, 0.1);

  --app-bg: var(--color-bg-page);
  --app-bg-soft: var(--color-surface-subtle);
  --app-surface: var(--color-surface-card);
  --app-line: var(--color-border-default);
  --app-text: var(--color-text-primary);
  --app-muted: var(--color-text-muted);
  --app-accent: var(--color-accent-primary);
}

html[data-theme="midnight"] {
  color-scheme: dark;

  --color-bg-page: #04060b;
  --color-bg-shell: #08101b;
  --color-bg-overlay: rgba(7, 10, 17, 0.88);

  --color-surface-base: #0a0e15;
  --color-surface-subtle: #0d121b;
  --color-surface-card: #0f1520;
  --color-surface-elevated: #131a28;
  --color-surface-hero: #101824;
  --color-surface-interactive: #1a2540;
  --color-surface-input: #101622;
  --color-surface-disabled: #2a3143;

  --surface-bg-page:
    radial-gradient(circle at 18% 44%, rgba(54, 102, 255, 0.12), transparent 18%),
    radial-gradient(circle at 82% 58%, rgba(74, 146, 255, 0.08), transparent 20%),
    radial-gradient(circle at 50% 82%, rgba(25, 66, 131, 0.18), transparent 34%),
    linear-gradient(180deg, #02050d 0%, #02040a 56%, #020305 100%);
  /* Слои как у body::before / body::after в frontend/src/theme/styles.css (:root) */
  --surface-bg-page-particles:
    radial-gradient(circle, rgba(73, 99, 255, 0.68) 0 1.1px, transparent 2px) 0 0 / 190px 190px,
    radial-gradient(circle, rgba(197, 72, 255, 0.56) 0 1.2px, transparent 2.3px) 36px 82px / 252px 244px,
    radial-gradient(circle, rgba(95, 129, 255, 0.44) 0 1px, transparent 2px) 120px 30px / 320px 300px;
  --surface-bg-page-overlay:
    radial-gradient(circle at 16% 73%, rgba(141, 72, 255, 0.24), transparent 14%),
    radial-gradient(circle at 84% 67%, rgba(85, 118, 255, 0.24), transparent 15%),
    radial-gradient(circle at 57% 86%, rgba(199, 81, 255, 0.18), transparent 18%),
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 2px,
      transparent 4px
    );
  --surface-bg-header:
    linear-gradient(180deg, rgba(7, 12, 21, 0.96), rgba(5, 9, 16, 0.92)),
    radial-gradient(circle at 18% 20%, rgba(91, 111, 255, 0.14), transparent 44%);
  --surface-bg-card:
    linear-gradient(180deg, rgba(12, 16, 24, 0.88), rgba(8, 11, 17, 0.94)),
    radial-gradient(circle at 90% 0, rgba(91, 126, 226, 0.08), transparent 56%);
  --surface-bg-button-primary:
    linear-gradient(180deg, rgba(84, 113, 241, 0.96), rgba(48, 74, 191, 0.99)),
    radial-gradient(circle at 20% 18%, rgba(176, 194, 255, 0.22), transparent 52%);
  --surface-bg-button-secondary:
    linear-gradient(180deg, rgba(14, 20, 38, 0.9), rgba(9, 13, 26, 0.94)),
    radial-gradient(circle at 22% 16%, rgba(114, 136, 205, 0.08), transparent 56%);

  --color-text-primary: #f1f4ff;
  --color-text-secondary: #c9d1e1;
  --color-text-muted: #97a1b6;
  --color-text-soft: #7a8498;
  --color-text-disabled: rgba(191, 199, 218, 0.45);
  --color-text-on-accent: #f7f9ff;
  --color-text-on-secondary: #d7def0;

  --color-border-default: rgba(95, 108, 134, 0.24);
  --color-border-subtle: rgba(95, 108, 134, 0.16);
  --color-border-strong: rgba(121, 136, 173, 0.36);
  --color-border-accent: rgba(124, 149, 238, 0.54);
  --color-border-focus: rgba(141, 171, 255, 0.6);
  --color-divider: rgba(111, 124, 150, 0.18);

  --color-accent-primary: #5c8bff;
  --color-accent-primary-hover: #73a0ff;
  --color-accent-secondary: #a7bcff;
  --color-accent-soft: rgba(92, 139, 255, 0.18);
  --color-accent-soft-strong: rgba(92, 139, 255, 0.28);

  --color-status-success: #5dc5a5;
  --color-status-success-soft: rgba(93, 197, 165, 0.16);
  --color-status-warning: #f2bf69;
  --color-status-danger: #ef7f97;
  --color-status-danger-soft: rgba(239, 127, 151, 0.15);

  --shadow-card: 0 20px 48px rgba(0, 0, 0, 0.38);
  --shadow-card-strong: 0 30px 76px rgba(0, 0, 0, 0.44);
  --shadow-overlay: 0 24px 60px rgba(0, 0, 0, 0.48);

  --app-bg: var(--color-bg-page);
  --app-bg-soft: var(--color-surface-subtle);
  --app-surface: var(--color-surface-card);
  --app-line: var(--color-border-default);
  --app-text: var(--color-text-primary);
  --app-muted: var(--color-text-muted);
  --app-accent: var(--color-accent-primary);
}