/**
 * Formhandler — global design system
 *
 * Structure:
 *  1. Primitives — raw values (colors, spacing scale, type scale)
 *  2. Semantic — shared roles (border-input, surface-subtle, positive, …)
 *  3. Component — tokens used by specific primitives (alias primitives/semantic)
 *
 * Spacing uses a 4px base where possible. Values marked "Figma exact" are kept
 * as authored in Figma even when not on the 4px grid.
 */

/* Component display rules (flex, grid, …) must not cancel HTML hidden. */
[hidden] {
  display: none !important;
}

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     PRIMITIVES — COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-color-black: #000000;
  --fh-color-white: #ffffff;
  --fh-color-grey-500: #757575;
  --fh-color-grey-400: #999999;
  --fh-color-grey-300: #9ca3af;
  --fh-color-grey-200: #d9d9d9;
  --fh-color-grey-100: #f5f5f7;
  --fh-color-grey-50: #f9fafb;
  --fh-color-brand: #ff4800;
  --fh-color-brand-hover: #e04000;
  --fh-color-focus: #2563eb;
  --fh-color-error: #dc2626;
  --fh-color-error-bg: #fef2f2;
  --fh-color-warning-bg: #fff1c2;
  --fh-color-warning-border: #522504;
  --fh-color-danger-bg: #fdd3d0;
  --fh-color-danger-border: #900b09;
  --fh-color-positive-bg: #cff7d3;
  --fh-color-positive-border: #02542d;

  /* ═══════════════════════════════════════════════════════════════════════════
     PRIMITIVES — SPACING (4px base)
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-space-1: 0.25rem; /* 4px */
  --fh-space-2: 0.5rem; /* 8px */
  --fh-space-3: 0.75rem; /* 12px */
  --fh-space-4: 1rem; /* 16px */
  --fh-space-5: 1.25rem; /* 20px */
  --fh-space-6: 1.5rem; /* 24px */
  --fh-space-8: 2rem; /* 32px */

  /* Legacy spacing aliases (prefer --fh-space-* in new tokens) */
  --fh-space-xs: var(--fh-space-1);
  --fh-space-sm: var(--fh-space-2);
  --fh-space-md: var(--fh-space-3);
  --fh-space-lg: var(--fh-space-4);
  --fh-space-xl: var(--fh-space-6);

  /* ═══════════════════════════════════════════════════════════════════════════
     PRIMITIVES — TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fh-font-size-xs: 0.625rem; /* 10px */
  --fh-font-size-sm: 0.875rem; /* 14px */
  --fh-font-size-md: 1rem; /* 16px */
  --fh-font-size-lg: 1.125rem; /* 18px */
  --fh-font-size-xl: 1.5rem; /* 24px */
  --fh-font-size-2xl: 3rem; /* 48px */
  --fh-font-weight-light: 300;
  --fh-font-weight-regular: 400;
  --fh-font-weight-medium: 500;
  --fh-font-weight-semibold: 600;
  --fh-font-weight-bold: 700;
  --fh-line-height-tight: 1;
  --fh-line-height-body: 1.25;
  --fh-line-height-relaxed: 1.5;

  /* ═══════════════════════════════════════════════════════════════════════════
     PRIMITIVES — BORDERS & RADII
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-border-width: 1px;
  --fh-border-width-hairline: 0.5px; /* Figma exact */
  --fh-radius-none: 0;
  --fh-radius-sm: 0.25rem; /* 4px */
  --fh-radius-md: 0.375rem; /* 6px */

  /* ═══════════════════════════════════════════════════════════════════════════
     PRIMITIVES — EFFECTS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-focus-ring-width: 2px;
  --fh-focus-ring-offset: 2px;
  --fh-transition-fast: 150ms ease;
  --fh-shadow-picker: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* ═══════════════════════════════════════════════════════════════════════════
     SEMANTIC — SHARED ROLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-color-text: var(--fh-color-black);
  --fh-color-text-muted: var(--fh-color-grey-500);
  --fh-color-text-placeholder: var(--fh-color-grey-300);
  --fh-color-text-placeholder-subtle: var(--fh-color-grey-400);
  --fh-color-surface: var(--fh-color-white);
  --fh-color-surface-muted: var(--fh-color-grey-50);
  --fh-color-surface-subtle: var(--fh-color-grey-100);
  --fh-color-border-input: var(--fh-color-grey-200);
  --fh-color-border-focus: var(--fh-color-focus);
  --fh-color-required: var(--fh-color-brand);
  --fh-color-link: var(--fh-color-brand);
  --fh-color-link-hover: var(--fh-color-brand-hover);
  --fh-color-positive-text: var(--fh-color-positive-border);

  /* Shared vertical gap inside field stacks (label → control → hint) */
  --fh-gap-field: var(--fh-space-3);
  /* Vertical gap between field blocks in composed forms */
  --fh-gap-form-fields: var(--fh-space-6);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — FORM FIELDS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-font-size-label: var(--fh-font-size-md);
  --fh-font-size-input: var(--fh-font-size-md);
  --fh-font-size-hint: var(--fh-font-size-xs);
  --fh-font-weight-label: var(--fh-font-weight-semibold);
  --fh-font-weight-input: var(--fh-font-weight-regular);
  --fh-font-weight-hint: var(--fh-font-weight-light);
  --fh-font-weight-hint-strong: var(--fh-font-weight-regular);
  --fh-line-height-label: var(--fh-line-height-tight);
  --fh-line-height-hint: var(--fh-line-height-tight);
  --fh-line-height-input: var(--fh-line-height-relaxed);
  --fh-input-height: 2.6875rem; /* 43px — Figma exact */
  --fh-input-padding-x: var(--fh-space-3);
  --fh-radius-input: var(--fh-radius-none);
  --fh-control-height: var(--fh-input-height);
  --fh-control-padding-x: var(--fh-input-padding-x);
  --fh-control-padding-y: 0.625rem; /* 10px — legacy control token */

  /* Textarea */
  --fh-textarea-min-height: 8rem; /* 128px */
  --fh-textarea-padding-x: var(--fh-space-3);
  --fh-textarea-padding-y: var(--fh-space-4);
  --fh-font-size-textarea: var(--fh-font-size-sm);
  --fh-font-weight-textarea: var(--fh-font-weight-regular);
  --fh-line-height-textarea: 1.15; /* Figma exact */

  /* Date picker */
  --fh-font-size-date-display: var(--fh-font-size-sm);
  --fh-font-weight-date-display: var(--fh-font-weight-regular);
  --fh-date-trigger-padding-x: var(--fh-space-3);
  --fh-date-trigger-padding-y: var(--fh-space-1); /* 2px — Figma exact */
  --fh-date-icon-size: var(--fh-space-5);

  /* Language selector */
  --fh-color-border-language: var(--fh-color-border-input); /* default closed — Figma #d9d9d9 */
  --fh-color-border-language-active: var(--fh-color-black); /* open + chosen */
  --fh-font-size-language: var(--fh-font-size-md);
  --fh-font-weight-language: var(--fh-font-weight-semibold);
  --fh-font-weight-language-option: var(--fh-font-weight-regular);
  --fh-language-width: 9.125rem; /* 146px — Figma exact */
  --fh-language-trigger-padding-x: var(--fh-space-3);
  --fh-language-trigger-padding-y: var(--fh-space-1); /* 2px — Figma exact */
  --fh-language-chevron-width: 0.9375rem; /* 15px */
  --fh-language-chevron-height: 0.46875rem; /* 7.5px */
  --fh-language-list-padding: var(--fh-space-3);
  --fh-language-list-gap: var(--fh-space-4);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — TYPOGRAPHY BLOCKS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-font-size-form-title: var(--fh-font-size-2xl);
  --fh-font-weight-form-title: var(--fh-font-weight-bold);
  --fh-line-height-form-title: normal;
  --fh-letter-spacing-form-title: -0.06rem; /* -0.96px — Figma exact */
  --fh-font-size-form-lead: var(--fh-font-size-lg);
  --fh-font-weight-form-lead: var(--fh-font-weight-light);
  --fh-line-height-form-lead: var(--fh-line-height-body);
  --fh-gap-form-header: var(--fh-space-1);

  --fh-font-size-section-heading: var(--fh-font-size-xl);
  --fh-font-weight-section-heading: var(--fh-font-weight-semibold);
  --fh-line-height-section-heading: var(--fh-line-height-tight);
  --fh-padding-section-heading-y: var(--fh-space-4);

  --fh-font-size-eyebrow: var(--fh-font-size-xs);
  --fh-font-weight-eyebrow: var(--fh-font-weight-regular);
  --fh-font-weight-eyebrow-emphasis: var(--fh-font-weight-semibold);
  --fh-line-height-eyebrow: var(--fh-line-height-tight);
  --fh-color-eyebrow-text: var(--fh-color-text-muted);

  --fh-gap-thank-you: var(--fh-space-8);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — CHECKBOX
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-color-checkbox-bg: var(--fh-color-surface-subtle);
  --fh-color-checkbox-border: var(--fh-color-border-input);
  --fh-color-checkbox-indicator: var(--fh-color-brand);
  --fh-checkbox-size: var(--fh-space-5);
  --fh-checkbox-indicator-size: var(--fh-font-size-sm);
  --fh-checkbox-gap: var(--fh-gap-field);
  --fh-font-size-checkbox-label: var(--fh-font-size-label);
  --fh-font-weight-checkbox-label: var(--fh-font-weight-regular);
  --fh-line-height-checkbox-label: normal;

  --fh-font-size-checkbox-group-title: var(--fh-font-size-label);
  --fh-font-weight-checkbox-group-title: var(--fh-font-weight-label);
  --fh-line-height-checkbox-group-title: var(--fh-line-height-tight);
  --fh-gap-checkbox-group-rows: var(--fh-space-4);
  --fh-gap-checkbox-group-columns: var(--fh-space-4);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — RADIO
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-radio-gap: var(--fh-space-2);
  --fh-radio-inner-gap: var(--fh-space-2);
  --fh-radio-padding-x: var(--fh-timeslot-padding-x);
  --fh-radio-padding-y: var(--fh-timeslot-padding-y);
  --fh-radio-radius: var(--fh-timeslot-radius);
  --fh-radio-font-size: var(--fh-font-size-timeslot);
  --fh-radio-font-weight: var(--fh-font-weight-timeslot);
  --fh-radio-indicator-size: var(--fh-space-4);
  --fh-radio-dot-size: 0.5rem; /* 8px */

  --fh-color-radio-bg: var(--fh-color-surface);
  --fh-color-radio-border: var(--fh-color-border-input);
  --fh-color-radio-text: var(--fh-color-text);
  --fh-color-radio-bg-selected: #fff1ea; /* light brand tint */
  --fh-color-radio-border-selected: var(--fh-color-brand);
  --fh-color-radio-text-selected: var(--fh-color-text);
  --fh-color-radio-indicator-border: var(--fh-color-border-input);
  --fh-color-radio-indicator-border-selected: var(--fh-color-brand);
  --fh-color-radio-dot: var(--fh-color-brand);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — TIME SLOTS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-font-size-timeslot: var(--fh-font-size-sm);
  --fh-font-weight-timeslot: var(--fh-font-weight-regular);
  --fh-color-timeslot-bg: var(--fh-color-surface);
  --fh-color-timeslot-border: var(--fh-color-border-input);
  --fh-color-timeslot-text: var(--fh-color-text);
  --fh-color-timeslot-bg-selected: var(--fh-color-positive-bg);
  --fh-color-timeslot-border-selected: var(--fh-color-positive-border);
  --fh-color-timeslot-text-selected: var(--fh-color-positive-text);
  --fh-timeslot-padding-x: 0.8125rem; /* 13px — Figma exact */
  --fh-timeslot-padding-y: 0.6875rem; /* 11px — Figma exact */
  --fh-timeslot-radius: var(--fh-radius-md);
  --fh-timeslot-gap: var(--fh-space-2);
  --fh-timeslot-grid-max-width: 27.75rem; /* 444px — Figma exact */

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — INFO MESSAGES
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-info-padding: var(--fh-space-2);
  --fh-info-radius: var(--fh-radius-sm);
  --fh-font-size-info: var(--fh-font-size-xs);
  --fh-font-weight-info: var(--fh-font-weight-medium);
  --fh-line-height-info: var(--fh-line-height-tight);
  --fh-gap-info-messages: var(--fh-space-4);
  --fh-color-info-warning-bg: var(--fh-color-warning-bg);
  --fh-color-info-warning-border: var(--fh-color-warning-border);
  --fh-color-info-warning-text: var(--fh-color-warning-border);
  --fh-color-info-error-bg: var(--fh-color-danger-bg);
  --fh-color-info-error-border: var(--fh-color-danger-border);
  --fh-color-info-error-text: var(--fh-color-danger-border);
  --fh-color-info-success-bg: var(--fh-color-positive-bg);
  --fh-color-info-success-border: var(--fh-color-positive-border);
  --fh-color-info-success-text: var(--fh-color-positive-text);

  /* ═══════════════════════════════════════════════════════════════════════════
     COMPONENT — BUTTONS
     ═══════════════════════════════════════════════════════════════════════════ */
  --fh-color-button-primary-bg: var(--fh-color-brand);
  --fh-color-button-primary-bg-hover: var(--fh-color-brand-hover);
  --fh-color-button-primary-text: var(--fh-color-white);
  --fh-color-button-muted-bg: var(--fh-color-surface-subtle);
  --fh-color-button-muted-bg-hover: #ebebed; /* between grey-100/200 */
  --fh-color-button-muted-text: var(--fh-color-text-muted);
  --fh-button-padding-x: var(--fh-space-8);
  --fh-button-padding-y: 1.125rem; /* 18px — Figma exact */
  --fh-font-size-button: var(--fh-font-size-lg);
  --fh-font-weight-button-primary: var(--fh-font-weight-semibold);
  --fh-font-weight-button-muted: var(--fh-font-weight-light);
  --fh-line-height-button: var(--fh-line-height-tight);
  --fh-radius-button: var(--fh-radius-none);
  --fh-gap-button-group: var(--fh-gap-field);

  /* Legacy aliases — use semantic names in new code */
  --fh-color-text-placeholder-date: var(--fh-color-text-placeholder-subtle);
  --fh-radius-control: var(--fh-radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED LAYOUT — FIELD STACK
   ═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fh-font-family);
  font-size: var(--fh-font-size-input);
  line-height: var(--fh-line-height-input);
  color: var(--fh-color-text);
  background: var(--fh-color-surface);
}

.fh-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fh-gap-field);
  width: 100%;
}

.fh-field__label {
  font-family: var(--fh-font-family);
  font-size: var(--fh-font-size-label);
  font-weight: var(--fh-font-weight-label);
  line-height: var(--fh-line-height-label);
  color: var(--fh-color-text);
  word-break: break-word;
}

.fh-field__required {
  color: var(--fh-color-required);
}

.fh-field__hint {
  margin: 0;
  font-family: var(--fh-font-family);
  font-size: var(--fh-font-size-hint);
  font-weight: var(--fh-font-weight-hint);
  line-height: var(--fh-line-height-hint);
  color: var(--fh-color-text-muted);
  word-break: break-word;
}

.fh-field__hint-strong {
  font-weight: var(--fh-font-weight-hint-strong);
}

.fh-field__error {
  font-size: var(--fh-font-size-hint);
  color: var(--fh-color-error);
}

.fh-field--error .fh-input,
.fh-field--error .fh-select,
.fh-field--error .fh-textarea {
  border-color: var(--fh-color-error);
  background-color: var(--fh-color-error-bg);
}