/* ============================================================
   moodlog Design System, tokens + base + brand primitives
   Single stylesheet consumed by the Django templates. Font
   @font-face lives inline in base.djhtml (needs {% static %}).
   Governance: emotion hues come ONLY from the 8-color palette;
   ink for emotion text/links, raw fill for fills/marks; slate
   is the one neutral. Color is the content, the UI stays
   slate-neutral so feeling is the only vivid thing.
   ============================================================ */

:root {
  /* ---- Plutchik emotion fills (identity colors) ---- */
  --emo-joy: #F7E761;
  --emo-trust: #A4E57E;
  --emo-fear: #4DA35A;
  --emo-surprise: #7FC8F5;
  --emo-sadness: #4F75D2;
  --emo-disgust: #D66BF2;
  --emo-anger: #E04242;
  --emo-anticipation: #F9A84D;
  --emo-default: #E2E8F0;

  /* ---- Emotion ink (text-safe, darkened, hue-matched) ---- */
  --ink-joy: #9A7B00;
  --ink-trust: #3F8B2E;
  --ink-fear: #2E6E3B;
  --ink-surprise: #1E7FC4;
  --ink-sadness: #3A57A8;
  --ink-disgust: #A03FC0;
  --ink-anger: #C12B2B;
  --ink-anticipation: #C77A1E;

  /* ---- Slate (the one neutral UI ramp) ---- */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --white: #FFFFFF;

  /* ---- Semantic neutral aliases ---- */
  --bg-page: var(--slate-50);
  --surface-card: var(--white);
  --border-default: var(--slate-200);
  --border-strong: var(--slate-300);
  --text-body: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-placeholder: var(--slate-400);

  /* ---- Action (the only "loud" non-emotion color) ---- */
  --action-bg: var(--slate-900);
  --action-bg-hover: var(--slate-800);
  --action-fg: var(--white);

  /* ---- Semantic accents (banners / status) ---- */
  --success-bg: #ECFDF5;
  --success-fg: #064E3B;
  --success-border: #A7F3D0;
  --error-bg: #FFF1F2;
  --error-fg: #881337;
  --error-border: #FECDD3;
  --info-bg: #EFF6FF;
  --info-fg: #3B82F6;
  --feature-bg: #FAF5FF;
  --feature-fg: #A855F7;
  --warning-bg: #FEF3C7;
  --warning-fg: #D97706;

  /* ---- Opacity scale for emotion-tinted surfaces ---- */
  --opacity-chip-bg: 0.15;
  --opacity-dyad-bg: 0.13;
  --opacity-dyad-border: 0.30;
  --opacity-chart-bar: 0.50;
  --opacity-overlay: 0.30;
  --opacity-disabled: 0.50;

  /* ---- Families ---- */
  --font-ui: "DM Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (xs is the floor, never smaller) ---- */
  --text-3xl: 1.875rem;
  --text-2xl: 1.5rem;
  --text-xl: 1.25rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-chip: 0.6875rem;
  --text-dyad: 0.625rem;

  /* ---- Weights ---- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---- Wordmark ---- */
  --wordmark-weight: 700;
  --wordmark-tracking: -0.03em;

  /* ---- Spacing (4px grid) ---- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s8: 2rem;

  /* ---- Radius ---- */
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-full: 9999px;

  /* ---- Elevation (soft, low shadows only) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   Base, DM Sans is the product face; mono is the lab signal.
   Root is nudged to 17px so the whole rem-based UI (Tailwind
   type + spacing) reads a touch larger and calmer by default.
   ============================================================ */
html {
  font-size: 17px;
}
body {
  font-family: var(--font-ui);
  color: var(--text-body);
  background-color: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Mono is opt-in: timestamps, counts, tokens, metadata. Tabular figures
   keep data honest. Apply via .font-mono / [data-mono] or the elements below. */
.font-mono,
code,
kbd,
samp,
time,
[data-mono] {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}

::selection {
  background-color: var(--emo-surprise);
  color: var(--slate-900);
}

/* ============================================================
   Wordmark, lowercase `moodlog` (no trailing period).
   ============================================================ */
.wordmark {
  font-family: var(--font-ui);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-tracking);
  color: var(--text-body);
  line-height: 1;
}

/* ============================================================
   Nav pill, header navigation (migrated from base.djhtml).
   ============================================================ */
.nav-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-full);
  padding: 0.35rem 1rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
  color: var(--text-secondary);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.nav-pill.is-active {
  background-color: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-fg);
}
.nav-pill:not(.is-active):hover {
  background-color: var(--slate-50);
  border-color: var(--border-default);
  color: var(--slate-900);
}

/* ============================================================
   Emotion chip, the signature primitive. fill @15% background,
   fill border, slate-900 text. Untagged is dashed slate, not an
   emotion. Per-emotion fill/ink set inline (server computes it).
   The × correction affordance is always one click away.
   ============================================================ */
.ml-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: var(--text-chip);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--slate-900);
  border: 1px solid var(--emo-default);
}
.ml-chip--untagged {
  background: var(--slate-50);
  color: var(--text-muted);
  border: 1px dashed var(--border-default);
}
.ml-chip__kaomoji {
  display: none; /* revealed only in opt-in kaomoji mode */
  margin-left: 2px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
[data-kaomoji="1"] .ml-chip__kaomoji {
  display: inline;
}
.ml-chip__remove {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--slate-400);
  transition: color 120ms ease;
}
.ml-chip__remove:hover {
  color: var(--ink-anger);
}

/* ============================================================
   Dyad pill, Plutchik primary dyad. color = a.ink,
   bg = a.fill @13%, border = a.fill @30% (set inline).
   ============================================================ */
.ml-dyad {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--r-full);
  font-family: var(--font-ui);
  font-size: var(--text-dyad);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  white-space: nowrap;
}