/* Atoll's brand foundation for every page the Island home serves (task 17a).
   From docs/atoll-brand-site/dist/assets/brand-guide.md: the palette, the two self-hosted faces,
   and the few primitives every page shares (type, actions, focus, the logo). style.css lays out
   the shell on top of these. Apps people build keep their own look: nothing here reaches them. */

/* DM Sans (variable weight) for UI and body; Instrument Serif italic for a short human turn of
   phrase in a heading, never a paragraph. Both under the SIL Open Font License; the texts are in
   fonts/ beside them. */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The palette, exactly as the guide names it. */
  --atoll-forest: #102C20;   /* text, actions, dark surfaces */
  --atoll-paper: #FFFAF0;    /* the page, and text on forest */
  --atoll-new-leaf: #D0F25B; /* small emphasis, surfaces */
  --atoll-daydream: #C3AAFF; /* large accent surfaces */
  --atoll-clay: #FF815D;     /* small human accents */

  /* The forest family for quieter text (never pale grey at small sizes), lines and tints. */
  --atoll-forest-soft: #41533D;   /* supporting text: 8:1 on paper */
  --atoll-forest-leaf: #24683B;   /* the serif turn of phrase in headings: 6.5:1 on paper */
  --atoll-line: #9BA88B;          /* dividers (decorative) */
  --atoll-edge: #71816A;          /* the edge of a control: 4:1 on paper */
  --atoll-surface: #FFFEF8;       /* a card lifted off the paper */
  --atoll-new-leaf-tint: #ECF8BD;
  --atoll-daydream-tint: #E7DCFF;
  --atoll-clay-tint: #FFD6C7;
  --atoll-clay-deep: #A8381A;     /* Clay's edge on an action that removes something: 6.2:1 on paper */
  --atoll-alert: #A3191F;         /* a refusal: 7.4:1 on paper */

  --atoll-sans: "DM Sans", Arial, sans-serif;
  --atoll-serif: "Instrument Serif", Georgia, serif;
  --atoll-radius: 14px;
  --atoll-pill: 999px;

  color-scheme: light;
}

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

body {
  margin: 0;
  font-family: var(--atoll-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--atoll-forest);
  background: var(--atoll-paper);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--atoll-new-leaf); color: var(--atoll-forest); }

/* Keyboard focus: a forest ring with room around it, on every focusable thing. */
:focus-visible { outline: 3px solid var(--atoll-forest); outline-offset: 3px; }

a { color: var(--atoll-forest); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

/* Headings: DM Sans, confident and tight. An <em> in a heading is the human turn of phrase. */
h1, h2, h3 { font-family: var(--atoll-sans); color: var(--atoll-forest); }
h1 { font-weight: 500; letter-spacing: -.035em; }
h2 { font-weight: 500; letter-spacing: -.02em; }
h3 { font-weight: 600; }
:is(h1, h2) em {
  font-family: var(--atoll-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  letter-spacing: -.02em;
  color: var(--atoll-forest-leaf);
}

/* Actions. The main one is a New leaf pill with a forest edge and a forest shadow, as on the
   brand site; a quiet one is outlined in forest on paper. Every control is at least 44px tall. */
button, a.button {
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .5rem 1.375rem;
  border: 1.5px solid var(--atoll-forest);
  border-radius: var(--atoll-pill);
  background: var(--atoll-new-leaf);
  color: var(--atoll-forest);
  box-shadow: 0 3px 0 var(--atoll-forest);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, color .15s;
}
button:hover, a.button:hover { background: #BDEC3B; box-shadow: 0 5px 0 var(--atoll-forest); }
button:active, a.button:active { box-shadow: 0 1px 0 var(--atoll-forest); }
button.quiet { background: var(--atoll-paper); box-shadow: none; }
button.quiet:hover { background: var(--atoll-forest); color: var(--atoll-paper); box-shadow: none; }
button:disabled, button:disabled:hover {
  cursor: default;
  background: #EDEADF;
  color: var(--atoll-forest-soft);
  border-color: var(--atoll-edge);
  box-shadow: none;
}
/* The ring shows on top of the shadow. */
button:focus-visible, a.button:focus-visible { outline-offset: 5px; }

input, select, textarea {
  font: inherit;
  color: var(--atoll-forest);
  min-height: 48px;
  padding: .625rem .875rem;
  border: 1.5px solid var(--atoll-edge);
  border-radius: 12px;
  background: var(--atoll-surface);
}
input:hover, select:hover, textarea:hover { border-color: var(--atoll-forest); }
input::placeholder { color: var(--atoll-forest-soft); opacity: 1; }

/* The logo: artwork as supplied, never stretched (height set, width follows) or recoloured
   (forest on paper). Clear space of half the symbol's width is kept by the placements in
   style.css. */
[data-atoll-logo] { display: block; flex: none; }
svg[data-atoll-logo] { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}