/*
 * CraftWorks R2 — secondary pages (auth / payment / utility)
 * COMMAND 3100-002 | Requires design-tokens.css
 */

:root {
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --bg-dark: var(--color-bg);
  --text-light: var(--color-text);
  --text-dark: var(--cw-graphite);
  --shadow: var(--shadow-lg);

  /* payment.html legacy aliases */
  --bg: var(--color-bg);
  --bg2: var(--color-surface);
  --card: var(--color-surface-elevated);
  --line: var(--color-border);
  --gold: var(--color-primary);
  --gold-deep: var(--color-primary-hover);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --wood: var(--cw-bronze);
  --wood-dark: #6B4A2A;
  --iron: var(--cw-charcoal);
  --fh: var(--font-heading);
  --fb: var(--font-body);
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body.cw-auth,
body.cw-payment {
  background:
    radial-gradient(circle at top left, rgba(184, 115, 51, 0.12) 0%, transparent 42%),
    radial-gradient(circle at 80% 100%, rgba(154, 107, 63, 0.1) 0%, transparent 45%),
    var(--color-bg) !important;
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Auth cards */
body.cw-auth .login-container,
body.cw-auth .register-container {
  width: 100%;
  max-width: min(440px, 100%);
  background: rgba(36, 40, 46, 0.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

body.cw-auth .register-container {
  max-width: min(500px, 100%);
}

body.cw-auth .logo {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 1px rgba(184, 115, 51, 0.25) !important;
}

body.cw-auth .tab.active,
body.cw-auth .btn-submit {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)) !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
}

body.cw-auth input,
body.cw-auth select,
body.cw-auth textarea {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  min-height: var(--control-height);
  max-width: 100%;
}

body.cw-auth input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.18) !important;
}

body.cw-auth .footer-links a {
  color: var(--color-primary) !important;
}

body.cw-auth .loft-topbar {
  max-width: 100%;
  overflow: hidden;
}

/* Payment */
body.cw-payment .brand-name span,
body.cw-payment .brand-mark {
  color: var(--color-primary) !important;
}
body.cw-payment .dot.on {
  background: var(--color-primary) !important;
}
body.cw-payment .btn-gold {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)) !important;
  color: var(--color-text) !important;
}
body.cw-payment .lookup-input:focus,
body.cw-payment .btn-ghost:hover {
  border-color: var(--color-primary) !important;
}
body.cw-payment .wrap {
  width: 100%;
  max-width: 600px;
  padding-left: max(0.85rem, env(safe-area-inset-left));
  padding-right: max(0.85rem, env(safe-area-inset-right));
  box-sizing: border-box;
}
body.cw-payment .card {
  max-width: 100%;
  overflow: hidden;
}

body.cw-auth .login-container,
body.cw-auth .register-container,
body.cw-auth input,
body.cw-auth button,
body.cw-auth .btn-submit,
body.cw-auth .form-grid,
body.cw-payment .wrap,
body.cw-payment .card,
body.cw-payment input,
body.cw-payment button {
  max-width: 100%;
  box-sizing: border-box;
}

body.cw-auth .loft-topbar,
body.cw-payment .loft-topbar {
  width: 100%;
  max-width: 100vw;
  left: 0;
  right: 0;
  box-sizing: border-box;
  overflow: hidden;
}

@media (max-width: 480px) {
  body.cw-auth {
    padding: 12px !important;
    align-items: flex-start !important;
  }

  body.cw-auth .login-container,
  body.cw-auth .register-container {
    padding: 1.25rem !important;
    margin: 0 auto;
  }

  body.cw-auth .form-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  body.cw-auth .form-group.full-width,
  body.cw-auth .form-grid > * {
    grid-column: 1 / -1 !important;
    max-width: 100%;
    min-width: 0;
  }

  body.cw-auth .cw-social-row {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  body.cw-auth .logo {
    width: 64px !important;
    height: 64px !important;
  }

  body.cw-auth h2 {
    font-size: 1.25rem !important;
  }

  body.cw-auth .btn-submit {
    width: 100%;
    min-height: var(--control-height);
  }

  body.cw-payment .brand-name {
    font-size: 1rem !important;
  }

  body.cw-payment .card {
    padding: 1rem !important;
    border-radius: var(--radius-lg) !important;
  }
}