/*
 * Registration design system — design tokens (SOUTHVILLE-1101 / FE1).
 *
 * Semantic CSS custom properties for the redesigned registration flow, scoped
 * to the `.new-design` wrapper. Because they are only defined on that subtree,
 * they never leak into the current registration pages.
 *
 * The two brand colours (--brand-primary, --brand-accent) default to the design
 * values here and are overridable PER COMPANY later (A4 / FE2) via an inline
 * custom property on the `.new-design` element, e.g.
 *   <div class="new-design" style="--brand-primary: #ffcc29">
 * — no change to this file required.
 *
 * Values are taken verbatim from the Lovable source export (index.css /
 * tailwind.config.ts) referenced on the ticket.
 */
.new-design {
  /* Brand colours — per-company overridable (default fallbacks) */
  --brand-primary: #ffcc00;       /* primary CTA button */
  --brand-primary-ink: #212121;   /* text/icon on the CTA button */
  --brand-accent: #d0060d;         /* eyebrow + trust badges */

  /* Surface & text palette */
  --bg: #f8f8f7;                 /* page background */
  --surface: #ffffff;            /* cards */
  --cream: #f3f0e7;              /* warm secondary surface (secondary buttons/panels) */
  --green: #2b5544;
  --text: #1a1a1a;
  --text-muted: #5e6e68;
  --border: #e2e2df;
  --danger: var(--brand-accent);   /* form validation / error state */

  /* Typography */
  --font-display: "Outfit", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* Spacing — 8px base scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;             /* buttons */
  --radius-lg: 12px;             /* cards */

  /* Elevation */
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 24px -4px rgba(0, 0, 0, 0.10);
}
/*
 * Registration design system — base layer (SOUTHVILLE-1101 / FE1).
 *
 * Minimal namespaced typography and box-sizing for the new design. Every rule is
 * scoped under `.new-design`, so the current registration pages (which do not
 * use that wrapper) render exactly as before. No global element resets, no
 * `!important`.
 */
.new-design {
  box-sizing: border-box;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

.new-design *,
.new-design *::before,
.new-design *::after {
  box-sizing: inherit;
}

.new-design h1,
.new-design h2,
.new-design h3,
.new-design h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

.new-design p {
  margin: 0 0 var(--space-2);
}

.new-design a {
  color: inherit;
}
/*
 * Registration design system — button component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable button classes for the new design, scoped under
 * `.new-design`. The old registration pages' button styles are untouched.
 *
 * Hover uses a brightness filter rather than a hardcoded darker shade, so it
 * works for any per-company brand colour set on --brand-primary.
 */
.new-design .nd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.new-design .nd-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.new-design .nd-button:disabled,
.new-design .nd-button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — brand CTA */
.new-design .nd-button--primary {
  background-color: var(--brand-primary);
  color: var(--brand-primary-ink);
}

.new-design .nd-button--primary:hover {
  filter: brightness(0.95);
}

/* Secondary — warm cream surface */
.new-design .nd-button--secondary {
  background-color: var(--cream);
  color: var(--text);
  border-color: var(--border);
}

.new-design .nd-button--secondary:hover {
  filter: brightness(0.97);
}
/*
 * Registration design system — card component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable card surface for the new design, scoped under
 * `.new-design`. Uses the large radius and the exact card shadow / hover shadow
 * from the design tokens.
 */
.new-design .nd-card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  transition: box-shadow 0.15s ease;
}

.new-design .nd-card:hover {
  box-shadow: var(--shadow-card-hover);
}
/*
 * Registration design system — form-field component (SOUTHVILLE-1101 / FE1).
 *
 * Namespaced, reusable form-field classes for the new design, scoped under
 * `.new-design`. BEM structure:
 *   .nd-field            wrapper (label + control + optional error)
 *   .nd-field__label     the field label
 *   .nd-field__control   the input / textarea / select (applied as a class)
 *   .nd-field__error     the validation message
 *   .nd-field--error     error-state modifier on the wrapper
 */
.new-design .nd-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.new-design .nd-field__label {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.new-design .nd-field__control {
  width: 100%;
  padding: 12px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.new-design .nd-field__control::placeholder {
  color: var(--text-muted);
}

.new-design .nd-field__control:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.new-design .nd-field__error {
  font-size: 0.8125rem;
  color: var(--danger);
}

/* Error state — the control border follows the per-company accent/danger colour. */
.new-design .nd-field--error .nd-field__control {
  border-color: var(--danger);
}
/*
 * Registration design system — header logo (SOUTHVILLE-1101 / FE1).
 *
 * Minimal namespaced treatment so the backend-driven company logo
 * (photo_image_tag @company, :logo) renders at a controlled, responsive size in
 * the new header. The full header composition lands with the pages (FE2).
 */
.new-design .nd-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}

.new-design .nd-header__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 160px;
}
/*
 * Registration design system (SOUTHVILLE-1101 / FE1).
 *
 * The additive, namespaced styling foundation for the redesigned registration
 * flow. Everything is scoped under the `.new-design` wrapper and every class is
 * `nd-` prefixed, so registration pages not yet flipped to the new design — and
 * every non-registration page — are unaffected.
 *
 * Consumed by later tickets (FE2–FE5) via:
 *   <%= stylesheet_link_tag "registration/design_system" %>
 *






 */