/* ============================================================================
   SAFE START : FOUNDATION FOR THE APPLY FLOW
   ----------------------------------------------------------------------------
   The landing page keeps its own system in styles.css (--px, --t-*, --btn-h).
   The shared onboarding structure reads a different set of names (Topper's
   and Edge's foundation roles), so this file defines them from Safe Start's
   values. Only apply/index.html loads it, after styles.css.

   The unit: one --u, 16px at the design size, following whichever of width
   or height runs out first. onboarding.css caps it at 17px on wide screens so
   the form doesn't grow on big monitors; phones use their own below.
   ========================================================================== */

:root {
  --u: clamp(11px, min(100vw / 90, 100vh / 50), 24px);
  --p: max(1px, calc(var(--u) / 16));

  /* type roles (the flow's own scale lives in --ob-type-*) */
  --type-heading: max(21px, calc(var(--u) * 1.625));
  --type-lead:    max(18px, calc(var(--u) * 1.3125));
  --type-body:    max(17px, calc(var(--u) * 1.0625));   /* 17: a notch up for a 55+ audience */
  --type-small:   max(15px, calc(var(--u) * .9375));    /* 15 */

  --sans:  var(--f-sans);
  --serif: var(--f-serif);

  /* spacing */
  --space-1:  calc(var(--u) * .5);
  --space-2:  var(--u);
  --space-3:  calc(var(--u) * 1.5);
  --space-4:  calc(var(--u) * 2);
  --space-6:  calc(var(--u) * 3);
  --space-8:  calc(var(--u) * 4);
  --space-12: calc(var(--u) * 6);
  --space-16: calc(var(--u) * 8);

  --container: calc(var(--u) * 132);
  --gutter:    calc(var(--u) * 4);
  --nav-h:     max(68px, calc(var(--u) * 5));

  /* colour roles, from the landing page's ramp */
  --surface:      #ffffff;
  --line:         rgba(12, 40, 35, .12);
  --line-strong:  rgba(12, 40, 35, .26);
  --field-border: rgba(12, 40, 35, .3);
  --accent:       var(--blue);
  --accent-text:  var(--blue-deep);
  --accent-wash:  rgba(35, 89, 224, .08);
  --on-accent:    #ffffff;
  --danger:       #b3372f;
  --focus:        var(--blue);

  /* soft shapes */
  --radius-control: calc(14 * var(--p));
  --radius-panel:   calc(24 * var(--p));
  --control-height: max(52px, calc(56 * var(--p)));   /* generous targets */

  --ease:  cubic-bezier(.2, .8, .2, 1);
  --dur-1: 240ms;
  --dur-2: 640ms;
}

@media (max-width: 767px) {
  :root {
    --u: clamp(13px, 3.6vw, 15px);
    --p: 1px;
    --type-heading: 21px;
    --type-lead:    18px;
    --type-body:    17px;
    --type-small:   15px;
    --gutter: 20px;
    --nav-h: 64px;
  }
}

/* ============================================================== fields == */
.field {
  width: 100%; min-height: var(--control-height); padding: 0 calc(16 * var(--p));
  border: 1.5px solid var(--field-border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink);
  font: 500 max(16px, var(--type-body))/1.2 var(--sans);   /* 16px floor keeps iOS from zooming */
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field::placeholder { color: #6a7d77; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(35, 89, 224, .15); }
.field[aria-invalid="true"] { border-color: var(--danger); }