/* ==========================================================================
   Saath Module Design Tokens
   Canonical colors + frame shapes for Life Area identity.
   Do not override per-screen. Change here only, and only per
   MODULE_DESIGN_SYSTEM.md's change process.
   ========================================================================== */

:root {
  /* Status colors — reserved for urgency/consequence, NEVER used for module identity */
  --status-danger: #d94841;
  --status-warning: #d9831f;
  --status-success: #318a66;

  /* Module identity colors — one hue per Life Area, distinct from status colors above */
  --module-home:      #0a9b90; /* teal   */
  --module-money:     #4d7fcc; /* blue   */
  --module-job:       #6c5ce7; /* violet */
  --module-plans:     #c2477e; /* rose   */
  --module-documents: #4a5a7a; /* indigo-slate */
  --module-care:      #c9714f; /* terracotta */

  /* Soft backgrounds for badges/cards, derived from module colors at low opacity */
  --module-home-soft:      #e7f6f4;
  --module-money-soft:     #eaf1fb;
  --module-job-soft:       #efebfd;
  --module-plans-soft:     #fbebf2;
  --module-documents-soft: #eaedf3;
  --module-care-soft:      #fbeee7;
}

/* ==========================================================================
   Module badge — color + icon, wrapped in a module-specific FRAME SHAPE.
   Shape is the redundant (non-color) signal, per WCAG "don't rely on color
   alone." Pair every module notification/icon with its frame class below.
   ========================================================================== */

.module-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
}
.module-badge img { width: 20px; height: 20px; }

/* Icon glyph inside a badge — masked so it takes the badge's module COLOR
   (currentColor), keeping colour single-sourced from the --module-* vars
   instead of baked into the SVG. Set --glyph to the module icon URL. */
.module-badge__glyph {
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}

/* Home — circle */
.module-badge--home {
  background: var(--module-home-soft);
  color: var(--module-home);
  border-radius: 50%;
}

/* Money Matters — rounded square */
.module-badge--money {
  background: var(--module-money-soft);
  color: var(--module-money);
  border-radius: 10px;
}

/* Job Hunt — hexagon */
.module-badge--job {
  background: var(--module-job-soft);
  color: var(--module-job);
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
}

/* Plans & Family — diamond */
.module-badge--plans {
  background: var(--module-plans-soft);
  color: var(--module-plans);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Documents — tag / rectangle */
.module-badge--documents {
  background: var(--module-documents-soft);
  color: var(--module-documents);
  border-radius: 6px;
}

/* People & Care — pill */
.module-badge--care {
  background: var(--module-care-soft);
  color: var(--module-care);
  border-radius: 999px;
}

/* ==========================================================================
   Urgency accent — layered ON TOP of a module badge, never replacing it.
   Structural signals only (border + label), not a color-shade variant of
   the module hue, so it stays legible regardless of which module it's on.
   ========================================================================== */

.urgency-today,
.urgency-overdue {
  position: relative;
}
.urgency-today::after,
.urgency-overdue::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid;
  pointer-events: none;
}
.urgency-today::after   { border-color: var(--status-warning); }
.urgency-overdue::after { border-color: var(--status-danger); }

.urgency-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .1rem .45rem;
  border-radius: 999px;
}
.urgency-label--soon    { background: #f1f4f7; color: var(--muted, #6e7d90); }
.urgency-label--today   { background: #fff4e6; color: var(--status-warning); }
.urgency-label--overdue { background: #fdeceb; color: var(--status-danger); }