/* ============================================================================
   STEPUP STYLE CO — FOUNDATION
   ----------------------------------------------------------------------------
   Tokens, reset, typography, buttons, forms, toasts. Shared by the storefront
   and the portal.

   Design direction: the big sneaker sites. Product photography on white, a lot
   of whitespace, near-black type, one accent colour used sparingly, and heavy
   condensed uppercase for display. Restraint is the whole look — if a screen
   needs a third colour to make sense, the layout is wrong.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Greys carry the entire interface. */
  --ink:        #0a0a0a;
  --ink-2:      #1d1d1d;
  --grey-700:   #4a4a4a;
  --grey-500:   #767676;   /* lightest grey that still passes AA on white */
  --grey-300:   #c9c9c9;
  --grey-200:   #e2e2e2;
  --grey-100:   #f1f1f1;
  --grey-50:    #f8f8f8;
  --white:      #ffffff;

  /* --- Brand navy ---------------------------------------------------------
     The house colour. --brand-900 is the one that carries the look: every
     dark surface — the hero, the active nav pill, primary buttons, the portal
     sidebar — is painted with it, which is why it gets its own name,
     --surface-dark. Type stays near-black (--ink): navy body copy at 15px
     reads as a faded mistake rather than a decision.

     The lighter steps are for tints and edges, not for text on white — only
     --brand-700 and darker clear AA at body size.
     -------------------------------------------------------------------- */
  --brand-900:  #001F4B;
  --brand-800:  #04396D;
  --brand-700:  #015B97;
  --brand-400:  #6497B2;
  --brand-200:  #B2CDE0;

  --surface-dark: var(--brand-900);

  /* One accent. Used for primary actions and nothing decorative. */
  --accent:     #e2231a;
  --accent-ink: #b3170f;

  --ok:      #0a7d3c;
  --ok-bg:   #e8f5ee;
  --warn:    #9a5b00;
  --warn-bg: #fdf3e3;
  --err:     #c31c14;
  --err-bg:  #fdeceb;

  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Helvetica, Arial, sans-serif;

  --radius:    4px;
  --radius-lg: 10px;

  /* Shadows stay subtle — the sneaker-site look is flat and photographic. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 2px 10px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);

  --header-h: 64px;
  --wrap:     1440px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

/* Visible focus for keyboard users only — a persistent ring on every click
   would fight the clean look, but removing it entirely breaks keyboard use. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

[hidden] { display: none !important; }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; }

/* The condensed uppercase treatment used for section headers and buttons. */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--grey-500);
}

.muted    { color: var(--grey-500); }
.nowrap   { white-space: nowrap; }
.tnum     { font-variant-numeric: tabular-nums; }  /* aligns money in columns */

/* Hidden visually but still read aloud. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.stack > * + * { margin-top: var(--gap, 16px); }
.row  { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface-dark);
  --btn-fg: var(--white);
  --btn-bd: var(--surface-dark);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .94rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s var(--ease), background .16s var(--ease),
              opacity .16s var(--ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); opacity: .9; }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--grey-300); }
.btn--accent  { --btn-bg: var(--accent); --btn-fg: #fff; --btn-bd: var(--accent); }
.btn--danger  { --btn-bg: transparent; --btn-fg: var(--err); --btn-bd: var(--err); }
.btn--sm      { min-height: 36px; padding: 0 16px; font-size: .85rem; }
.btn--lg      { min-height: 56px; padding: 0 32px; font-size: 1rem; }
.btn--block   { width: 100%; }

/* Spinner shown while a request is in flight. */
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading::after {
  content: '';
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* A button that looks like a link — for inline actions inside sentences. */
.link-btn {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- Forms ---------------------------------------------------------------- */
.field { margin-bottom: 18px; }

.label {
  display: block;
  margin-bottom: 6px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.label .opt { font-weight: 400; color: var(--grey-500); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.textarea { min-height: 96px; resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}
.input::placeholder, .textarea::placeholder { color: var(--grey-500); }

.input:disabled, .select:disabled {
  background: var(--grey-100);
  color: var(--grey-500);
  cursor: not-allowed;
}

.select {
  appearance: none;
  padding-right: 40px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234a4a4a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(195,28,20,.1);
}

.help { margin-top: 5px; font-size: .8rem; color: var(--grey-500); }

.error-msg {
  display: none;
  margin-top: 5px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--err);
}
.error-msg.is-shown { display: block; }

/* Radio and checkbox cards — bigger tap targets than native controls, and
   they read as choices rather than form furniture. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .14s var(--ease), background .14s var(--ease);
}
.choice:hover { border-color: var(--grey-500); }
.choice input { margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--grey-50); }
.choice-title { font-weight: 600; }
.choice-sub   { font-size: .82rem; color: var(--grey-500); }

/* --- Notices -------------------------------------------------------------- */
.notice {
  padding: 12px 14px;
  border-radius: var(--radius);
  border-left: 3px solid var(--grey-300);
  background: var(--grey-50);
  font-size: .88rem;
}
.notice--ok   { border-color: var(--ok);   background: var(--ok-bg); }
.notice--warn { border-color: var(--warn); background: var(--warn-bg); }
.notice--err  { border-color: var(--err);  background: var(--err-bg); }
.notice strong { font-weight: 700; }

/* --- Badges --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-700);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.badge--ink    { background: var(--surface-dark); color: #fff; }
.badge--accent { background: var(--accent); color: #fff; }
.badge--ok     { background: var(--ok-bg);   color: var(--ok); }
.badge--warn   { background: var(--warn-bg); color: var(--warn); }
.badge--err    { background: var(--err-bg);  color: var(--err); }

/* --- Toasts --------------------------------------------------------------- */
#toastHost {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}
.toast {
  max-width: min(92vw, 460px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--surface-dark);
  color: #fff;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in .22s var(--ease);
}
.toast--error   { background: var(--err); }
.toast--success { background: var(--ok); }
.toast.is-out   { animation: toast-out .26s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px); } }

/* --- Skeletons ------------------------------------------------------------
   Shown while data loads. A shifting layout reads as broken, so the skeleton
   occupies the same space the real content will.
   ------------------------------------------------------------------------ */
.skel {
  background: linear-gradient(90deg,
    var(--grey-100) 25%, var(--grey-200) 37%, var(--grey-100) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- Empty states --------------------------------------------------------- */
.empty {
  padding: 56px 24px;
  text-align: center;
  color: var(--grey-500);
}
.empty-icon  { font-size: 2.4rem; margin-bottom: 10px; opacity: .5; }
.empty-title { font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }

/* --- Tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  padding: 10px 12px;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey-500);
  border-bottom: 1px solid var(--grey-200);
  white-space: nowrap;
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--grey-100);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--grey-50); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}