/*
 * Design tokens for every lead-form surface (public pages and the builder).
 * The ONLY file allowed to hold color literals: lead_form.css and
 * form_builder.css must use these variables.
 *
 * Standard look: MAX messenger. Light by default, dark follows the system
 * theme. `:root, [data-form-style]` makes any element that carries
 * data-form-style (<html> on public pages, the live-preview container in the
 * builder) recompute every derived token from its own accent.
 */
:root,
[data-form-style] {
  color-scheme: light dark;

  --lead-font: -apple-system, BlinkMacSystemFont, "Roboto", system-ui,
    "Segoe UI", Helvetica, Arial, sans-serif;

  /* Radii */
  /* Pill (capsule) like the MAX "Open" buttons; fields, cards and answer cards keep their radii. */
  --lead-radius-button: 999px;
  --lead-radius-card: 16px;
  --lead-radius-input: 12px;
  --lead-radius-chip: 12px;

  /* Accent: the only group a style needs to override (see the marker below). */
  --lead-primary: #007aff;
  --lead-primary-hover: #479fff;
  --lead-primary-pressed: #006ee5;
  --lead-primary-text: #ffffff;
  /* Accent as text/link on a neutral surface (darker/lighter for contrast). */
  --lead-primary-dark: #007aff;
  --lead-focus-ring: #4f7fc0;
  --lead-selected-bg: #007aff14;
  --lead-selected-bg: color-mix(in srgb, var(--lead-primary) 8%, transparent);
  --lead-accent-soft: #007aff1f;
  --lead-accent-soft: color-mix(in srgb, var(--lead-primary) 12%, transparent);

  /* Neutrals: MAX standard, styles do not touch them. */
  --lead-bg: #edeef2;
  --lead-card: #ffffff;
  --lead-surface: #ffffff;
  --lead-surface-strong: #f5f7fa;
  --lead-text: #060708;
  --lead-text-secondary: rgba(6, 7, 8, 0.68);
  --lead-muted: var(--lead-text-secondary);
  /* Placeholders only: too faint for text people have to read. */
  --lead-text-tertiary: rgba(6, 7, 8, 0.52);
  --lead-border: rgba(12, 13, 14, 0.16);
  /* Edge of a field or an option the user taps: must stay visible for 50+. */
  --lead-input-border: rgba(12, 13, 14, 0.3);
  /* Grey fill is kept ONLY for disabled/readonly fields. */
  --lead-input-bg: rgba(9, 9, 9, 0.08);
  /* Editable fields sit on the surface (white / one step lighter than the card in dark); 3:1+ border on it and on the card. */
  --lead-field-bg: var(--lead-surface);
  --lead-field-border: rgba(12, 13, 14, 0.5);
  --lead-field-border-hover: rgba(12, 13, 14, 0.65);
  --lead-secondary-btn: #e9ebf1;
  --lead-secondary-btn-hover: #eeeff4;
  --lead-secondary-btn-pressed: #dfe3ea;

  /* Status */
  --lead-danger: #ff303c;
  --lead-danger-text: #d9232f;
  --lead-danger-soft: #ff303c1f;
  --lead-danger-soft: color-mix(in srgb, var(--lead-danger) 12%, transparent);
  --lead-danger-border: #ff303c66;
  --lead-danger-border: color-mix(in srgb, var(--lead-danger) 40%, transparent);
  --lead-focus-ring-danger: #ffb8b8;
  --lead-success: #1abe43;
  --lead-success-text: #0e7a2e;
  --lead-success-soft: #1abe431f;
  --lead-success-soft: color-mix(in srgb, var(--lead-success) 12%, transparent);
  --lead-success-border: #1abe4359;
  --lead-success-border: color-mix(in srgb, var(--lead-success) 35%, transparent);

  /* Elevation */
  --lead-shadow-card: 0 1px 3px rgba(6, 7, 8, 0.08);
  --lead-shadow-float: 0 4px 16px rgba(6, 7, 8, 0.14);

  /* <select> chevron, a token because an image cannot read currentColor. */
  --lead-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23060708' stroke-opacity='.68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root,
  [data-form-style] {
    --lead-primary-dark: #409cff;
    --lead-focus-ring: #709ada;
    --lead-selected-bg: #2c2d37;

    --lead-bg: #0f0f12;
    --lead-card: #17181c;
    --lead-surface: #25262d;
    --lead-surface-strong: #25262d;
    --lead-text: #ffffff;
    --lead-text-secondary: rgba(255, 255, 255, 0.8);
    --lead-text-tertiary: rgba(255, 255, 255, 0.64);
    --lead-border: rgba(255, 255, 255, 0.12);
    --lead-input-border: rgba(255, 255, 255, 0.28);
    --lead-input-bg: rgba(255, 255, 255, 0.09);
    --lead-field-border: rgba(255, 255, 255, 0.42);
    --lead-field-border-hover: rgba(255, 255, 255, 0.56);
    --lead-secondary-btn: #434455;
    --lead-secondary-btn-hover: #4d4e62;
    --lead-secondary-btn-pressed: #3c3e4c;

    --lead-danger: #ce4257;
    --lead-danger-text: #ff6b78;
    --lead-focus-ring-danger: #ba4c4c;
    --lead-success: #2bc644;
    --lead-success-text: #2bc644;

    --lead-shadow-card: none;
    --lead-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.5);

    --lead-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/*
 * Accent styles come after the dark block so equal specificity resolves in
 * their favour. The list of keys lives in web/features/lead_forms/form_styles.py;
 * a guard test fails when the two drift apart. A style overrides the accent
 * group and the surfaces; text, borders and status colors stay MAX standard.
 */
/* Accent styles. The light focus ring is the accent-text shade (3:1 or better on
 * every surface); the pale MAX ring colours vanish on white. Values are the MAX app themes; --lead-primary-dark is a shade
 * of the same hue that keeps link and label text at 4.5:1 or better. */
/* Летний лес */
[data-form-style="nature"] {
  --lead-primary: #2da334;
  --lead-primary-hover: #31cc3a;
  --lead-primary-pressed: #008c08;
  --lead-primary-dark: #237d28;
  --lead-focus-ring: #237d28;
  --lead-selected-bg: #2da3341a;
  --lead-bg: #f0f2f0;
  --lead-card: #ffffff;
  --lead-surface: #ffffff;
  --lead-surface-strong: #f5faf5;
  --lead-secondary-btn: #e9f1ea;
  --lead-secondary-btn-hover: #f2f7f2;
  --lead-secondary-btn-pressed: #dbe3dc;
}
/* Москва */
[data-form-style="moscow"] {
  --lead-primary: #d93636;
  --lead-primary-hover: #e84a4a;
  --lead-primary-pressed: #c20000;
  --lead-primary-dark: #ce2727;
  --lead-focus-ring: #ce2727;
  --lead-selected-bg: #d9363614;
  --lead-bg: #f2f0f0;
  --lead-card: #ffffff;
  --lead-surface: #ffffff;
  --lead-surface-strong: #faf8f7;
  --lead-secondary-btn: #f3ebeb;
  --lead-secondary-btn-hover: #f8f3f3;
  --lead-secondary-btn-pressed: #e4dddd;
}
/* Уверенная */
[data-form-style="feb23"] {
  --lead-primary: #148a8e;
  --lead-primary-hover: #4fafb2;
  --lead-primary-pressed: #117275;
  --lead-primary-dark: #11767a;
  --lead-focus-ring: #11767a;
  --lead-selected-bg: #148a8e14;
  --lead-bg: #edf2f2;
  --lead-card: #ffffff;
  --lead-surface: #ffffff;
  --lead-surface-strong: #f5f8f8;
  --lead-secondary-btn: #e9f0f1;
  --lead-secondary-btn-hover: #f2f6f7;
  --lead-secondary-btn-pressed: #dbe2e3;
}
/* Изящная */
[data-form-style="mar8"] {
  --lead-primary: #d0538f;
  --lead-primary-hover: #d0729f;
  --lead-primary-pressed: #c23a7b;
  --lead-primary-dark: #c03578;
  --lead-focus-ring: #c03578;
  --lead-selected-bg: #d0538f14;
  --lead-bg: #f2f0f2;
  --lead-card: #ffffff;
  --lead-surface: #ffffff;
  --lead-surface-strong: #f9f7f8;
  --lead-secondary-btn: #f4ecf0;
  --lead-secondary-btn-hover: #f8f4f6;
  --lead-secondary-btn-pressed: #e5dee2;
}

@media (prefers-color-scheme: dark) {
  /* Летний лес */
  [data-form-style="nature"] {
    --lead-primary: #2da334;
    --lead-primary-hover: #31cc3a;
    --lead-primary-pressed: #008c08;
    --lead-primary-dark: #32b53a;
    --lead-focus-ring: #9be59b;
    --lead-selected-bg: #2c372c;
    --lead-bg: #0f120f;
    --lead-card: #171c17;
    --lead-surface: #222925;
    --lead-surface-strong: #222925;
    --lead-secondary-btn: #414f44;
    --lead-secondary-btn-hover: #505d53;
    --lead-secondary-btn-pressed: #3c493f;
  }
  /* Москва */
  [data-form-style="moscow"] {
    --lead-primary: #a63a3a;
    --lead-primary-hover: #e85151;
    --lead-primary-pressed: #ba2d2d;
    --lead-primary-dark: #d07979;
    --lead-focus-ring: #da7070;
    --lead-selected-bg: #222937;
    --lead-bg: #06090f;
    --lead-card: #0b101a;
    --lead-surface: #111a29;
    --lead-surface-strong: #111a29;
    --lead-secondary-btn: #382e35;
    --lead-secondary-btn-hover: #483f45;
    --lead-secondary-btn-pressed: #342a31;
  }
  /* Уверенная */
  [data-form-style="feb23"] {
    --lead-primary: #2e86a3;
    --lead-primary-hover: #408294;
    --lead-primary-pressed: #1c6e8a;
    --lead-primary-dark: #44a9ca;
    --lead-focus-ring: #70c8da;
    --lead-selected-bg: #2c3537;
    --lead-bg: #141517;
    --lead-card: #121314;
    --lead-surface: #202225;
    --lead-surface-strong: #202225;
    --lead-secondary-btn: #3d4649;
    --lead-secondary-btn-hover: #4d5558;
    --lead-secondary-btn-pressed: #384043;
  }
  /* Изящная */
  [data-form-style="mar8"] {
    --lead-primary: #cd3782;
    --lead-primary-hover: #cd4c8c;
    --lead-primary-pressed: #bd2671;
    --lead-primary-dark: #dd78ab;
    --lead-focus-ring: #da70da;
    --lead-selected-bg: #372c37;
    --lead-bg: #171417;
    --lead-card: #141214;
    --lead-surface: #252025;
    --lead-surface-strong: #252025;
    --lead-secondary-btn: #4b3f47;
    --lead-secondary-btn-hover: #594e56;
    --lead-secondary-btn-pressed: #453a41;
  }
}