/* Едоскоп — design tokens (brief §6). Single source of truth for colours, type, radii. */
:root {
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text: #0F172A;
  --text-2: #526176;
  --text-3: #59677C;
  --text-body: #475569;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --nav-bg: rgba(255, 255, 255, .92);
  --page: #F4F5FA;
  --info-bg: linear-gradient(120deg, #F1EEFF, #EAF6FE);
  --orb-bg: radial-gradient(circle at 50% 40%, #FBFAFF, #F0EDFE);
  --field: #F1F5F9;
  --chip: #F8FAFC;
  --chip-border: #E2E8F0;
  --line: #EEF1F6;
  --thumb: #EEF0F5;

  --accent-from: #7C5CFF;
  --accent-to: #3B82F6;
  --accent: #6D5CFF;
  --accent-text: #6A4CF5;
  --accent-soft: #F3F0FF;
  --accent-gradient: linear-gradient(90deg, #7C5CFF 0%, #3B82F6 100%);
  --accent-gradient-diag: linear-gradient(135deg, #7C5CFF 0%, #3B82F6 100%);
  --glow-gradient: linear-gradient(90deg, #7C5CFF 0%, #22D3EE 55%, #EC4899 100%);
  --ring-gradient: conic-gradient(from 0deg, #8E8BD9 0deg, #C04FC0 60deg, #EC4899 100deg, #B04CE0 150deg, #7C5CFF 210deg, #3B82F6 270deg, #22D3EE 320deg, #8E8BD9 360deg);
  --headline-accent: linear-gradient(90deg, #7C5CFF 0%, #B04CE0 60%, #EC4899 100%);
  --ai-badge: linear-gradient(135deg, #7C5CFF 0%, #22D3EE 100%);

  --danger-bg: #FEF2F2;
  --danger-icon: #EF4444;
  --danger-text: #991B1B;
  --danger-strong: #B91C1C;
  --warn-bg: #FFF4E5;
  --warn-text: #C2410C;
  --warn-strong: #9A3412;
  --ok-bg: #ECFDF5;
  --ok-text: #047857;
  --neutral-bg: #F1F5F9;
  --neutral-text: #475569;

  --r-pill: 28px;
  --r-card: 22px;
  --r-card-sm: 20px;
  --r-thumb: 14px;

  --shadow-accent: 0 12px 28px -8px rgba(110, 92, 255, .55);
  --shadow-float: 0 12px 40px -12px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .06);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .04);

  --gutter: 20px;
  --tap: 44px;
  --app-max: 480px;

  --scan-bg: #17181D;
  --scan-surface: rgba(255, 255, 255, .1);
  --scan-surface-2: #2A2B31;
}

/* Dark theme: by the phone's setting, or chosen in Профиль → Оформление (data-theme on <html>).
   Only the tokens change; the scanner is dark already. Status colours keep their meaning. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #F4F1FF;
    --text-2: #B9B3D6;
    --text-3: #A7A1C6;
    --text-body: #D8D3F0;

    --bg: #0E0B1A;
    --surface: #171327;
    --surface-2: #0E0B1A;
    --nav-bg: rgba(23, 19, 39, .92);
    --page: #0E0B1A;
    --field: #221D3A;
    --chip: #1E1933;
    --chip-border: #342C58;
    --line: #2A2445;
    --thumb: #2A2445;

    --accent-text: #B9A6FF;
    --accent-soft: #2A2152;
    --info-bg: linear-gradient(120deg, #251C4A, #16203A);
    --orb-bg: radial-gradient(circle at 50% 40%, #2A2152, #171327);

    --danger-bg: #3A1418;
    --danger-text: #FFB3B3;
    --danger-strong: #FF8A8A;
    --warn-bg: #3A2410;
    --warn-text: #FFB074;
    --warn-strong: #FFB074;
    --ok-bg: #0F3326;
    --ok-text: #6EE7B7;
    --neutral-bg: #221D3A;
    --neutral-text: #D8D3F0;

    --shadow-float: 0 12px 40px -12px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-card: 0 0 0 1px #2A2445;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --text: #F4F1FF;
    --text-2: #B9B3D6;
    --text-3: #A7A1C6;
    --text-body: #D8D3F0;

    --bg: #0E0B1A;
    --surface: #171327;
    --surface-2: #0E0B1A;
    --nav-bg: rgba(23, 19, 39, .92);
    --page: #0E0B1A;
    --field: #221D3A;
    --chip: #1E1933;
    --chip-border: #342C58;
    --line: #2A2445;
    --thumb: #2A2445;

    --accent-text: #B9A6FF;
    --accent-soft: #2A2152;
    --info-bg: linear-gradient(120deg, #251C4A, #16203A);
    --orb-bg: radial-gradient(circle at 50% 40%, #2A2152, #171327);

    --danger-bg: #3A1418;
    --danger-text: #FFB3B3;
    --danger-strong: #FF8A8A;
    --warn-bg: #3A2410;
    --warn-text: #FFB074;
    --warn-strong: #FFB074;
    --ok-bg: #0F3326;
    --ok-text: #6EE7B7;
    --neutral-bg: #221D3A;
    --neutral-text: #D8D3F0;

    --shadow-float: 0 12px 40px -12px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-card: 0 0 0 1px #2A2445;
    color-scheme: dark;
  }

/* Night glow at the top of every screen (over its own background colour), like the light theme's soft glow */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen { background-image: radial-gradient(120% 420px at 50% -120px, rgba(91, 66, 210, .55) 0%, transparent 100%); background-repeat: no-repeat; }
}
:root[data-theme="dark"] .screen { background-image: radial-gradient(120% 420px at 50% -120px, rgba(91, 66, 210, .55) 0%, transparent 100%); background-repeat: no-repeat; }