/*
 * TempMy Design System v2
 * Single source of truth for tokens, typography, spacing, and components.
 * Loaded after tm-brand-refresh.css — overrides scattered legacy values.
 *
 * Sections:
 *   1. Tokens (colors, radius, shadow, spacing, type)
 *   2. Base reset
 *   3. Typography scale
 *   4. Buttons (3 variants only)
 *   5. Form controls
 *   6. Cards & surfaces
 *   7. Badges & labels
 *   8. Utility
 */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --tm-c-primary:      #2563EB;
  --tm-c-primary-dark: #1D4ED8;
  --tm-c-primary-soft: rgba(37,99,235,.09);
  --tm-c-primary-rgb:  37,99,235;

  /* Semantic colors */
  --tm-c-danger:       #DC2626;
  --tm-c-success:      #059669;
  --tm-c-warning:      #D97706;

  /* Text */
  --tm-c-text:         #0f172a;
  --tm-c-text-2:       #334155;
  --tm-c-text-muted:   #64748b;
  --tm-c-text-faint:   #94a3b8;

  /* Surfaces */
  --tm-c-bg:           #f4f7fb;
  --tm-c-surface:      #ffffff;
  --tm-c-surface-alt:  #f8fafc;
  --tm-c-border:       rgba(15,23,42,.09);
  --tm-c-border-focus: rgba(37,99,235,.40);

  /* Radius — tighter, more professional */
  --tm-r-xs:  4px;
  --tm-r-sm:  6px;
  --tm-r-md:  10px;
  --tm-r-lg:  14px;
  --tm-r-xl:  20px;
  --tm-r-pill: 999px;

  /* Shadows — subtle */
  --tm-s-xs: 0 1px 3px rgba(15,23,42,.07);
  --tm-s-sm: 0 2px 8px rgba(15,23,42,.08);
  --tm-s-md: 0 4px 16px rgba(15,23,42,.09);
  --tm-s-lg: 0 8px 32px rgba(15,23,42,.10);

  /* Spacing scale (4px base) */
  --tm-sp-1:  4px;
  --tm-sp-2:  8px;
  --tm-sp-3:  12px;
  --tm-sp-4:  16px;
  --tm-sp-5:  20px;
  --tm-sp-6:  24px;
  --tm-sp-8:  32px;
  --tm-sp-10: 40px;
  --tm-sp-12: 48px;
  --tm-sp-16: 64px;

  /* Typography scale */
  --tm-fs-xs:   11px;
  --tm-fs-sm:   12px;
  --tm-fs-base: 14px;
  --tm-fs-md:   15px;
  --tm-fs-lg:   17px;
  --tm-fs-xl:   20px;
  --tm-fs-2xl:  24px;
  --tm-fs-3xl:  30px;
  --tm-fs-4xl:  38px;
  --tm-fs-5xl:  clamp(36px,5vw,52px);

  --tm-fw-normal:  400;
  --tm-fw-medium:  500;
  --tm-fw-semi:    600;
  --tm-fw-bold:    700;
  --tm-fw-black:   800;

  --tm-lh-tight:   1.25;
  --tm-lh-snug:    1.4;
  --tm-lh-base:    1.6;
  --tm-lh-loose:   1.75;

  /* Font stack */
  --tm-font-body:    Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tm-font-display: Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --tm-font-mono:    "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  /* Transitions */
  --tm-tr-fast:   100ms ease;
  --tm-tr-base:   180ms ease;
  --tm-tr-slow:   280ms ease;

  /* Override legacy variables to keep them in sync */
  --tm-primary:   var(--tm-c-primary) !important;
  --tm-surface:   var(--tm-c-surface) !important;
  --tm-surface-2: var(--tm-c-surface-alt) !important;
  --tm-border:    var(--tm-c-border) !important;
  --tm-text:      var(--tm-c-text) !important;
  --tm-muted:     var(--tm-c-text-muted) !important;
  --tm-bg:        var(--tm-c-bg) !important;

  /* Fix legacy radius vars */
  --tm-radius-sm: var(--tm-r-sm) !important;
  --tm-radius-md: var(--tm-r-md) !important;
  --tm-radius-lg: var(--tm-r-lg) !important;

  /* Fix legacy shadow vars */
  --tm-shadow-xs: var(--tm-s-xs) !important;
  --tm-shadow-sm: var(--tm-s-sm) !important;
  --tm-shadow-md: var(--tm-s-md) !important;
  --tm-shadow-lg: var(--tm-s-lg) !important;
}

/* ─── 2. BASE RESET ─────────────────────────────────────────────────────── */
body.tm-saas,
body.tm-auth {
  font-family: var(--tm-font-body) !important;
  font-size: var(--tm-fs-md) !important;
  line-height: var(--tm-lh-base) !important;
  color: var(--tm-c-text) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ─── 3. TYPOGRAPHY SCALE ───────────────────────────────────────────────── */
body.tm-saas h1,
body.tm-auth h1 {
  font-family: var(--tm-font-display) !important;
  font-weight: var(--tm-fw-black) !important;
  line-height: var(--tm-lh-tight) !important;
  color: var(--tm-c-text) !important;
}
body.tm-saas h2,
body.tm-auth h2 {
  font-family: var(--tm-font-display) !important;
  font-weight: var(--tm-fw-bold) !important;
  line-height: var(--tm-lh-snug) !important;
  color: var(--tm-c-text) !important;
}
body.tm-saas h3,
body.tm-auth h3 {
  font-family: var(--tm-font-display) !important;
  font-weight: var(--tm-fw-semi) !important;
  line-height: var(--tm-lh-snug) !important;
  color: var(--tm-c-text) !important;
}
body.tm-saas p,
body.tm-auth p {
  color: var(--tm-c-text-2) !important;
  line-height: var(--tm-lh-base) !important;
}
body.tm-saas small,
body.tm-auth small {
  font-size: var(--tm-fs-sm) !important;
  color: var(--tm-c-text-muted) !important;
}

/* ─── 4. BUTTONS ────────────────────────────────────────────────────────── */

/* Reset all legacy button base styles */
body.tm-saas .btn-1,
body.tm-saas .btn-2,
body.tm-auth .btn-1,
body.tm-auth .btn-2 {
  border-radius: var(--tm-r-md) !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: var(--tm-font-body) !important;
  font-weight: var(--tm-fw-medium) !important;
  font-size: var(--tm-fs-base) !important;
  transition: background var(--tm-tr-base), color var(--tm-tr-base), border-color var(--tm-tr-base) !important;
}

/* Primary button — brand blue */
body.tm-saas .btn.btn-primary,
body.tm-saas .tm-btn--primary,
body.tm-saas .tm-btn-primary,
body.tm-auth .btn.btn-primary,
body.tm-auth .tm-btn--primary,
body.tm-auth .tm-btn-primary {
  background: var(--tm-c-primary) !important;
  border-color: var(--tm-c-primary) !important;
  color: #fff !important;
  border-radius: var(--tm-r-md) !important;
  box-shadow: none !important;
  font-weight: var(--tm-fw-medium) !important;
  font-size: var(--tm-fs-base) !important;
  padding: 9px 18px !important;
  transition: background var(--tm-tr-base) !important;
}
body.tm-saas .btn.btn-primary:hover,
body.tm-saas .tm-btn--primary:hover,
body.tm-saas .tm-btn-primary:hover,
body.tm-auth .btn.btn-primary:hover,
body.tm-auth .tm-btn--primary:hover {
  background: var(--tm-c-primary-dark) !important;
  border-color: var(--tm-c-primary-dark) !important;
  box-shadow: none !important;
}

/* Secondary / outline button */
body.tm-saas .btn.btn-outline-primary,
body.tm-saas .btn.btn-secondary,
body.tm-saas .tm-btn--outline,
body.tm-saas .tm-btn-secondary,
body.tm-auth .btn.btn-outline-primary,
body.tm-auth .btn.btn-secondary,
body.tm-auth .tm-btn--outline {
  background: transparent !important;
  border: 1.5px solid var(--tm-c-primary) !important;
  color: var(--tm-c-primary) !important;
  border-radius: var(--tm-r-md) !important;
  box-shadow: none !important;
  font-weight: var(--tm-fw-medium) !important;
  font-size: var(--tm-fs-base) !important;
  padding: 9px 18px !important;
  transition: background var(--tm-tr-base), color var(--tm-tr-base) !important;
}
body.tm-saas .btn.btn-outline-primary:hover,
body.tm-saas .tm-btn--outline:hover,
body.tm-auth .btn.btn-outline-primary:hover {
  background: var(--tm-c-primary-soft) !important;
  color: var(--tm-c-primary-dark) !important;
  box-shadow: none !important;
}

/* Ghost / link button */
body.tm-saas .tm-btn--ghost,
body.tm-auth .tm-btn--ghost {
  background: transparent !important;
  border: none !important;
  color: var(--tm-c-text-muted) !important;
  box-shadow: none !important;
  font-weight: var(--tm-fw-medium) !important;
  padding: 8px 12px !important;
  border-radius: var(--tm-r-md) !important;
}
body.tm-saas .tm-btn--ghost:hover,
body.tm-auth .tm-btn--ghost:hover {
  background: var(--tm-c-surface-alt) !important;
  color: var(--tm-c-text) !important;
}

/* Danger */
body.tm-saas .btn.btn-danger,
body.tm-saas .tm-btn--danger,
body.tm-saas .tm-btn-danger {
  background: var(--tm-c-danger) !important;
  border-color: var(--tm-c-danger) !important;
  color: #fff !important;
  border-radius: var(--tm-r-md) !important;
  box-shadow: none !important;
}

/* Icon buttons */
body.tm-saas .tm-iconbtn,
body.tm-auth .tm-iconbtn {
  border-radius: var(--tm-r-sm) !important;
  font-size: var(--tm-fs-base) !important;
  font-weight: var(--tm-fw-medium) !important;
  box-shadow: none !important;
  transition: background var(--tm-tr-fast), color var(--tm-tr-fast) !important;
}

/* ─── 5. FORM CONTROLS ──────────────────────────────────────────────────── */
body.tm-saas .form-control,
body.tm-auth .form-control,
body.tm-saas input[type="text"],
body.tm-saas input[type="email"],
body.tm-saas input[type="password"],
body.tm-saas textarea,
body.tm-saas select {
  border-radius: var(--tm-r-sm) !important;
  border: 1.5px solid var(--tm-c-border) !important;
  font-size: var(--tm-fs-base) !important;
  font-family: var(--tm-font-body) !important;
  color: var(--tm-c-text) !important;
  background: var(--tm-c-surface) !important;
  box-shadow: none !important;
  transition: border-color var(--tm-tr-base) !important;
}
body.tm-saas .form-control:focus,
body.tm-auth .form-control:focus,
body.tm-saas input:focus,
body.tm-saas textarea:focus {
  border-color: var(--tm-c-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
  outline: none !important;
}

/* ─── 6. CARDS & SURFACES ───────────────────────────────────────────────── */
body.tm-saas .card,
body.tm-auth .card {
  border-radius: var(--tm-r-md) !important;
  border: 1px solid var(--tm-c-border) !important;
  box-shadow: var(--tm-s-xs) !important;
  background: var(--tm-c-surface) !important;
}
body.tm-saas .card-header,
body.tm-auth .card-header {
  border-bottom: 1px solid var(--tm-c-border) !important;
  background: var(--tm-c-surface-alt) !important;
  border-radius: var(--tm-r-md) var(--tm-r-md) 0 0 !important;
  padding: 14px 18px !important;
  font-weight: var(--tm-fw-semi) !important;
  font-size: var(--tm-fs-base) !important;
}
body.tm-saas .card-body,
body.tm-auth .card-body {
  padding: 18px !important;
}

/* ─── 7. BADGES & LABELS ────────────────────────────────────────────────── */
body.tm-saas .badge,
body.tm-auth .badge {
  border-radius: var(--tm-r-xs) !important;
  font-size: var(--tm-fs-xs) !important;
  font-weight: var(--tm-fw-semi) !important;
  padding: 3px 7px !important;
  letter-spacing: .01em !important;
  box-shadow: none !important;
}
body.tm-saas .badge.badge-primary,
body.tm-saas .badge-primary {
  background: var(--tm-c-primary-soft) !important;
  color: var(--tm-c-primary) !important;
}

/* ─── 8. HOMEPAGE SECTION TYPOGRAPHY ───────────────────────────────────── */

/* Section H2 — constrained so long titles don't wrap at desktop */
body.tm-saas .tm-homepage-v2 .tm-home-section__head h2 {
  font-size: clamp(20px, 2.2vw, 27px) !important;
  font-weight: var(--tm-fw-bold) !important;
  line-height: var(--tm-lh-snug) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  color: var(--tm-c-text) !important;
}

/* Section subtitle paragraph */
body.tm-saas .tm-homepage-v2 .tm-home-section__head p {
  font-size: var(--tm-fs-md) !important;
  color: var(--tm-c-text-muted) !important;
  max-width: 520px !important;
  margin: 8px auto 0 !important;
  text-align: center !important;
  line-height: var(--tm-lh-base) !important;
}

/* Step/card H3 */
body.tm-saas .tm-homepage-v2 .tm-home-step h3,
body.tm-saas .tm-homepage-v2 .tm-home-card h3 {
  font-size: var(--tm-fs-lg) !important;
  font-weight: var(--tm-fw-semi) !important;
  color: var(--tm-c-text) !important;
  margin-bottom: 8px !important;
  line-height: var(--tm-lh-snug) !important;
}

body.tm-saas .tm-homepage-v2 .tm-home-step p,
body.tm-saas .tm-homepage-v2 .tm-home-card p {
  font-size: var(--tm-fs-base) !important;
  color: var(--tm-c-text-muted) !important;
  line-height: var(--tm-lh-loose) !important;
}

/* ─── 9. FOOTER ─────────────────────────────────────────────────────────── */

/* Column heading — remove uppercase/tracking AI tell */
body.tm-saas .tm-footer-premium__col h3 {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--tm-fs-sm) !important;
  font-weight: var(--tm-fw-semi) !important;
  color: rgba(255,255,255,.5) !important;
  margin-bottom: 14px !important;
}

/* Social link pills — tighter radius */
body.tm-saas .tm-footer-premium .tm-footer-social .tm-footer-social-link {
  border-radius: var(--tm-r-sm) !important;
  padding: 5px 10px !important;
  font-size: var(--tm-fs-sm) !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  transition: background var(--tm-tr-fast) !important;
}
body.tm-saas .tm-footer-premium .tm-footer-social .tm-footer-social-link:hover {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Footer links — cleaner spacing */
body.tm-saas .tm-footer-premium__col a {
  padding: 4px 0 !important;
  font-size: var(--tm-fs-base) !important;
  opacity: .82;
  transition: opacity var(--tm-tr-fast) !important;
}
body.tm-saas .tm-footer-premium__col a:hover {
  opacity: 1 !important;
}

/* Footer logo — consistent font */
body.tm-saas .tm-footer-premium__logo {
  font-family: var(--tm-font-display) !important;
  font-size: 20px !important;
  font-weight: var(--tm-fw-bold) !important;
}

/* Trust tagline */
body.tm-saas .footer .tm-footer-premium__trust {
  font-size: var(--tm-fs-base) !important;
  line-height: var(--tm-lh-base) !important;
  color: rgba(255,255,255,.6) !important;
}

/* ─── 10. UTILITY ───────────────────────────────────────────────────────── */

/* Remove cyan from design (--color2 was overused) */
body.tm-saas {
  --color2: var(--tm-c-primary) !important;
}

/* Consistent focus ring */
body.tm-saas *:focus-visible {
  outline: 2px solid var(--tm-c-primary) !important;
  outline-offset: 2px !important;
}

/* Alert / notification boxes */
body.tm-saas .alert {
  border-radius: var(--tm-r-sm) !important;
  border: 1px solid transparent !important;
  font-size: var(--tm-fs-base) !important;
  box-shadow: none !important;
}

/* Scrollbar (webkit) */
body.tm-saas ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.tm-saas ::-webkit-scrollbar-track {
  background: var(--tm-c-surface-alt);
}
body.tm-saas ::-webkit-scrollbar-thumb {
  background: var(--tm-c-border);
  border-radius: var(--tm-r-pill);
}
body.tm-saas ::-webkit-scrollbar-thumb:hover {
  background: var(--tm-c-text-faint);
}