/* VioVerify theme layer: dark-mode token remap + base resets.
   Light values come from the VioRCM design system tokens; this file only
   re-points those same token names for the dark theme and patches the two
   DS primitives (Input/Select/Switch) that hardcode light-only palette steps. */

html { scroll-behavior: smooth; color-scheme: light; }

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

  /* palette steps the DS components reference directly */
  --blue-700: #5B93F5;        /* primary-button hover steps lighter in dark */
  --slate-100: #1B2229;
  --slate-300: #3A434F;
  --slate-400: #78838F;

  --text-primary: #F3F6F9;
  --text-secondary: #A9B4C0;
  --text-tertiary: #78838F;
  --text-inverse: #F8FAFB;
  --text-link: #8AB6FC;
  --text-link-hover: #B9D4FE;

  --surface-page: #0E1216;
  --surface-card: #171D24;
  --surface-sunken: #12171D;
  --surface-inverse: #080B0E;
  --surface-overlay: rgba(0, 0, 0, 0.6);

  --border-subtle: #262E37;
  --border-default: #333D48;
  --border-strong: #4A5663;
  --border-focus: #5B93F5;

  /* brand fill stays dark enough for a white button label (4.5:1) while
     clearing 3:1 against both card and page surfaces */
  --color-brand: #3A72E0;
  --color-brand-strong: #8AB6FC;
  --color-brand-soft: #1A3874;
  --color-brand-subtle: #16305F;

  --color-accent: #8B7BE0;
  --color-accent-strong: #B9AEF0;
  --color-accent-soft: #2A2350;

  --status-success-fg: #6FCB9B; --status-success-bg: #12241B; --status-success-border: #1E4433;
  --status-warning-fg: #E0B366; --status-warning-bg: #241C10; --status-warning-border: #4A3A1B;
  --status-danger-fg: #F08A94; --status-danger-bg: #2A1417; --status-danger-border: #4E2229;
  --status-info-fg: #8AB6FC; --status-info-bg: #131E2E; --status-info-border: #1F3556;
  --status-neutral-fg: #A9B4C0; --status-neutral-bg: #1B2229; --status-neutral-border: #2A323C;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* DS Input/Select hardcode var(--white) as their field background; re-point
   them for the dark theme rather than rebuilding the components. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface-page);
  color: var(--text-primary);
  border-color: var(--border-default);
}

body {
  margin: 0;
  text-wrap: pretty;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

a { color: var(--text-link); }
a:hover { color: var(--text-link-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

summary::-webkit-details-marker { display: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }