/* Forge | brand.css
   Small marks use a gradient "F" (clean at any size).
   Big hero spots use the actual logo.png image.
   Every auth screen gets a soft blue→purple→pink halo behind it. */

/* SMALL MARK — gradient square with a clean F.
   Used in headers, drawers, footers, list items. */
.brand-mark {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--gradient-forge);
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-weight: 800; font-size: 26px;
  letter-spacing: -0.02em;
  box-shadow: var(--sh-brand);
  position: relative;
  overflow: hidden;
}
.brand-mark::before {
  content: 'F';
}
.brand-mark::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}
.brand-mark-sm { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
.brand-mark-lg { width: 72px; height: 72px; font-size: 34px; border-radius: 20px; }

/* Drawer brand row */
.drawer-logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--gradient-forge);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; font-weight: 800; font-size: 20px;
  box-shadow: var(--sh-brand);
  position: relative; overflow: hidden;
}
.drawer-logo::before { content: 'F'; }
.drawer-logo::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%);
  pointer-events: none;
}

/* FULL LOGO — the real PNG you saved. Used on Welcome + Start. */
.logo-full {
  display: block;
  width: 220px; max-width: 74vw;
  height: auto;
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(79, 126, 255, 0.28),
              0 8px 24px rgba(236, 72, 153, 0.18);
  animation: brand-pop 700ms var(--ease-in) both;
}
.logo-full-sm {
  width: 132px; max-width: 46vw;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(79, 126, 255, 0.24),
              0 4px 12px rgba(236, 72, 153, 0.14);
  animation: brand-pop 700ms var(--ease-in) both;
}

@keyframes brand-pop {
  0%   { opacity: 0; transform: scale(0.86) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.03) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* AUTH SCREEN HALO — soft radial gradient behind every auth-shell. */
.auth-shell { position: relative; isolation: isolate; }
.auth-shell::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 18% 8%,
      rgba(79, 126, 255, 0.22) 0%,
      transparent 42%),
    radial-gradient(circle at 82% 14%,
      rgba(139, 92, 246, 0.20) 0%,
      transparent 46%),
    radial-gradient(circle at 50% 100%,
      rgba(236, 72, 153, 0.16) 0%,
      transparent 50%),
    var(--bg);
  pointer-events: none;
  animation: halo-in 900ms var(--ease-in) both;
}
@keyframes halo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-theme="light"] .auth-shell::before {
  background:
    radial-gradient(circle at 18% 8%,
      rgba(79, 126, 255, 0.14) 0%, transparent 42%),
    radial-gradient(circle at 82% 14%,
      rgba(139, 92, 246, 0.12) 0%, transparent 46%),
    radial-gradient(circle at 50% 100%,
      rgba(236, 72, 153, 0.10) 0%, transparent 50%),
    var(--bg);
}

/* Wordmark — used under the logo on auth screens. */
.wordmark {
  font-family: var(--font);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.22em;
  background: var(--gradient-forge);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

/* Primary button — blue→purple→pink gradient, matching the logo. */
.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: var(--sh-glow);
}
.btn-gradient {
  background: var(--gradient-forge);
  color: #FFFFFF;
  background-size: 180% 180%;
  background-position: 0% 50%;
  transition: background-position 420ms var(--ease-in),
              transform var(--t-fast) var(--ease-in),
              box-shadow var(--t-fast) var(--ease-in);
  box-shadow: var(--sh-brand);
}
.btn-gradient:hover:not(:disabled) {
  background-position: 100% 50%;
  box-shadow: 0 16px 44px rgba(139, 92, 246, 0.35);
}