/*
 * SignalWire design tokens for the hosted forms.
 * Values come from the SignalWire design system (signalwire-tokens.dtcg.json).
 * Dark is the primary theme; light applies when the visitor's OS prefers it.
 * Tailwind utilities (bg-surface, text-muted, ...) map onto these variables
 * via /static/tailwind.config.js.
 */

:root {
  color-scheme: dark;

  --sw-blue: #044EF4;
  --sw-fuchsia: #F72A72;

  --bg-page: #0e0e18;
  --bg-surface: #181a28;
  --bg-surface-raised: #222436;

  --fg-default: #f0f0f4;
  --fg-secondary: #e8e8ec;
  --fg-muted: #a0a0aa;
  --fg-subtle: #73737e;
  --fg-headings: #f0f0f4;

  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.15);

  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, 0.25);

  --button-primary-bg: #044EF4;
  --button-primary-hover: #0342cf;
  --button-primary-active: #022da8;
  --button-secondary-hover: rgba(255, 255, 255, 0.06);

  --input-bg: #2a2a2e;
  --input-text: #ffffff;
  --input-placeholder: #73737e;
  --input-border: rgba(255, 255, 255, 0.15);
  --input-border-focus: #044EF4;
  --input-focus-ring: 0 0 0 3px rgba(4, 78, 244, 0.3);

  --link-default: #40E0D0;
  --link-hover: #F72A72;

  --status-error: #ef4444;
  --status-warning: #FFD700;

  --font-heading: 'Instrument Sans', sans-serif;
  --font-body: 'Lexend', sans-serif;

  --transition-fast: 0.15s ease;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg-page: #FAFBFC;
    --bg-surface: #F3F4F6;
    --bg-surface-raised: #E8EAF0;

    --fg-default: #1A1A18;
    --fg-secondary: #3A3A38;
    --fg-muted: #737371;
    --fg-subtle: #A8A8A6;
    --fg-headings: #070c2d;

    --border-default: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.18);

    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-glow-fuchsia: 0 0 20px rgba(247, 42, 114, 0.15);

    --button-secondary-hover: rgba(0, 0, 0, 0.04);

    --input-bg: #ffffff;
    --input-text: #1A1A18;
    --input-placeholder: #A8A8A6;
    --input-border: rgba(0, 0, 0, 0.18);
    --input-focus-ring: 0 0 0 3px rgba(4, 78, 244, 0.2);

    --link-default: #044EF4;

    --status-error: #dc2626;
    --status-warning: #a16207;
  }
}

body {
  background-color: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-body);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--fg-headings);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Form controls. The :is() wrapper keeps specificity above single Tailwind
   utilities so every field gets the same token styling. */
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--input-border);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea):focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--input-focus-ring);
}

::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--sw-blue);
}