/* Chama Daylight — the token layer this app paints with.
   Values are the design system's; nothing here is invented and no extra hues are added. */

:root {
  /* palette */
  --cd-cream: #FBF5E7;       /* page field — never a pure-white page */
  --cd-card: #FFFFFF;        /* cards only */
  --cd-ink: #1A1A1A;         /* text — never #000 */
  --cd-badge: #C6713A;       /* the one accent: CTAs, selection, links, zone badge */
  --cd-badge-hover: #A85C2C;
  --cd-badge-active: #96501F;
  --cd-sage: #6A7A5A;        /* italic subtitles, quiet highlights */
  --cd-muted: #8A8072;       /* kickers, captions */
  --cd-rule: #DFD4C0;        /* hairlines */
  --cd-cream-alt: #FCFAF5;   /* zebra rows */

  /* semantic aliases */
  --surface-page: var(--cd-cream);
  --surface-card: var(--cd-card);
  --surface-zebra: var(--cd-cream-alt);
  --text-body: var(--cd-ink);
  --text-subtitle: var(--cd-sage);
  --text-muted: var(--cd-muted);
  --text-on-accent: var(--cd-cream);
  --accent: var(--cd-badge);
  --border-hairline: var(--cd-rule);
  --link: var(--cd-badge);
  --link-hover: var(--cd-badge-hover);

  /* type */
  --cd-serif: Lora, Georgia, serif;
  --cd-sans: Lato, "Helvetica Neue", Arial, sans-serif;
  --cd-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--cd-serif);
  --font-body: var(--cd-sans);
  --fs-kicker: 12px;  --ls-kicker: 0.12em;
  --fs-subtitle: 24px;
  --fs-body: 17px;    --lh-body: 1.55;
  --fs-caption: 11px; --ls-caption: 0.1em;

  /* geometry */
  --radius-card: 14px; --radius-button: 10px; --radius-input: 10px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;
  --hairline: 1px solid var(--cd-rule);

  /* app-only: the 3D field is one shade under the page cream */
  --scene-paper: #ECE5D3;
  /* app-only: problem state. reads as a warning without adding a brand hue */
  --warn-ink: #7A1F19;
  --warn-field: #F6E7DF;
}

* { box-sizing: border-box; }

/* hidden beats any display rule this stylesheet sets */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;               /* the app owns its own scrolling regions */
  overscroll-behavior: none;
}

body {
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--cd-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ---- text roles ---- */
.cd-kicker {
  font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.cd-subtitle {
  font-family: var(--cd-serif); font-style: italic; font-weight: 400;
  font-size: var(--fs-subtitle); color: var(--text-subtitle); margin: 0;
}
.cd-caption {
  font-weight: 700; font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--text-muted);
}
.mono { font-family: var(--cd-mono); }

/* ---- controls ---- */
.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 22px; border: none; border-radius: var(--radius-button);
  background: var(--accent); color: var(--text-on-accent);
  font-family: var(--cd-sans); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background 140ms linear, color 140ms linear;
}
.cd-btn:hover { background: var(--cd-badge-hover); }
.cd-btn:active { background: var(--cd-badge-active); }
.cd-btn--ghost { background: transparent; color: var(--text-body); border: 1px solid var(--cd-ink); }
.cd-btn--ghost:hover { background: var(--surface-zebra); color: var(--text-body); }
.cd-btn[disabled] { opacity: 0.5; cursor: default; }

.cd-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--cd-rule);
  border-radius: var(--radius-input); background: var(--surface-card);
  font-family: var(--cd-sans); font-size: 16px; color: var(--text-body);
}
.cd-input:focus { outline: none; border-color: var(--accent); }

/* the one "icon" the brand owns */
.cd-zone-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  color: var(--text-on-accent); font-weight: 700; font-size: 14px; line-height: 1; flex: none;
}

/* a visible focus ring everywhere, drawn in the accent */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* screen-reader-only text (colour tiles carry their name this way) */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}