@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* Scan ERB views so Tailwind generates classes used in layouts and templates */
@source "../../views/**/*.erb";

@theme {
  --color-ink: #141414;
  --color-ink-secondary: #757575;
  --color-ink-muted: #A3A3A3;
  --color-surface: #F5F5F5;
  --color-card: #FFFFFF;
  --color-muted: #EDEDED;
  --color-border: #E8E8E8;
  --color-success: #22A55B;
  --color-warning: #F59E0B;
  --color-danger: #E5484D;
  --color-accent-dark: #D97706;

  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --radius-card: 0.625rem;
}

/* Fix: Tailwind v4 can't auto-generate divide-border (name collides with CSS property).
   Higher specificity (.divide-y.divide-border) so we beat Tailwind's layered divide-y utility. */
.divide-y.divide-border>*+* {
  border-top-color: var(--color-border);
}

/* Theme color fallbacks when Tailwind doesn't generate from ERB/theme (e.g. bg-ink, bg-accent-dark) */
.bg-ink-var {
  background-color: var(--color-ink);
}
.bg-accent-dark-var {
  background-color: var(--color-accent-dark);
}

/* Notification toggles: dark track when on (peer-checked:bg-ink may not generate for theme colors) */
.peer:checked + .notif-toggle-track {
  background-color: var(--color-ink);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}
.peer:checked + .notif-toggle-track::after {
  transform: translateX(1.25rem);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ─── Circle Page Utilities ─── */
.widget-card {
  border-radius: var(--radius-card);
  background-color: var(--color-card);
  padding: 1.5rem;
}

.label-caps {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink-secondary);
}

/* ─── Landing Page Base ─── */
.landing-page {
  @apply bg-surface text-ink antialiased;
}

/* ─── Onboarding Wizard ─── */
.onboarding-step {
  @apply transition-opacity duration-300 ease-in-out;
}

.onboarding-step-active {
  animation: onboarding-fade-in 0.35s ease-out;
}

@keyframes onboarding-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-progress-bar {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toggle switch */
.onboarding-toggle div {
  transition: background-color 0.2s ease;
}

.onboarding-toggle div::after {
  transition: transform 0.2s ease;
}