/* Structural base styles only: layout, spacing, readable
   typography. Every declaration value below is var(--...) from
   tokens.css - zero literal colors, fonts or radii here (R3.12).
   Decorative styling arrives with the m12 design pass (skin.css). */

* {
  box-sizing: var(--box-sizing);
}

body {
  margin: var(--body-margin);
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: var(--body-line-height);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: var(--heading-line-height);
  margin: var(--heading-margin);
}

p {
  margin: var(--paragraph-margin);
}

a {
  color: var(--color-accent);
}

.site-header {
  padding: var(--header-padding);
  border-bottom: var(--border-width) solid var(--color-border);
  background-color: var(--color-surface);
}

.site-nav {
  display: var(--nav-display);
  gap: var(--nav-gap);
  max-width: var(--nav-max-width);
  margin: var(--nav-margin);
}

.site-nav-link {
  text-decoration: var(--text-decoration-none);
}

.content {
  max-width: var(--content-max-width);
  margin: var(--content-margin);
  padding: var(--content-padding);
}

.flash-messages {
  margin-bottom: var(--flash-margin);
}

.flash-message {
  padding: var(--flash-padding);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
}

.site-footer {
  padding: var(--footer-padding);
  border-top: var(--border-width) solid var(--color-border);
  color: var(--color-text-muted);
}

.contact-form {
  display: var(--form-display);
  flex-direction: var(--form-direction);
  gap: var(--form-gap);
}

.form-field {
  display: var(--field-display);
  flex-direction: var(--field-direction);
  gap: var(--field-gap);
}

.form-label {
  font-weight: var(--font-weight-bold);
}

.form-input,
.form-textarea {
  padding: var(--input-padding);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-background);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-small);
}

.form-submit {
  align-self: var(--submit-align);
  padding: var(--submit-padding);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-background);
  background-color: var(--color-accent);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-medium);
}

.error-page-link {
  display: var(--link-display);
  margin-top: var(--link-margin-top);
}

/* m06 advisor chat: structural styles only (grayscale, no brand
   values) — every value below is var(--...) from tokens.css. The
   floating-panel skin arrives with the m12 design pass. */

.advisor-transcript {
  list-style: var(--advisor-list-style);
  padding: var(--advisor-list-padding);
  margin: var(--paragraph-margin);
}

.advisor-message {
  padding: var(--flash-padding);
  margin-bottom: var(--space-1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
}

.advisor-message-role {
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-2);
}

.advisor-message-undelivered {
  display: var(--link-display);
  margin-left: var(--space-2);
  color: var(--color-text-muted);
}

.advisor-milestone-row {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}

.advisor-milestone-remove {
  display: var(--field-display);
  gap: var(--field-gap);
}

.advisor-panel-mount {
  min-height: var(--space-1);
}

.advisor-panel {
  position: var(--advisor-panel-position);
  right: var(--space-3);
  bottom: var(--space-3);
  width: var(--advisor-panel-width);
  max-height: var(--advisor-panel-max-height);
  overflow-y: var(--advisor-panel-overflow);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-background);
  padding: var(--space-2);
}

.advisor-panel-hidden {
  display: var(--advisor-panel-hidden-display);
}

.advisor-panel-header {
  display: var(--nav-display);
  justify-content: var(--advisor-panel-header-justify);
  cursor: var(--advisor-panel-header-cursor);
}

.advisor-panel-log {
  list-style: var(--advisor-list-style);
  padding: var(--advisor-list-padding);
  margin: var(--space-2) 0;
}

.advisor-panel-status {
  color: var(--color-text-muted);
  min-height: var(--space-3);
}