/* ==========================================================================
   Molt Code — Design Tokens
   Import this first in any HTML that uses the design system.
   ========================================================================== */

/* --- Webfonts -------------------------------------------------------------- */
/* Brand fonts provided by user: Inter (sans) + Fira Code (mono). */

@font-face { font-family: 'Inter'; src: url('fonts/Inter-Light.ttf')    format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf')   format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf')     format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Fira Code'; src: url('fonts/FiraCode-Regular.ttf')  format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('fonts/FiraCode-Medium.ttf')   format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('fonts/FiraCode-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* =====================================================
     Color — Paper & surfaces
     ===================================================== */
  --molt-paper:        #F7EFE6;   /* app chrome / warm cream */
  --molt-paper-warm:   #F1E7DA;   /* menu bar, slightly warmer */
  --molt-paper-cool:   #FAF5EC;   /* tertiary, lighter cream */
  --molt-surface:      #FDFBF7;   /* pane bg / composer bg — near white */
  --molt-surface-raised:#FFFFFF;  /* hovertips, popovers */

  /* =====================================================
     Color — Ink (text)
     ===================================================== */
  --molt-ink:          #2A1F14;   /* primary body text */
  --molt-ink-2:        #5A4E3F;   /* secondary text, labels */
  --molt-ink-3:        #8E8478;   /* tertiary, meta, placeholders */
  --molt-ink-4:        #B8AE9E;   /* quaternary, disabled */

  /* =====================================================
     Color — Brand accent (orange)
     ===================================================== */
  --molt-orange:       #E26A3A;   /* primary accent — use sparingly */
  --molt-orange-soft:  #EC8F65;   /* softer accent */
  --molt-orange-tint:  #F6E6DA;   /* active-row bg tint (~12% on cream) */
  --molt-orange-tint-2:#FAEFE4;   /* hover tint */
  --molt-orange-ink:   #A0421E;   /* orange text on light */

  /* =====================================================
     Color — Neutrals for borders, chips, hovers
     ===================================================== */
  --molt-border:       #EBE3D8;   /* 1px hairlines */
  --molt-border-strong:#DCD2C3;
  --molt-chip:         #EEE7DB;   /* inline code bg, chip fills */
  --molt-chip-strong:  #E3DACD;   /* pressed chip */
  --molt-hover:        #EEE7DB;   /* ghost button hover */

  /* =====================================================
     Color — Semantic (status)
     ===================================================== */
  --molt-danger:       #C04A3A;
  --molt-danger-tint:  #F5DFD8;
  --molt-success:      #5A8C4A;
  --molt-success-tint: #E4EED8;
  --molt-warn:         #B8822A;
  --molt-warn-tint:    #F3E4C4;
  --molt-info:         #4A6F8C;
  --molt-info-tint:    #DDE6ED;

  /* Status dot (user-authored session row) */
  --molt-user-dot:     var(--molt-orange);

  /* =====================================================
     Typography — Families
     ===================================================== */
  --molt-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --molt-font-mono: 'Fira Code', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  --molt-font-display: var(--molt-font-sans); /* no separate display face */

  /* =====================================================
     Typography — Scale (px)
     ===================================================== */
  --molt-fs-display:  32px;
  --molt-fs-h1:       24px;
  --molt-fs-h2:       20px;
  --molt-fs-h3:       17px;
  --molt-fs-body:     15px;
  --molt-fs-small:    13px;
  --molt-fs-meta:     12px;
  --molt-fs-micro:    11px;

  /* Line-heights */
  --molt-lh-tight: 1.2;
  --molt-lh-snug:  1.35;
  --molt-lh-body:  1.55;
  --molt-lh-loose: 1.7;

  /* Weights (we only use 400 / 500 / 600) */
  --molt-fw-regular: 400;
  --molt-fw-medium:  500;
  --molt-fw-semi:    600;

  /* Letter-spacing */
  --molt-tracking-tight:  -0.01em;
  --molt-tracking-normal: 0;
  --molt-tracking-meta:   0.02em;

  /* =====================================================
     Spacing — 4px base
     ===================================================== */
  --molt-space-1:  4px;
  --molt-space-2:  8px;
  --molt-space-3:  12px;
  --molt-space-4:  16px;
  --molt-space-5:  20px;
  --molt-space-6:  24px;
  --molt-space-7:  32px;
  --molt-space-8:  48px;

  /* =====================================================
     Radii
     ===================================================== */
  --molt-radius-xs: 4px;    /* inline tags */
  --molt-radius-sm: 6px;    /* buttons, chips */
  --molt-radius-md: 10px;   /* list rows, tab pills */
  --molt-radius-lg: 12px;   /* cards, composer */
  --molt-radius-xl: 16px;   /* modals */
  --molt-radius-round: 999px;

  /* =====================================================
     Shadow (very light — surface-value > shadow)
     ===================================================== */
  --molt-shadow-0: none;
  --molt-shadow-1: 0 1px 2px rgba(40, 30, 20, 0.04);
  --molt-shadow-2: 0 2px 8px rgba(40, 30, 20, 0.06);
  --molt-shadow-3: 0 8px 24px rgba(40, 30, 20, 0.08);

  /* =====================================================
     Motion
     ===================================================== */
  --molt-dur-1: 120ms;
  --molt-dur-2: 160ms;
  --molt-dur-3: 240ms;
  --molt-ease: cubic-bezier(0.2, 0, 0, 1);

  /* =====================================================
     Focus
     ===================================================== */
  --molt-focus-ring: 0 0 0 2px var(--molt-surface), 0 0 0 4px color-mix(in srgb, var(--molt-orange) 50%, transparent);
}

/* ==========================================================================
   Semantic element styles
   Use these classes OR target them via :where() in bespoke components.
   ========================================================================== */

.molt-reset {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.molt-app {
  font-family: var(--molt-font-sans);
  font-size: var(--molt-fs-body);
  line-height: var(--molt-lh-body);
  color: var(--molt-ink);
  background: var(--molt-paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: var(--molt-tracking-tight);
}

/* Headings --------------------------------------------------------------- */
.molt-h1, h1.molt {
  font-size: var(--molt-fs-h1);
  font-weight: var(--molt-fw-semi);
  line-height: var(--molt-lh-snug);
  letter-spacing: var(--molt-tracking-tight);
  color: var(--molt-ink);
  margin: 0;
}
.molt-h2, h2.molt {
  font-size: var(--molt-fs-h2);
  font-weight: var(--molt-fw-semi);
  line-height: var(--molt-lh-snug);
  color: var(--molt-ink);
  margin: 0;
}
.molt-h3, h3.molt {
  font-size: var(--molt-fs-h3);
  font-weight: var(--molt-fw-medium);
  line-height: var(--molt-lh-snug);
  color: var(--molt-ink);
  margin: 0;
}

/* Body ------------------------------------------------------------------- */
.molt-body, p.molt {
  font-size: var(--molt-fs-body);
  line-height: var(--molt-lh-body);
  color: var(--molt-ink);
}

.molt-body-2 {
  font-size: var(--molt-fs-small);
  line-height: var(--molt-lh-body);
  color: var(--molt-ink-2);
}

.molt-meta {
  font-size: var(--molt-fs-meta);
  line-height: 1.4;
  color: var(--molt-ink-3);
  letter-spacing: var(--molt-tracking-meta);
}

.molt-micro {
  font-size: var(--molt-fs-micro);
  line-height: 1.35;
  color: var(--molt-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--molt-fw-medium);
}

/* Inline code ------------------------------------------------------------ */
.molt-code, code.molt {
  font-family: var(--molt-font-mono);
  font-size: 0.88em;
  background: var(--molt-chip);
  color: var(--molt-ink);
  padding: 1px 6px;
  border-radius: var(--molt-radius-xs);
  letter-spacing: 0;
}

/* Code block ------------------------------------------------------------- */
.molt-pre {
  font-family: var(--molt-font-mono);
  font-size: var(--molt-fs-small);
  line-height: 1.55;
  background: var(--molt-surface);
  border: 1px solid var(--molt-border);
  border-radius: var(--molt-radius-md);
  padding: var(--molt-space-4);
  color: var(--molt-ink);
  overflow-x: auto;
}

/* Links ------------------------------------------------------------------ */
.molt-link, a.molt {
  color: var(--molt-orange);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--molt-orange) 40%, transparent);
  transition: border-color var(--molt-dur-1) var(--molt-ease);
}
.molt-link:hover, a.molt:hover {
  border-bottom-color: var(--molt-orange);
}

/* Bullets --------------------------------------------------------------- */
ul.molt {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
ul.molt > li {
  position: relative;
  padding-left: var(--molt-space-5);
  margin-bottom: var(--molt-space-3);
  line-height: var(--molt-lh-body);
}
ul.molt > li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--molt-ink-3);
}

/* Utility: the spark pulse animation for active agents ----------------- */
@keyframes molt-spark-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(0.92); }
}
.molt-spark-pulse { animation: molt-spark-pulse 1.6s ease-in-out infinite; }