/* Steel Indigo — VoterConnect theme tokens (SPEC §14)
 * 12-token palette: Vidhan Steel base + Ballot Indigo primary.
 * All values are CSS custom properties so the high-contrast outdoor theme
 * can override them with one [data-theme="steel-indigo-outdoor"] rule.
 */

:root,
[data-theme="steel-indigo"] {
  /* Surfaces */
  --vc-bg-base:           #0D1117;
  --vc-bg-surface:        #161B22;
  --vc-bg-elevated:       #1E242E;
  --vc-bg-glass:          rgba(124, 77, 255, 0.08);
  --vc-bg-glass-strong:   rgba(124, 77, 255, 0.14);
  --vc-border:            #30363D;
  --vc-border-strong:     #4A5160;

  /* Brand */
  --vc-primary:           #7C4DFF;
  --vc-primary-deep:      #5532D9;
  --vc-primary-soft:      rgba(124, 77, 255, 0.18);
  --vc-accent:            #FF4D8F;
  --vc-accent-soft:       rgba(255, 77, 143, 0.18);
  --vc-secondary:         #FFD600;

  /* Semantics */
  --vc-success:           #3FB950;
  --vc-warning:           #FFB800;
  --vc-danger:            #F85149;
  --vc-info:              #2EA9FF;

  /* Type */
  --vc-text-high:         #F0F6FC;
  --vc-text-muted:        #8B949E;
  --vc-text-disabled:     #565F6B;

  /* Geometry */
  --vc-radius-sm:         6px;
  --vc-radius:            12px;
  --vc-radius-lg:         18px;
  --vc-radius-pill:       9999px;

  /* Shadow + blur */
  --vc-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.45);
  --vc-shadow:            0 8px 24px rgba(0, 0, 0, 0.45);
  --vc-shadow-lg:         0 16px 48px rgba(0, 0, 0, 0.55);
  --vc-blur:              blur(18px);

  /* Typography */
  --vc-font-sans:         "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --vc-font-display:      "Inter", "Geist", ui-sans-serif, system-ui;
  --vc-font-mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --vc-font-base-size:    16px;
  --vc-font-line:         1.5;

  /* Touch targets — 44px floor per WCAG / SPEC §17 G3 */
  --vc-tap:               44px;
  --vc-tap-lg:            56px;
}

/* Light theme — bright surfaces, dark text. Same brand hues so the
 * primary actions, accents, and shadows feel familiar. Picked because
 * the field persona (SPEC §4.7) sometimes hands the device to a more
 * traditional desktop user who expects a white background. */
[data-theme="light"] {
  /* Surfaces */
  --vc-bg-base:           #F6F8FB;
  --vc-bg-surface:        #FFFFFF;
  --vc-bg-elevated:       #F0F2F7;
  --vc-bg-glass:          rgba(124, 77, 255, 0.06);
  --vc-bg-glass-strong:   rgba(124, 77, 255, 0.10);
  --vc-border:            #DDE1E8;
  --vc-border-strong:     #C2C8D2;

  /* Brand — same family, slightly darker primary for AA contrast on white. */
  --vc-primary:           #5532D9;
  --vc-primary-deep:      #3F23A8;
  --vc-primary-soft:      rgba(85, 50, 217, 0.10);
  --vc-accent:            #E03C7E;
  --vc-accent-soft:       rgba(224, 60, 126, 0.10);
  --vc-secondary:         #D9B000;

  /* Semantics — darkened so they stay readable on white. */
  --vc-success:           #237B33;
  --vc-warning:           #B57C00;
  --vc-danger:            #C0392B;
  --vc-info:              #1D6FBE;

  /* Type */
  --vc-text-high:         #1A2027;
  --vc-text-muted:        #5A6472;
  --vc-text-disabled:     #98A1AE;

  /* Shadows — lighter so they don't punch through the white surface. */
  --vc-shadow-sm:         0 1px 2px rgba(15, 25, 45, 0.08);
  --vc-shadow:            0 6px 18px rgba(15, 25, 45, 0.10);
  --vc-shadow-lg:         0 12px 32px rgba(15, 25, 45, 0.14);
}

/* G4 — High-contrast outdoor theme (sunlight readability).
 * Same hue family, brighter accents, stronger text contrast. */
[data-theme="steel-indigo-outdoor"] {
  --vc-bg-base:           #000000;
  --vc-bg-surface:        #0E1218;
  --vc-bg-elevated:       #161D27;
  --vc-bg-glass:          rgba(255, 255, 255, 0.04);
  --vc-bg-glass-strong:   rgba(255, 255, 255, 0.08);
  --vc-border:            #4A5160;
  --vc-border-strong:     #6B7280;

  --vc-primary:           #B79CFF;
  --vc-primary-deep:      #8B5CFF;
  --vc-primary-soft:      rgba(183, 156, 255, 0.30);
  --vc-accent:            #FF7AB0;
  --vc-secondary:         #FFE547;

  --vc-success:           #66E07A;
  --vc-warning:           #FFCA47;
  --vc-danger:            #FF7A6F;
  --vc-info:              #66C8FF;

  --vc-text-high:         #FFFFFF;
  --vc-text-muted:        #C0C7D2;
  --vc-text-disabled:     #8B949E;
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  background: var(--vc-bg-base);
  color: var(--vc-text-high);
  font-family: var(--vc-font-sans);
  font-size: var(--vc-font-base-size);
  line-height: var(--vc-font-line);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
body { height: 100dvh; overflow: hidden; }

a {
  color: var(--vc-primary);
  text-decoration: none;
}
a:hover { color: var(--vc-accent); }

button { font-family: inherit; }

/* Scrollbars (WebKit) — keep them visible but tinted to the theme. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--vc-bg-surface); }
::-webkit-scrollbar-thumb { background: var(--vc-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--vc-primary-deep); }

/* Selection */
::selection {
  background: var(--vc-primary-soft);
  color: var(--vc-text-high);
}