/* Segerstrom Project Intelligence, shared stylesheet.
   Layered tokens and utilities on top of the inline Tailwind config in head-snippet.html.
   Palette derives from .tmp/design-references/ (DESIGN.md prose + code.html + screen.png). */

:root {
  --bg:                 #FAF7F2;
  --surface:            #FFFFFF;
  --sidebar:            #FDFCFB;
  --ink:                #3D2A35;
  --muted:              #7A7268;
  --action-black:       #1A1A1A;
  --action-black-hover: #000000;
  --hairline:           #EBE5DC;
  --success-bg:         #F4F7F4;
  --success-dot:        #909C83;
  --danger:             #BA1A1A;
  --peach:              #FDBF90;
}

html, body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tabular {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.card {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: border-color 200ms ease;
}
.card:hover { border-color: var(--muted); }
.card-accent-hover:hover { border-color: var(--action-black); }

.agent-prompt-button {
  background-color: var(--action-black);
  color: #FFFFFF;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 150ms ease;
}
.agent-prompt-button:hover {
  background-color: var(--action-black-hover);
}
.agent-prompt-button .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.prompt-pill {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9999px;
  transition: border-color 150ms ease;
}
.prompt-pill:focus-within { border-color: var(--ink); }
.prompt-pill input {
  background: transparent;
  border: 0;
  outline: none;
  font-family: 'Noto Serif', Georgia, serif;
  font-style: italic;
  color: var(--ink);
}
.prompt-pill input::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.rule-h {
  height: 1px;
  background-color: var(--hairline);
  width: 100%;
}

.label-caps-tint {
  background-color: var(--bg);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}