/* ASAMBLEAS Design System V3 — Executive Governance SaaS (dark premium) */
:root {
  /* Surfaces */
  --surface-base: #070b14;
  --surface-primary: #0b1220;
  --surface-secondary: #121a2b;
  --surface-elevated: #162033;
  --surface-overlay: rgba(8, 12, 22, 0.72);
  --surface-glass: color-mix(in srgb, #1a2740 78%, transparent);
  --surface-inverse: #e8eef8;
  --surface-inverse-soft: #c5d0e0;

  /* Text */
  --text-primary: #e8eef8;
  --text-secondary: #b6c2d6;
  --text-muted: #9aa8bd;
  --text-on-inverse: #0b1220;
  --text-on-brand: #061018;

  /* Borders */
  --border-subtle: rgba(148, 175, 210, 0.12);
  --border-default: rgba(148, 175, 210, 0.18);
  --border-strong: rgba(148, 175, 210, 0.34);
  --border-focus: #2dd4bf;

  /* Brand */
  --brand-navy-950: #070b14;
  --brand-navy-900: #0b1220;
  --brand-navy-800: #121a2b;
  --brand-navy-700: #1a2740;
  --brand-teal-900: #0f766e;
  --brand-teal-700: #14b8a6;
  --brand-teal-500: #2dd4bf;
  --brand-teal-300: #5eead4;
  --brand-teal-100: rgba(45, 212, 191, 0.14);
  --brand-gold-700: #b45309;
  --brand-gold-500: #d4a017;
  --brand-gold-300: #f0d78c;
  --brand-cyan: #22d3ee;

  /* Status */
  --status-success: #34d399;
  --status-success-bg: rgba(52, 211, 153, 0.14);
  --status-warning: #fbbf24;
  --status-warning-bg: rgba(251, 191, 36, 0.14);
  --status-danger: #f87171;
  --status-danger-bg: rgba(248, 113, 113, 0.14);
  --status-info: #38bdf8;
  --status-info-bg: rgba(56, 189, 248, 0.14);

  /* Assembly semantics */
  --assembly-live: #34d399;
  --assembly-quorum: #2dd4bf;
  --assembly-voting: #d4a017;
  --assembly-stage: #0b1220;

  --choice-favor: var(--status-success);
  --choice-against: var(--status-danger);
  --choice-abstain: var(--text-muted);

  /* Legacy aliases */
  --text: var(--text-primary);
  --surface: var(--surface-elevated);
  --bg: var(--surface-base);
  --accent: var(--brand-teal-500);
  --border: var(--border-default);
  --color-text: var(--text-primary);
  --color-muted: var(--text-muted);
  --color-accent: var(--brand-teal-500);
  --color-ink: var(--text-primary);
  --color-ink-soft: #c5d0e0;
  --color-slate: var(--text-secondary);
  --color-slate-muted: var(--text-muted);
  --color-surface: var(--surface-primary);
  --color-surface-elevated: var(--surface-elevated);
  --color-surface-muted: var(--surface-secondary);
  --color-teal-900: var(--brand-teal-900);
  --color-teal-700: var(--brand-teal-700);
  --color-teal-500: var(--brand-teal-500);
  --color-teal-300: var(--brand-teal-300);
  --color-teal-100: var(--brand-teal-100);
  --color-gold-700: var(--brand-gold-700);
  --color-gold-500: var(--brand-gold-500);
  --color-gold-300: var(--brand-gold-300);
  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-danger: var(--status-danger);
  --color-focus: var(--border-focus);
  --color-border: var(--border-default);
  --color-border-strong: var(--border-strong);

  /* Typography */
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-metric: "DM Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  --text-display: clamp(2.2rem, 3vw, 3.25rem);
  --text-h1: clamp(1.55rem, 2.2vw, 2.1rem);
  --text-h2: 1.25rem;
  --text-h3: 1.05rem;
  --text-section: 0.8rem;
  --text-body: 1rem;
  --text-body-sm: 0.9rem;
  --text-label: 0.72rem;
  --text-caption: 0.68rem;
  --text-metric: clamp(1.45rem, 2.2vw, 1.9rem);
  --text-metric-lg: clamp(2rem, 4vw, 3rem);
  --text-button: 0.95rem;

  --lh-tight: 1.15;
  --lh-body: 1.55;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* Radius / elevation */
  --radius-sm: 0.4rem;
  --radius-md: 0.65rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-soft: var(--shadow-md);
  --shadow-elevated: var(--shadow-lg);
  --shadow-focus: 0 0 0 3px rgba(45, 212, 191, 0.35);
  --glow-teal: 0 0 28px rgba(45, 212, 191, 0.22);
  --glow-gold: 0 0 28px rgba(212, 160, 23, 0.2);

  /* Controls / layout */
  --control-height: 2.85rem;
  --control-height-lg: 3.35rem;
  --content-max: 76rem;
  --content-narrow: 42rem;
  --sidebar-width: 22.5rem;
  --nav-width: 15.5rem;
  --header-height: 3.85rem;
  --mobile-action-h: 4.25rem;

  /* Motion */
  --motion-fast: 160ms;
  --motion-med: 280ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --bp-sm: 390px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1366px;

  --z-sticky: 200;
  --z-drawer: 1100;
  --z-banner: 1300;
  --z-dialog: 1400;
  --z-reconnect: 1500;
  /* Toasts must sit above dialogs / drawers / voting sheet chrome */
  --z-toast: 13050;
  --touch-min: 2.75rem; /* 44px */

  --bg-atmosphere:
    radial-gradient(1100px 700px at 8% -8%, rgba(45, 212, 191, 0.14), transparent 55%),
    radial-gradient(900px 560px at 92% 0%, rgba(212, 160, 23, 0.1), transparent 50%),
    radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, 0.06), transparent 45%),
    linear-gradient(165deg, #070b14 0%, #0b1220 42%, #101828 100%);

  --connection-banner-bg: rgba(7, 11, 20, 0.92);
  --asset-version: px1;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-med: 0ms;
  }
}