/* ===== DESIGN TOKENS — single source of truth ===== */
/* Layout (theme-independent) */
:root {
  --font-mono: 'Courier New', monospace;
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
  --shadow-overlay: 0 8px 32px rgba(0,0,0,.55);
  /* Core color palette (theme-independent base hues) */
  --color-info: #3498db;
  --color-success: #00bc8c;
  --color-warning: #f39c12;
  --color-danger: #e74c3c;
  --brand-whatsapp: #25d366;
  --brand-facebook: #1877f2;
  --brand-discord: #5865f2;
  --brand-telegram: #229ed9;
  --brand-signal: #3a76f0;
  --color-gray-600: #888;
  --color-gray-700: #444;
  --color-gray-800: #303030;
  --color-gray-900: #222;
  --modal-backdrop-bg: #000;
  /* Component tokens */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-card: .65rem;
  --radius-lg: 0.875rem;
  --popover-max-width: 300px;
  --popover-body-padding-x: 1rem;
  --popover-body-padding-y: 1rem;
  --sidebar-width: 240px;
  --topbar-height: 60px;
  --sidebar-collapsed-width: 52px;
  --radius-btn: .45rem;
  --radius-badge: 2rem;
  --transition-fast: .15s;
  --transition-med: .2s;
  --transition-slow: .25s;
  /* Semantic status colors — universal across themes (traffic-light convention) */
  --status-online-color: #22c55e;
  --status-online-glow: rgba(34, 197, 94, .55);
  --badge-rejected-glow: rgba(239, 68, 68, .55);
  --status-dormant-color: #f39c12;
  --status-warning-color: #f39c12;
  --status-warning-bg: rgba(243, 156, 18, .08);
  --status-warning-border: rgba(243, 156, 18, .25);
  /* Layout limits */
  --app-max-width: 1200px;
  --table-stripe-bg: color-mix(in srgb, var(--bg-card) 93%, #3b82f6 7%);
  /* Featured-image tile overlay — darkens in dark theme, lightens in light theme */
  --featured-img-overlay: color-mix(in srgb, var(--bg-card) 75%, transparent);
  /* Text on solid accent / inverse surfaces */
  --text-on-accent: #111;
  --text-inverse: #fff;
  /* Avatar / citizen palette (stable across themes) */
  --citizen-color-0: #0d6efd;
  --citizen-color-1: #6610f2;
  --citizen-color-2: #6f42c1;
  --citizen-color-3: #d63384;
  --citizen-color-4: #dc3545;
  --citizen-color-5: #fd7e14;
  --citizen-color-6: #198754;
  --citizen-color-7: #20c997;
  --citizen-color-8: #0dcaf0;
  --citizen-color-9: #0077b6;
  --citizen-color-10: #7b2d8b;
  --citizen-color-11: #c77dff;
  /* Diff / history helpers */
  --history-badge-bg: #375a7f;
  --history-badge-color: var(--text-inverse);
  --bg-code: var(--color-surface-offset);
  --diff-ins-bg: var(--badge-approved-bg);
  --diff-ins-color: var(--badge-approved-color);
  --diff-del-bg: var(--badge-rejected-bg);
  --diff-del-color: var(--badge-rejected-color);
}
/* Dark theme (default) */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-base: #161b2e;
  --bg-sidebar: #1c2035;
  --bg-card: #1e2340;
  --accent: #00d1b2;
  --accent-hover: #00b09b;
  --accent-muted: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --accent-glow-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-glow-medium: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-glow-faint: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --text-primary: #e8eaf0;
  --text-muted: rgb(232, 234, 240);
  --border: rgba(255, 255, 255, .08);
  --btn-glass-bg: rgba(255, 255, 255, .06);
  --btn-glass-border: rgba(255, 255, 255, .12);
  --color-surface-offset: rgba(255, 255, 255, .04);
  --color-surface-dynamic: rgba(255, 255, 255, .07);
  --btn-glass-color: rgba(255, 255, 255, .65);
  --btn-glass-hover-bg: rgba(255, 255, 255, .11);
  --btn-glass-hover-border: rgba(255, 255, 255, .2);
  --btn-glass-hover-color: rgba(255, 255, 255, .9);
  --badge-proposition-bg: rgba(59, 130, 246, .15);
  --badge-proposition-color: #60a5fa;
  --badge-proposition-border: rgba(59, 130, 246, .3);
  --badge-discussion-bg: rgba(168, 85, 247, .15);
  --badge-discussion-color: #c084fc;
  --badge-referendum-bg: rgba(249, 115, 22, .15);
  --badge-referendum-color: #fb923c;
  --badge-approved-bg: rgba(0, 188, 140, .15);
  --badge-approved-color: #00bc8c;
  --badge-approved-border: rgba(0, 188, 140, .25);
  --badge-rejected-bg: rgba(239, 68, 68, .15);
  --badge-rejected-color: #f87171;
  --badge-rejected-border: rgba(239, 68, 68, .3);
  --btn-danger-bg: color-mix(in srgb, var(--badge-rejected-color) 85%, transparent);
  --btn-success-bg: color-mix(in srgb, var(--badge-approved-color) 85%, transparent);
  --btn-warning-bg: color-mix(in srgb, var(--status-warning-color) 85%, transparent);
  /* Alert & badge tokens — dark theme uses solid, light theme uses subtle pastels */
  --alert-info-bg: #3498db;
  --alert-info-color: #fff;
  --alert-info-border: var(--border);
  --alert-success-bg: #00bc8c;
  --alert-success-color: #fff;
  --alert-success-border: var(--border);
  --alert-warning-bg: #f39c12;
  --alert-warning-color: #fff;
  --alert-warning-border: var(--border);
  --alert-danger-bg: #e74c3c;
  --alert-danger-color: #fff;
  --alert-danger-border: var(--border);
  --badge-danger-text: var(--text-inverse);
  --badge-warning-text: var(--text-inverse);
  --badge-success-text: var(--text-inverse);
  --badge-info-text: var(--text-inverse);
  --badge-primary-text: var(--text-inverse);
  --btn-danger-color: var(--text-on-accent);
  --btn-success-color: var(--text-on-accent);
  --btn-outline-primary-border: var(--accent-border);
  --btn-outline-primary-hover-shadow: 0 0 8px var(--accent-glow);
  --btn-outline-secondary-hover-bg: var(--btn-glass-hover-bg);
  --btn-outline-secondary-hover-border: var(--btn-glass-hover-border);
  --input-bg: #252d4a;
  --input-border: rgba(255, 255, 255, .25);
  /* Project color tokens */
  --color-primary: var(--accent);
  --color-secondary: var(--color-gray-700);
  --color-light: #adb5bd;
  --color-dark: var(--color-gray-800);
  --bg-tertiary: #252d4a;
  --surface: var(--bg-card);
  --surface-elevated: #252d4a;
  --progress-bg: var(--color-gray-700);
  /* Table tokens */
  --table-bg: transparent;
  --table-color: var(--text-primary);
  --table-border-color: var(--border);
  --table-striped-bg: rgba(255, 255, 255, .02);
  --table-striped-color: var(--text-primary);
  --table-hover-bg: var(--accent-muted);
  --table-hover-color: var(--text-primary);
  --table-accent-bg: transparent;
  /* Popover tokens */
  --popover-bg: var(--bg-card);
  --popover-border-color: var(--border);
  --popover-header-bg: var(--bg-card);
  --popover-header-color: var(--text-primary);
  --popover-body-color: var(--text-primary);
  /* Generic badge tokens — subtle pastels (dark: ~.15 alpha bg) */
  --badge-primary-bg: var(--accent-muted);
  --badge-primary-color: var(--accent);
  --badge-primary-border: var(--accent-border);
  --badge-secondary-bg: rgba(173, 181, 189, .15);
  --badge-secondary-color: var(--color-light);
  --badge-secondary-border: rgba(173, 181, 189, .3);
  --badge-info-bg: rgba(52, 152, 219, .15);
  --badge-info-color: var(--color-info);
  --badge-info-border: rgba(52, 152, 219, .3);
  --badge-success-bg: var(--badge-approved-bg);
  --badge-success-color: var(--badge-approved-color);
  --badge-success-border: var(--badge-approved-border);
  --badge-warning-bg: var(--status-warning-bg);
  --badge-warning-color: var(--status-warning-color);
  --badge-warning-border: var(--status-warning-border);
  --badge-danger-bg: var(--badge-rejected-bg);
  --badge-danger-color: var(--badge-rejected-color);
  --badge-danger-border: var(--badge-rejected-border);
  --badge-dark-bg: var(--color-surface-dynamic);
  --badge-dark-color: var(--text-primary);
  --badge-dark-border: var(--border);
  /* Generic alert tokens (dark theme: solid) */
  --alert-primary-bg: var(--accent);
  --alert-primary-color: var(--text-on-accent);
  --alert-primary-border: var(--accent-border);
  --alert-secondary-bg: var(--color-secondary);
  --alert-secondary-color: var(--text-inverse);
  --alert-secondary-border: var(--border);
  --alert-dark-bg: var(--color-dark);
  --alert-dark-color: var(--text-inverse);
  --alert-dark-border: var(--border);
  /* Featured images are darkened in dark theme, brightened in light theme */
  --featured-img-brightness: 0.6;
}
/* Light theme */
[data-theme="light"] {
  color-scheme: light;
  --bg-base: #f0f2f5;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --accent: #059984;
  --accent-hover: #047a6a;
  --accent-muted: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-glow-soft: color-mix(in srgb, var(--accent) 20%, transparent);
  --accent-glow-medium: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-glow-faint: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --text-primary: #1e2030;
  --text-muted: rgba(0, 0, 0, .55);
  --border: rgba(0, 0, 0, .1);
  --btn-glass-bg: rgba(0, 0, 0, .04);
  --btn-glass-border: rgba(0, 0, 0, .14);
  --color-surface-offset: rgba(0, 0, 0, .04);
  --color-surface-dynamic: rgba(0, 0, 0, .07);
  --btn-glass-color: rgba(0, 0, 0, .6);
  --btn-glass-hover-bg: rgba(0, 0, 0, .08);
  --btn-glass-hover-border: rgba(0, 0, 0, .22);
  --btn-glass-hover-color: rgba(0, 0, 0, .85);
  --badge-proposition-bg: rgba(59, 130, 246, .12);
  --badge-proposition-color: #2563eb;
  --badge-proposition-border: rgba(37, 99, 235, .3);
  --badge-discussion-bg: rgba(168, 85, 247, .12);
  --badge-discussion-color: #7c3aed;
  --badge-referendum-bg: rgba(249, 115, 22, .12);
  --badge-referendum-color: #ea580c;
  --badge-approved-bg: rgba(0, 188, 140, .12);
  --badge-approved-color: #047a6a;
  --badge-approved-border: rgba(4, 122, 106, .25);
  --badge-rejected-bg: rgba(239, 68, 68, .12);
  --badge-rejected-color: #dc2626;
  --badge-rejected-border: rgba(220, 38, 38, .3);
  --btn-danger-bg: color-mix(in srgb, var(--badge-rejected-color) 85%, transparent);
  --btn-success-bg: color-mix(in srgb, var(--badge-approved-color) 85%, transparent);
  --btn-warning-bg: color-mix(in srgb, var(--status-warning-color) 85%, transparent);
  /* Alert & badge tokens — light theme uses subtle pastels */
  --alert-info-bg: rgba(52, 152, 219, .07);
  --alert-info-color: #1a6e9e;
  --alert-info-border: rgba(52, 152, 219, .2);
  --alert-success-bg: rgba(0, 153, 132, .07);
  --alert-success-color: #065f50;
  --alert-success-border: rgba(0, 153, 132, .2);
  --alert-warning-bg: rgba(243, 156, 18, .07);
  --alert-warning-color: #8a5d00;
  --alert-warning-border: rgba(243, 156, 18, .2);
  --alert-danger-bg: rgba(239, 68, 68, .07);
  --alert-danger-color: #991b1b;
  --alert-danger-border: rgba(239, 68, 68, .2);
  --badge-danger-text: #991b1b;
  --badge-warning-text: #78420a;
  --badge-success-text: #065f50;
  --badge-info-text: #1a5c8a;
  --badge-primary-text: #1d4ed8;
  --btn-danger-color: var(--text-inverse);
  --btn-success-color: var(--text-inverse);
  --btn-outline-primary-border: var(--accent);
  --btn-outline-primary-hover-shadow: none;
  --btn-outline-secondary-hover-bg: rgba(0, 0, 0, .06);
  --btn-outline-secondary-hover-border: rgba(0, 0, 0, .2);
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, .18);
  /* Project color tokens (light theme) */
  --color-primary: var(--accent);
  --color-secondary: #6c757d;
  --color-light: #f8f9fa;
  --color-dark: #212529;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  --bg-tertiary: #f8f9fa;
  --surface: #f8f9fa;
  --surface-elevated: #ffffff;
  --progress-bg: #e9ecef;
  /* Table tokens */
  --table-striped-bg: rgba(0, 0, 0, .025);
  --table-hover-bg: rgba(0, 153, 132, .05);
  /* Generic badge tokens — subtle pastels (light: ~.12 alpha bg) */
  --badge-primary-bg: var(--accent-muted);
  --badge-primary-color: var(--accent);
  --badge-primary-border: var(--accent-border);
  --badge-secondary-bg: rgba(108, 117, 125, .12);
  --badge-secondary-color: #495057;
  --badge-secondary-border: rgba(108, 117, 125, .3);
  --badge-info-bg: rgba(52, 152, 219, .12);
  --badge-info-color: #1a6e9e;
  --badge-info-border: rgba(52, 152, 219, .3);
  --badge-dark-bg: rgba(0, 0, 0, .08);
  --badge-dark-color: #212529;
  --badge-dark-border: rgba(0, 0, 0, .2);
  /* Generic alert tokens (light theme: subtle pastels) */
  --alert-primary-bg: rgba(5, 153, 132, .07);
  --alert-primary-color: #047a6a;
  --alert-primary-border: rgba(5, 153, 132, .2);
  --alert-secondary-bg: rgba(108, 117, 125, .07);
  --alert-secondary-color: #495057;
  --alert-secondary-border: rgba(108, 117, 125, .2);
  --alert-dark-bg: rgba(33, 37, 41, .07);
  --alert-dark-color: #212529;
  --alert-dark-border: rgba(33, 37, 41, .2);
  --featured-img-brightness: 1.3;
}