/* ==============================================================
 * GoSmallSteps Keycloak login theme
 * Visual design — Stage 1 mockup approved 2026-05-10
 * Palette sampled from live pay.gosmallsteps.com brand tokens.
 *
 * Visual scope only. All Keycloak/auth wiring is Codex's
 * responsibility. Selectors below assume the existing FTL
 * template adds appropriate hooks.
 * ============================================================== */

/* === DESIGN TOKENS ============================================ */
:root {
  /* surfaces */
  --gss-bg-cream:       #FFF8F3;   /* brand cream — page background       */
  --gss-bg-warm-white:  #FFFEFC;   /* brand warm-white — alt surface      */
  --gss-surface:        #FFFFFF;   /* card surface                        */

  /* ink */
  --gss-ink:            #1A1A2E;   /* charcoal — primary text             */
  --gss-ink-muted:      #3A3A52;   /* charcoal-soft — secondary text      */
  --gss-ink-faint:      #6B6B80;   /* taupe — tertiary text               */

  /* accent */
  --gss-accent:         #c65835;   /* terracotta — links, focus, italic   */
  --gss-accent-shade:   #A84727;   /* terracotta hover                    */
  --gss-gold:           #F0A830;   /* gold — reserved warm accent         */

  /* status */
  --gss-error:          #C73636;
  --gss-error-bg:       #FBEAE7;
  --gss-success:        #487961;

  /* lines / borders */
  --gss-border-subtle:  #E0D5CC;   /* sand */
  --gss-border-input:   #E6E4E2;   /* line-base */

  /* shadows */
  --gss-shadow-card:    0 4px 24px rgba(26, 26, 46, 0.07),
                        0 1px 2px  rgba(26, 26, 46, 0.04);
  --gss-shadow-button:  0 1px 2px  rgba(26, 26, 46, 0.08);

  /* radii */
  --gss-radius-card:    20px;
  --gss-radius-input:   12px;
  --gss-radius-button:  999px;
  --gss-radius-pill:    999px;

  /* type */
  --gss-font-body:  -apple-system, BlinkMacSystemFont, "Segoe UI",
                    "SF Pro Display", system-ui, sans-serif;
  --gss-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* === RESET (scoped to login page) ============================ */
.gss-login-page,
.gss-login-page * {
  box-sizing: border-box;
}

/* === PAGE LAYOUT ============================================= */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
body.gss-login-page {
  font-family: var(--gss-font-body);
  background: var(--gss-bg-cream);
  color: var(--gss-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* === LOGIN CARD ============================================== */
.gss-login-card {
  background: var(--gss-surface);
  border-radius: var(--gss-radius-card);
  box-shadow: var(--gss-shadow-card);
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* === BRAND HEADER ============================================ */
.gss-brand {
  text-align: center;
  margin-bottom: 4px;
}
.gss-brand-mark {
  font-size: 22px;
  font-weight: 700;
  color: var(--gss-ink);
  letter-spacing: 0;
  margin-bottom: 8px;
}
.gss-brand-mark em {
  font-style: italic;
  font-weight: 400;
  color: var(--gss-accent);
}
.gss-brand-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--gss-ink);
  margin-bottom: 6px;
  letter-spacing: 0;
}
.gss-brand-subtitle {
  font-size: 14px;
  color: var(--gss-ink-muted);
}
.gss-brand-subtitle strong {
  color: var(--gss-ink);
  font-weight: 500;
}

/* === FORM ===================================================== */
.gss-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.gss-form-group:last-child { margin-bottom: 0; }

.gss-form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gss-ink);
  letter-spacing: 0.1px;
}

.gss-form-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--gss-font-body);
  color: var(--gss-ink);
  background: var(--gss-surface);
  border: 1.5px solid var(--gss-border-input);
  border-radius: var(--gss-radius-input);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.gss-form-input::placeholder { color: var(--gss-ink-faint); }
.gss-form-input:hover         { border-color: var(--gss-ink-faint); }
.gss-form-input:focus {
  border-color: var(--gss-accent);
  box-shadow: 0 0 0 4px rgba(198, 88, 53, 0.16);
}
.gss-form-input:disabled {
  background: var(--gss-bg-cream);
  color: var(--gss-ink-muted);
  cursor: not-allowed;
}

/* error variant */
.gss-form-input--error,
.gss-form-input.error {
  border-color: var(--gss-error);
  background: var(--gss-error-bg);
}

/* code variant — single input visually styled as a 6-digit code */
.gss-form-input--code {
  font-family: var(--gss-font-mono);
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: 600;
}

.gss-form-helper {
  font-size: 12px;
  color: var(--gss-ink-muted);
  margin-top: 2px;
}
.gss-form-helper strong { color: var(--gss-ink); font-weight: 500; }

/* === ERROR MESSAGE =========================================== */
.gss-form-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: var(--gss-error);
  margin-top: 4px;
  line-height: 1.4;
}
.gss-form-error::before {
  content: "⚠";
  font-size: 13px;
  line-height: 1.2;
  flex-shrink: 0;
}

/* === BUTTONS ================================================= */
.gss-btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--gss-font-body);
  letter-spacing: 0.1px;
  border: none;
  border-radius: var(--gss-radius-button);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  outline: none;
}
.gss-btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(198, 88, 53, 0.35);
}

/* primary — charcoal */
.gss-btn--primary {
  background: var(--gss-ink);
  color: var(--gss-bg-cream);
  box-shadow: var(--gss-shadow-button);
}
.gss-btn--primary:hover  { background: #2A2A42; }
.gss-btn--primary:active { transform: translateY(1px); }
.gss-btn--primary:disabled,
.gss-btn--primary.is-loading {
  opacity: 0.7;
  cursor: not-allowed;
}

/* google / social — bordered white */
.gss-social-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 28px;
}

.gss-btn--google {
  background: var(--gss-surface);
  color: var(--gss-ink);
  border: 1.5px solid var(--gss-border-input);
  font-weight: 500;
  box-shadow: none;
}
.gss-btn--google:hover {
  border-color: var(--gss-ink-faint);
  background: var(--gss-bg-cream);
}

/* spinner inside button */
.gss-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 248, 243, 0.3);
  border-top-color: var(--gss-bg-cream);
  border-radius: 50%;
  animation: gss-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes gss-spin { to { transform: rotate(360deg); } }

/* google G icon */
.google-g,
.gss-google-g {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09 0-.73.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E");
}

/* === DIVIDER ("or continue with") =========================== */
.gss-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gss-ink-faint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0;
}
.gss-divider::before,
.gss-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gss-border-subtle);
}
.gss-divider-label-short,
.gss-google-label-short {
  display: none;
}

/* === FORM FOOTER LINKS ====================================== */
.gss-form-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gss-ink-muted);
  margin-top: 4px;
}
.gss-form-footer a {
  color: var(--gss-ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--gss-border-input);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.gss-form-footer a:hover {
  color: var(--gss-accent);
  border-color: var(--gss-accent);
}

/* === LANGUAGE TOGGLE (optional, top-right pill) ============= */
.gss-lang-toggle {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  background: var(--gss-surface);
  border-radius: var(--gss-radius-pill);
  padding: 4px;
  box-shadow: var(--gss-shadow-button);
  font-size: 12px;
  font-weight: 600;
}
.gss-lang-toggle button,
.gss-lang-toggle a {
  padding: 6px 14px;
  border: none;
  background: transparent;
  border-radius: var(--gss-radius-pill);
  cursor: pointer;
  color: var(--gss-ink-muted);
  transition: background 0.15s ease, color 0.15s ease;
  font-family: var(--gss-font-body);
  text-decoration: none;
}
.gss-lang-toggle button.active,
.gss-lang-toggle a.active {
  background: var(--gss-ink);
  color: var(--gss-bg-cream);
}

/* === RESPONSIVE ============================================= */
@media (max-width: 480px) {
  body.gss-login-page { padding: 16px 12px; }
  .gss-login-card {
    padding: 32px 24px 28px;
    border-radius: 16px;
  }
  .gss-brand-title { font-size: 22px; }
  .gss-divider-label-full,
  .gss-google-label-full {
    display: none;
  }
  .gss-divider-label-short,
  .gss-google-label-short {
    display: inline;
  }
  .gss-lang-toggle {
    top: 12px;
    right: 12px;
  }
}

/* tablet */
@media (min-width: 481px) and (max-width: 768px) {
  .gss-login-card { max-width: 420px; }
}

/* === KEYCLOAK SHIM ==========================================
 * The existing FTL emits classes via ${properties.kc*Class!} (e.g.
 * kcInputClass, kcButtonClass, kcButtonPrimaryClass, etc.) read
 * from theme.properties. Codex should set those properties to map
 * Keycloak classes → the gss-* classes above. As a safety net,
 * map common Keycloak default classes here so the design renders
 * even before theme.properties is wired:
 * ============================================================ */
.pf-c-form-control,
input.kc-input,
input[type="text"].kc-input,
input[type="email"].kc-input {
  /* fallback: inherit gss-form-input look via attribute selector */
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--gss-ink);
  background: var(--gss-surface);
  border: 1.5px solid var(--gss-border-input);
  border-radius: var(--gss-radius-input);
  outline: none;
}
button.kc-button,
input[type="submit"].kc-button {
  /* fallback: inherit gss-btn--primary look */
  border-radius: var(--gss-radius-button);
}