/* Polaris-specific extensions on top of MarketBetter tokens.
   Younger / more playful: a co-primary mint, soft tinted backgrounds,
   bigger radii on cards, more whitespace. */

:root {
  /* Default palette (overridden by Tweaks via [data-palette]) */
  --p-primary: var(--mb-blue-600);
  --p-primary-strong: var(--mb-blue-700);
  --p-primary-tint: var(--mb-blue-50);
  --p-accent: var(--mb-mint-500);
  --p-accent-tint: var(--mb-mint-100);
  --p-deep: var(--mb-blue-800);

  /* Surface */
  --p-bg: #F5F6FA;
  --p-card: #FFFFFF;
  --p-stroke: #E8EAF1;
  --p-text: #0E1430;
  --p-text-muted: #5A6175;
  --p-text-subtle: #8B91A3;

  /* Status tints */
  --p-warn-bg: #FFF7E6;
  --p-warn-fg: #A8580B;
  --p-danger-bg: #FEEAEA;
  --p-danger-fg: #B0202C;
  --p-info-bg: #EDF3FF;
  --p-info-fg: #0848E7;

  /* Radii — slightly bigger than MB */
  --p-r-card: 18px;
  --p-r-pill: 999px;
  --p-r-chip: 10px;
}

/* Palette variants exposed by Tweaks */
[data-palette="electric"] {
  --p-primary: #0848E7; --p-primary-strong: #0639BA; --p-primary-tint: #EEF3FF;
  --p-accent: #50D5A2; --p-accent-tint: #E3FBF1; --p-deep: #04216B;
}
[data-palette="violet"] {
  --p-primary: #6E40FF; --p-primary-strong: #4F22D9; --p-primary-tint: #F1ECFF;
  --p-accent: #FFB54A; --p-accent-tint: #FFF1DA; --p-deep: #19124D;
}
[data-palette="coral"] {
  --p-primary: #FF5E5B; --p-primary-strong: #D63E3B; --p-primary-tint: #FFECEC;
  --p-accent: #2BBEA6; --p-accent-tint: #DEF7F3; --p-deep: #1B2F3A;
}
[data-palette="forest"] {
  --p-primary: #1F8A5B; --p-primary-strong: #166846; --p-primary-tint: #E2F6EC;
  --p-accent: #F4B740; --p-accent-tint: #FFF1D6; --p-deep: #0F2A22;
}

/* Phone-screen base */
.phone-bg { background: var(--p-bg); color: var(--p-text); font-family: var(--mb-font-body); }
.phone-bg, .phone-bg * { box-sizing: border-box; }
.phone-bg button { font-family: inherit; }

/* Card */
.p-card {
  background: var(--p-card);
  border: 1px solid var(--p-stroke);
  border-radius: var(--p-r-card);
  box-shadow: var(--mb-shadow-sm);
}

/* Pill / chip */
.p-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--p-r-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
}
.p-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--p-r-chip);
  background: #fff; border: 1px solid var(--p-stroke);
  font-size: 13px; font-weight: 500; color: var(--p-text);
  cursor: pointer; white-space: nowrap;
}
.p-chip.active {
  background: var(--p-primary); color: #fff; border-color: var(--p-primary);
}

/* Primary CTA */
.p-cta {
  background: var(--p-primary); color: #fff;
  border: none; border-radius: 14px;
  padding: 14px 18px; font-size: 16px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--p-primary) 55%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.p-cta.ghost {
  background: transparent; color: var(--p-text);
  box-shadow: none; border: 1px solid var(--p-stroke);
}
.p-cta.mint {
  background: var(--p-accent); color: #0a2e22;
  box-shadow: 0 8px 18px -6px color-mix(in oklab, var(--p-accent) 55%, transparent);
}

/* Tab bar */
.p-tabbar {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--p-stroke);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 8px 6px 18px;
  z-index: 30;
}
.p-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 0; border: 0; background: transparent; cursor: pointer;
  color: var(--p-text-subtle); font-size: 10px; font-weight: 600;
  font-family: inherit;
}
.p-tab.active { color: var(--p-primary); }
.p-tab svg { display: block; }

/* Section header inside a screen */
.p-sec {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 18px 10px;
}
.p-sec h3 {
  font-family: var(--mb-font-display);
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  margin: 0; color: var(--p-text);
}
.p-sec a {
  font-size: 12px; font-weight: 600; color: var(--p-primary);
  text-decoration: none; cursor: pointer;
}

/* Streak ring */
.p-streak {
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--p-accent) calc(var(--pct,70) * 1%), #E8EAF1 0);
  display: flex; align-items: center; justify-content: center;
}
.p-streak > div {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--p-text);
  font-family: var(--mb-font-display);
}

/* Match meter */
.p-meter {
  height: 4px; background: var(--p-stroke); border-radius: 999px; overflow: hidden;
}
.p-meter > div {
  height: 100%; background: var(--p-accent); border-radius: 999px;
}

/* Avatar */
.p-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  font-family: var(--mb-font-display); flex-shrink: 0;
}

/* Inline-edit free */
.p-mono { font-family: var(--mb-font-mono); }