appcakes-builds/src/theme/variables.css

:root {
  --ion-color-primary: #6d28d9;
  --ion-color-primary-rgb: 109, 40, 217;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #5b21b6;
  --ion-color-primary-tint: #7c3aed;

  --ion-color-secondary: #0f766e;
  --ion-color-secondary-rgb: 15, 118, 110;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #115e59;
  --ion-color-secondary-tint: #14b8a6;

  --ion-color-tertiary: #ea580c;
  --ion-color-tertiary-rgb: 234, 88, 12;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #c2410c;
  --ion-color-tertiary-tint: #f97316;

  --ion-color-success: #16a34a;
  --ion-color-success-rgb: 22, 163, 74;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #15803d;
  --ion-color-success-tint: #22c55e;

  --ion-color-warning: #f59e0b;
  --ion-color-warning-rgb: 245, 158, 11;
  --ion-color-warning-contrast: #1f2937;
  --ion-color-warning-contrast-rgb: 31, 41, 55;
  --ion-color-warning-shade: #d97706;
  --ion-color-warning-tint: #fbbf24;

  --ion-color-danger: #dc2626;
  --ion-color-danger-rgb: 220, 38, 38;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #b91c1c;
  --ion-color-danger-tint: #ef4444;

  --ion-color-dark: #111827;
  --ion-color-dark-rgb: 17, 24, 39;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #030712;
  --ion-color-dark-tint: #374151;

  --ion-color-medium: #6b7280;
  --ion-color-medium-rgb: 107, 114, 128;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #4b5563;
  --ion-color-medium-tint: #9ca3af;

  --ion-color-light: #f3f4f6;
  --ion-color-light-rgb: 243, 244, 246;
  --ion-color-light-contrast: #111827;
  --ion-color-light-contrast-rgb: 17, 24, 39;
  --ion-color-light-shade: #e5e7eb;
  --ion-color-light-tint: #f9fafb;

  --ion-background-color: #f6f7fb;
  --ion-text-color: #111827;
  --ion-border-color: #e5e7eb;
}

body {
  background:
    radial-gradient(
      circle at top left,
      rgba(168, 85, 247, 0.12),
      transparent 34%
    ),
    linear-gradient(180deg, #fbf7ff 0%, #f2ecfb 100%);
}

ion-toolbar {
  --background: #ffffff;
  --color: var(--ion-color-dark);
}

.mono-nums {
  font-variant-numeric: tabular-nums;
}

.dashboard-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero-card,
.habit-card,
.stats-card,
.empty-state-card,
.inline-message,
.auth-card {
  background: #ffffff;
  border: 1px solid #ebeef4;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}

.hero-card {
  padding: 24px;
}

.hero-card.compact {
  padding: 20px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ion-color-primary);
  margin-bottom: 8px;
}

.hero-card h1,
.auth-hero h1,
.empty-state-card h2 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ion-color-dark);
}

.hero-card p,
.auth-hero p,
.inline-message p,
.empty-state-card p,
.stats-card p,
.habit-copy p {
  color: var(--ion-color-medium);
  line-height: 1.5;
}

.stack-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.habit-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.habit-card-main {
  display: flex;
  gap: 14px;
}

.habit-color-pill {
  width: 10px;
  border-radius: 999px;
  min-height: 100%;
}

.habit-copy {
  flex: 1;
}

.habit-copy h3,
.stats-card h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ion-color-dark);
}

.habit-metrics-row,
.stats-card-footer,
.stats-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.habit-metrics-row span,
.stats-card-footer span,
.stats-card-header p {
  font-size: 0.85rem;
  color: var(--ion-color-medium);
}

.habit-metrics-row ion-icon {
  vertical-align: middle;
}

.habit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.empty-state-card,
.inline-message {
  padding: 28px 22px;
  text-align: center;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(109, 40, 217, 0.1);
  color: var(--ion-color-primary);
  font-size: 30px;
}

.auth-shell {
  min-height: 100%;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.auth-hero {
  padding: 0 4px;
}

.auth-card {
  margin: 0;
}

.auth-card ion-card-content {
  padding: 20px;
}

.auth-form,
.auth-message-block,
.habit-form-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 18px;
}

.auth-input-item {
  --background: #f8fafc;
  --border-radius: 18px;
}

.auth-feedback {
  margin: 0;
  font-size: 0.88rem;
}

.error-text {
  color: var(--ion-color-danger);
}

.color-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.habit-color-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.habit-color-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
}

.habit-color-dot.selected {
  border-color: #111827;
}

.stats-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stats-streak-badge {
  font-size: 1.1rem;
  font-weight: 700;
}

.home-header ion-toolbar {
  --background: transparent;
  --border-color: transparent;
  --padding-start: 12px;
  --padding-end: 12px;
}

.home-content {
  --background: transparent;
}

.home-shell {
  padding-top: calc(var(--ion-safe-area-top) + 10px);
  padding-bottom: 32px;
  gap: 22px;
}

.soft-icon-button {
  --background: rgba(255, 255, 255, 0.86);
  --background-hover: rgba(255, 255, 255, 0.96);
  --background-activated: rgba(255, 255, 255, 0.96);
  --border-radius: 999px;
  --box-shadow: 0 10px 24px rgba(109, 40, 217, 0.08);
  --color: #17121f;
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 999px;
  margin-inline-start: 6px;
}

.soft-icon-button::part(native) {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 999px;
}

.habits-hero {
  padding: 6px 4px 0;
}

.habits-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.hero-kicker {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 700;
  color: rgba(34, 23, 54, 0.92);
}

.hero-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-title-wrap h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.08em;
  font-weight: 800;
  color: #110d18;
}

.hero-title-wrap span {
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.08em;
  font-weight: 700;
  color: rgba(26, 16, 38, 0.32);
}

.hero-add-button {
  --background: rgba(255, 255, 255, 0.86);
  --background-hover: rgba(255, 255, 255, 0.96);
  --border-radius: 999px;
  --box-shadow: 0 14px 30px rgba(109, 40, 217, 0.1);
  --color: var(--ion-color-primary);
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  border-radius: 999px;
  margin: 4px 0 0;
}

.hero-add-button::part(native) {
  width: 52px;
  min-width: 52px;
  height: 52px;
  min-height: 52px;
  border-radius: 999px;
}

.hero-progress-track {
  margin-top: 20px;
  height: 12px;
  background: rgba(109, 40, 217, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.hero-progress-fill {
  height: 100%;
  min-width: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b21b6 0%, #c084fc 100%);
  position: relative;
  transition: width 0.3s ease;
}

.hero-progress-dot {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.hero-progress-meta {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(43, 31, 58, 0.74);
}

.home-routine-panel,
.home-summary-card,
.home-inline-card,
.home-empty-state-card,
.habit-card--editorial {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 40px rgba(106, 62, 149, 0.08);
  backdrop-filter: blur(12px);
}

.home-routine-panel {
  padding: 18px;
  border-radius: 30px;
}

.home-habit-stack {
  gap: 10px;
}

.habit-card--editorial {
  border-radius: 24px;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  border: none;
}

.habit-card--editorial.is-complete {
  background: rgba(255, 255, 255, 0.95);
}

.habit-check-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(109, 40, 217, 0.08);
  color: rgba(109, 40, 217, 0.72);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.habit-check-button.is-complete {
  background: rgba(109, 40, 217, 0.16);
  color: var(--ion-color-primary);
}

.habit-copy-topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.habit-copy-topline .habit-color-pill {
  width: 10px;
  min-height: 10px;
  height: 10px;
  flex-shrink: 0;
}

.habit-card--editorial .habit-card-main {
  min-width: 0;
}

.habit-card--editorial .habit-copy h3 {
  margin: 0;
  font-size: 1.03rem;
}

.habit-card--editorial .habit-copy p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(52, 41, 66, 0.7);
}

.habit-card--editorial .habit-metrics-row {
  margin-top: 8px;
}

.habit-card--editorial .habit-metrics-row span {
  font-size: 0.8rem;
}

.habit-delete-button {
  --color: rgba(86, 68, 106, 0.72);
  --padding-start: 6px;
  --padding-end: 6px;
  margin: 0;
}

.home-complete-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-section-label {
  margin: 0 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(66, 50, 84, 0.74);
}

.home-summary-card {
  border-radius: 30px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.summary-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.summary-ring-inner {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #1d1430;
}

.summary-copy h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.summary-copy p {
  margin: 0;
  color: rgba(52, 41, 66, 0.7);
  line-height: 1.45;
}

.summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.summary-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(42, 30, 56, 0.78);
}

.home-empty-state-card {
  border-radius: 26px;
  border: none;
  box-shadow: none;
}

.home-empty-state-button {
  --border-radius: 999px;
  --box-shadow: none;
}

.account-shell {
  gap: 20px;
  padding-bottom: calc(24px + var(--ion-safe-area-bottom));
}

.account-hero-card {
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(71, 45, 108, 0.08);
}

.account-hero-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #e9e1f6;
}

.account-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.account-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 24, 39, 0) 0%,
    rgba(17, 24, 39, 0.3) 100%
  );
}

.account-hero-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-hero-content h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.15;
  letter-spacing: -0.04em;
  color: var(--ion-color-dark);
  word-break: break-word;
}

.account-hero-content p {
  margin: 0;
  color: rgba(55, 65, 81, 0.76);
}

.account-highlight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(109, 40, 217, 0.1);
  color: var(--ion-color-primary);
  font-size: 0.84rem;
  font-weight: 700;
}

.account-highlight-chip.subtle {
  background: rgba(15, 118, 110, 0.1);
  color: var(--ion-color-secondary);
}

.account-highlight-chip ion-icon,
.account-highlight-chip svg {
  font-size: 1rem;
}

.account-details-card {
  gap: 18px;
  border: none;
}

.account-info-item {
  --background: #f7f5fb;
  --border-radius: 20px;
  --padding-start: 16px;
  --padding-end: 16px;
  --inner-padding-end: 0px;
}

.account-info-item h2 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ion-color-primary);
}

.account-info-item p {
  margin: 0;
  color: var(--ion-color-dark);
  font-size: 1rem;
  font-weight: 600;
  word-break: break-word;
}

.account-trust-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 2px;
}

.account-trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(22, 163, 74, 0.12);
  color: var(--ion-color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.account-trust-row h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ion-color-dark);
}

.account-trust-row p {
  margin: 0;
  color: rgba(55, 65, 81, 0.74);
  line-height: 1.5;
}

.account-primary-button,
.account-secondary-button {
  --border-radius: 18px;
  min-height: 50px;
}

.account-primary-button {
  --background: var(--ion-color-primary);
  --box-shadow: none;
}

.account-secondary-button {
  --border-width: 1px;
}

@media (max-width: 420px) {
  .home-summary-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-hero-image-wrap {
    aspect-ratio: 4 / 3;
  }
}