/*
 * Components. References tokens.css by name only — no literal colours or
 * fonts below this line.
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: radial-gradient(var(--cork-dots) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-color: var(--cork);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
}

/* ---- header ---- */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px dashed var(--ink-line);
}

.wordmark {
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: var(--text-xl);
}

.wordmark span {
  color: var(--red);
}

/* ---- greeting (walking skeleton) ---- */

.greeting {
  text-align: center;
  padding: var(--space-5) var(--space-4);
}

.greeting h1 {
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.greeting h1 mark {
  background: linear-gradient(transparent 58%, var(--note-yellow) 58%);
  padding: 0 var(--space-1);
}

.greeting .sub {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

/* Loading and error states are not decoration here: the walking skeleton
   exists to prove the API round trip, so a failed fetch must be visible
   rather than silently rendering a default (constitution Principle VII). */

.greeting[data-state="loading"] .sub::after {
  content: " …";
}

.greeting-error {
  display: none;
  margin: var(--space-4) auto 0;
  max-width: 34rem;
  background: var(--note-yellow);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hard-ink);
  padding: var(--space-4);
  text-align: left;
}

.greeting[data-state="error"] .greeting-error {
  display: block;
}

.greeting-error strong {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  display: block;
  margin-bottom: var(--space-1);
}

.greeting-error code {
  font-size: var(--text-sm);
  word-break: break-all;
  color: var(--ink-soft);
}