/* =============================================================================
 * components.css — @ovpn/ui@2.8.0 geometry, transcribed to plain CSS
 * =============================================================================
 * The design system ships NO stylesheet: every component is a styled-components
 * runtime template, so a non-React consumer cannot import the look — it has to
 * be re-stated. These are faithful transcriptions of the DS's own rules, read
 * straight from the compiled @ovpn/ui/<name>/<name>.styles.js, so the wizard can
 * match the product without pulling React in.
 *
 * Only the primitives the wizard needs today. To add one (Banner, Badge, Modal,
 * Tabs, Stepper, Toast): open its .styles.js in @ovpn/ui — minified but
 * single-line and readable — and restate its rules with the token vars. The
 * variants live inside ts-pattern's `.with(appearance.x, () => css`...`)` blocks.
 *
 * Unlike tokens.css this file is hand-written: a transcription can drift from
 * the package, so state WHICH component and keep the rules in the DS's order.
 *
 * The wizard uses the ghost Button (Back); its own controls (Next, Start, the
 * chips, the stage) are drawn in wizard.css. The rest is here to move to when a
 * screen needs a real Card, Input or another Button variant.
 * Requires tokens.css.
 * ========================================================================== */

/* --- Button ---------------------------------------- source: button/button.styles.js */
.ovpn-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: max-content;
  min-height: 40px;                 /* size md; size sm = 36px */
  padding: 7px 16px;                /* icon-only: no padding, width = min-height */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);  /* 4px */
  font-size: var(--fs-text-md);     /* sm -> --fs-text-sm  */
  line-height: var(--lh-text-md);   /* sm -> --lh-text-sm  */
  font-family: inherit;             /* a <button> doesn't inherit it: it fell back to Arial */
  font-weight: var(--fw-medium);
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
}
.ovpn-btn:focus:not(:disabled) { box-shadow: var(--o-primary); }
.ovpn-btn:disabled             { opacity: 0.5; cursor: not-allowed; }

.ovpn-btn--primary                      { color: var(--c-neutral-white); background: var(--c-primary-base);      border-color: var(--c-primary-base); }
.ovpn-btn--primary:hover:not(:disabled) { background: var(--c-primary-baseHover);  border-color: var(--c-primary-baseHover); }
.ovpn-btn--primary:active:not(:disabled){ background: var(--c-primary-baseActive); border-color: var(--c-primary-baseActive); }

/* NOTE the text colour: the DS uses neutral.title on orange, never white. */
.ovpn-btn--secondary                      { color: var(--c-neutral-title); background: var(--c-secondary-base);      border-color: var(--c-secondary-base); }
.ovpn-btn--secondary:hover:not(:disabled) { background: var(--c-secondary-baseHover);  border-color: var(--c-secondary-baseHover); }
.ovpn-btn--secondary:active:not(:disabled){ background: var(--c-secondary-baseActive); border-color: var(--c-secondary-baseActive); }

/* `ghost` is the DS's outlined/neutral button — the closest thing to the
 * wizard's current .btn-secondary (Back). */
.ovpn-btn--ghost                      { color: var(--c-neutral-body); background: var(--c-neutral-white); border-color: var(--c-neutral-border); }
.ovpn-btn--ghost:hover:not(:disabled) { background: var(--c-neutral-bgHover); border-color: var(--c-neutral-bgHover); }
.ovpn-btn--ghost:active:not(:disabled){ background: var(--c-neutral-light);   border-color: var(--c-neutral-border); }

.ovpn-btn--warning                      { color: var(--c-neutral-white); background: var(--c-warning-base);      border-color: var(--c-warning-base); }
.ovpn-btn--warning:hover:not(:disabled) { background: var(--c-warning-baseHover);  border-color: var(--c-warning-baseHover); }
.ovpn-btn--warning:active:not(:disabled){ background: var(--c-warning-baseActive); border-color: var(--c-warning-baseActive); }

/* --- Card ------------------------------------------ source: card/card.styles.js */
.ovpn-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-md);              /* 8px */
  border: 1px solid var(--c-neutral-bgHover);
  box-shadow: var(--sh-sm);
  background: var(--c-neutral-white);
  transition: all 150ms;
}
.ovpn-card--interactive:hover  { box-shadow: var(--sh-lg); cursor: pointer; }
.ovpn-card--interactive:focus  { box-shadow: var(--o-primary); }
.ovpn-card[aria-selected]      { border-color: var(--c-primary-base); }

/* --- Input field ----------------------------------- source: input/input.styles.js */
/* The DS splits this: .ovpn-field is the bordered box, .ovpn-input the bare
 * <input> inside it (affixes/icons are siblings). */
.ovpn-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 160px;
  max-width: 512px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-neutral-border);
  box-shadow: var(--sh-xs);
  color: var(--c-neutral-body);
  background: var(--c-neutral-white);
  font-size: var(--fs-text-md);
  transition: all 200ms;
}
.ovpn-field:hover       { box-shadow: var(--sh-sm); }
.ovpn-field:focus-within{ border-color: var(--c-neutral-borderHover); box-shadow: var(--o-primary); }
.ovpn-field[aria-invalid]{ border-color: var(--c-warning-baseHover); }
.ovpn-field[aria-disabled]{ color: var(--c-neutral-disabled); background: var(--c-neutral-bg); cursor: not-allowed; }

.ovpn-input {
  width: 100%;
  padding: 0;
  border: none;
  font-weight: var(--fw-regular);
  font-size: var(--fs-text-md);
  line-height: var(--fs-text-md);   /* yes, DS uses fontSize here, not lineHeight */
  cursor: text;
}
.ovpn-input:focus { outline: none; }
.ovpn-input::placeholder { color: var(--c-neutral-placeholder); letter-spacing: normal; }

/* --- Text scale ------------------------------------ source: text/, title/ */
.ovpn-text-xs    { font-size: var(--fs-text-xs);     line-height: var(--lh-text-xs); }
.ovpn-text-sm    { font-size: var(--fs-text-sm);     line-height: var(--lh-text-sm); }
.ovpn-text-md    { font-size: var(--fs-text-md);     line-height: var(--lh-text-md); }
.ovpn-text-lg    { font-size: var(--fs-text-lg);     line-height: var(--lh-text-lg); }
.ovpn-display-sm { font-size: var(--fs-display-sm);  line-height: var(--lh-display-sm); }
.ovpn-display-md { font-size: var(--fs-display-md);  line-height: var(--lh-display-md); }
.ovpn-display-lg { font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg); }
.ovpn-display-xl { font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl); letter-spacing: var(--ls-display-xl); }