/* ============================================================
   Primrose & Eve — Design Tokens
   Warm-neutral identity · Primrose plum + Eve gold
   Light leads · dark fully specified
   ============================================================ */

:root{
  /* — Brand —————————————————————————————— */
  --pe-primrose:      #8A5A6B;   /* primary brand · dusty plum-rose */
  --pe-primrose-deep: #6E4555;   /* pressed / on-tint text */
  --pe-primrose-tint: #EFE2E5;   /* wash behind brand elements */
  --pe-eve:           #C2895A;   /* accent · warm evening gold */
  --pe-eve-deep:      #A66F40;
  --pe-eve-tint:      #F3E7D7;

  /* — Neutrals (warm) ———————————————————— */
  --pe-canvas:    #F2ECE6;   /* app background · warm paper */
  --pe-surface:   #FBF8F4;   /* cards */
  --pe-raised:    #FFFFFF;   /* rare top layer */
  --pe-ink:       #322D2E;   /* primary text · warm near-black */
  --pe-ink-2:     #6A615E;   /* secondary text */
  --pe-ink-3:     #9C918B;   /* tertiary / captions */
  --pe-hairline:  #E6DCD1;   /* borders, dividers */
  --pe-hairline-2:#EFE7DD;

  /* — Semantic (warm-tuned, never neon) ——— */
  --pe-success:      #5F7E63;   /* eucalyptus */
  --pe-success-tint: #E2EAE0;
  --pe-warning:      #C2893E;   /* ochre */
  --pe-warning-tint: #F4E8D4;
  --pe-destructive:  #AF534A;   /* terracotta brick */
  --pe-destructive-tint:#F2DEDA;

  /* — Mark accent (logo petal) ——————————— */
  --pe-mark-accent: var(--pe-eve);

  /* — Radius ————————————————————————————— */
  --pe-r-card: 22px;
  --pe-r-tile: 16px;
  --pe-r-btn:  14px;
  --pe-r-chip: 999px;

  /* — Shadow (soft, warm, low) ——————————— */
  --pe-shadow-sm: 0 1px 2px rgba(60,44,40,.05);
  --pe-shadow:    0 1px 2px rgba(60,44,40,.04), 0 10px 26px rgba(60,44,40,.07);
  --pe-shadow-lg: 0 2px 6px rgba(60,44,40,.05), 0 24px 56px rgba(60,44,40,.12);

  /* — Type ——————————————————————————————— */
  --pe-serif: "Newsreader", "New York", Georgia, "Times New Roman", serif;
  --pe-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;

  --pe-space: 4px;
}

/* Dark mode — "Eve" evening ritual */
[data-mode="dark"]{
  --pe-primrose:      #C68FA1;
  --pe-primrose-deep: #D9A9B7;
  --pe-primrose-tint: #3A2F33;
  --pe-eve:           #D7A773;
  --pe-eve-deep:      #E6BE91;
  --pe-eve-tint:      #38302A;

  --pe-canvas:    #1A1617;
  --pe-surface:   #241F20;
  --pe-raised:    #2C2627;
  --pe-ink:       #F1EAE5;
  --pe-ink-2:     #B6ABA5;
  --pe-ink-3:     #8A7F7A;
  --pe-hairline:  #383031;
  --pe-hairline-2:#322B2C;

  --pe-success:      #82A485;
  --pe-success-tint: #2A332A;
  --pe-warning:      #D7A75E;
  --pe-warning-tint: #36301F;
  --pe-destructive:  #D08A82;
  --pe-destructive-tint:#3A2926;

  --pe-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --pe-shadow:    0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.5);
  --pe-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.6);
}

/* ============================================================
   Reusable component primitives (used by spec page + screens)
   ============================================================ */

.pe-card{
  background: var(--pe-surface);
  border-radius: var(--pe-r-card);
  border: 1px solid var(--pe-hairline);
  box-shadow: var(--pe-shadow);
}

/* Buttons */
.pe-btn{
  font-family: var(--pe-sans);
  font-size: 17px; font-weight: 600;
  border: none; cursor: pointer;
  border-radius: var(--pe-r-btn);
  padding: 15px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter .15s ease, transform .05s ease;
  letter-spacing: -0.01em;
}
.pe-btn:active{ transform: translateY(1px); }
.pe-btn--primary{ background: var(--pe-primrose); color: #fff; }
[data-mode="dark"] .pe-btn--primary{ color: #211A1D; }
.pe-btn--primary:hover{ filter: brightness(1.05); }
.pe-btn--secondary{
  background: transparent; color: var(--pe-primrose);
  box-shadow: inset 0 0 0 1.5px var(--pe-primrose);
}
.pe-btn--ghost{ background: var(--pe-primrose-tint); color: var(--pe-primrose-deep); }
.pe-btn--destructive{ background: transparent; color: var(--pe-destructive);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pe-destructive) 55%, transparent); }
.pe-btn--block{ width: 100%; }

/* Chips / trigger tags */
.pe-chip{
  font-family: var(--pe-sans); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px 8px 11px;
  border-radius: var(--pe-r-chip);
  background: var(--pe-surface);
  color: var(--pe-ink-2);
  border: 1px solid var(--pe-hairline);
  cursor: pointer; transition: all .15s ease;
}
.pe-chip svg{ width: 16px; height: 16px; }
.pe-chip[aria-pressed="true"]{
  background: var(--pe-primrose); color: #fff; border-color: var(--pe-primrose);
}
[data-mode="dark"] .pe-chip[aria-pressed="true"]{ color:#211A1D; }

/* Severity scale — restyled 5 dots */
.pe-sev{ display: inline-flex; align-items: center; gap: 9px; }
.pe-sev__dot{
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--pe-hairline);
  background: transparent;
  position: relative; transition: all .18s cubic-bezier(.4,0,.2,1);
}
.pe-sev__dot.on{
  border-color: transparent;
  background: var(--pe-primrose);
  box-shadow: 0 0 0 4px var(--pe-primrose-tint);
}
.pe-sev__dot.on.s4{ background: var(--pe-eve-deep); box-shadow:0 0 0 4px var(--pe-eve-tint);}
.pe-sev__dot.on.s5{ background: var(--pe-destructive); box-shadow:0 0 0 4px var(--pe-destructive-tint);}

/* Small caption label */
.pe-eyebrow{
  font-family: var(--pe-sans); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pe-ink-3);
}