/*
  site.css for thedeveco.org

  Three tier colour tokens: primitives, then semantic, then component.
  Components never reference a primitive directly. See docs/BRAND.md and
  LOCK.md item 3.

  Radius, spacing, measure, and type are a flat scale that components
  reference directly. This is deliberate and recorded in CHANGELOG.md.

  No third party requests. No @font-face in this unit: the real fonts arrive
  in a later unit with measured metric overrides. System stack for now.
*/

:root {
  /* Tier 1, primitives. Hex codes appear only in this block. */
  --c-paper:    #FBFAF8;
  --c-white:    #FFFFFF;
  --c-sunken:   #EFF5F3;
  --c-ink-900:  #0E1F1D;
  --c-ink-700:  #1E3B37;
  --c-ink-500:  #3C5F5A;
  --c-teal-700: #11574E;
  --c-teal-600: #17705F; /* held for the dark mode remap, deliberately unused */
  --c-sand-700: #8A5D14;
  --c-sand-100: #F6ECD9;
  --c-grey-600: #5C625F;
  --c-grey-200: #E2E4E1;

  /* Tier 2, semantic. var(--c-...) references appear only in this block. */
  --color-surface:         var(--c-paper);
  --color-surface-raised:  var(--c-white);
  --color-surface-sunken:  var(--c-sunken);
  --color-surface-inverse: var(--c-ink-900);
  --color-text:            var(--c-ink-900);
  --color-text-muted:      var(--c-grey-600);
  --color-text-inverse:    var(--c-white);
  --color-accent:          var(--c-teal-700);
  --color-accent-hover:    var(--c-ink-700);
  --color-link:            var(--c-teal-700);
  --color-highlight:       var(--c-sand-700);
  --color-highlight-wash:  var(--c-sand-100);
  --color-border-hairline: var(--c-grey-200);
  --color-border-strong:   var(--c-ink-500);
  --color-focus-outer:     var(--c-ink-900);
  --color-focus-inner:     var(--c-paper);

  /* Tier 3, component. Colour tokens alias tier 2 semantic tokens. The radius
     component tokens alias the flat --radius scale rather than a colour token,
     because the three tier rule governs colour. See CHANGELOG.md. */

  /* Site chrome */
  --nav-bg:            var(--color-surface);
  --nav-text:          var(--color-text);
  --nav-text-active:   var(--color-accent);
  --nav-border:        var(--color-border-hairline);

  --footer-bg:         var(--color-surface-sunken);
  --footer-text:       var(--color-text);
  --footer-text-muted: var(--color-text-muted);
  --footer-link:       var(--color-link);
  --footer-border:     var(--color-border-hairline);

  /* Content */
  --card-bg:           var(--color-surface-raised);
  --card-text:         var(--color-text);
  --card-text-muted:   var(--color-text-muted);
  --card-border:       var(--color-border-strong);
  --card-radius:       var(--radius);

  --link-color:        var(--color-link);
  --link-color-hover:  var(--color-accent-hover);

  --button-bg:         var(--color-accent);
  --button-text:       var(--color-text-inverse);
  --button-bg-hover:   var(--color-accent-hover);
  --button-radius:     var(--radius);

  --tag-bg:            var(--color-highlight-wash);
  --tag-text:          var(--color-highlight);
  --tag-radius:        var(--radius);

  /* State */
  --focus-ring-outer:  var(--color-focus-outer);
  --focus-ring-inner:  var(--color-focus-inner);

  /* Skip link. Added in this unit, aliases tier 2 only. */
  --skiplink-bg:       var(--color-surface-inverse);
  --skiplink-text:     var(--color-text-inverse);

  /* Spacing, radius, and measure. Flat scale, referenced directly. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --radius:   4px;
  --measure:  68ch;

  /* Type. Flat scale, referenced directly. No px for any size or leading. */
  --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-lg:   1.1875rem;
  --text-h4:   1.125rem;
  --text-h3:   1.375rem;
  --text-h2:   clamp(1.5rem, 1.15rem + 1.4vw, 1.875rem);
  --text-h1:   clamp(2rem, 1.4rem + 2.6vw, 2.75rem);

  --leading-tight:   1.15;
  --leading-heading: 1.25;
  --leading-body:    1.6;
}

/* Base
   ------------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3, h4, p, ul {
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text);
}

h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-heading); }
h3 { font-size: var(--text-h3); line-height: var(--leading-heading); }
h4 { font-size: var(--text-h4); line-height: var(--leading-heading); }

a {
  color: var(--link-color);
  transition: color 0.15s ease;
}

a:hover {
  color: var(--link-color-hover);
}

/* Focus indicator, two tone, mandatory. See docs/BRAND.md and LOCK.md item 6.
   Never remove either ring, and never suppress the focus outline anywhere. */
:focus-visible {
  outline: 3px solid var(--color-focus-outer);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--color-focus-inner);
}

/* Layout
   ------------------------------------------------------------------------ */

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Skip link
   ------------------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--skiplink-bg);
  color: var(--skiplink-text);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-5)));
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Header
   ------------------------------------------------------------------------ */

.site-header {
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--nav-text);
  text-decoration: none;
  padding: var(--space-2);
}

.primary-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.primary-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  color: var(--nav-text);
  text-decoration: none;
  border-radius: var(--radius);
}

.primary-nav a:hover {
  color: var(--link-color-hover);
  text-decoration: underline;
}

.primary-nav a[aria-current="page"] {
  color: var(--nav-text-active);
  font-weight: 700;
}

/* Main
   ------------------------------------------------------------------------ */

main {
  padding-block: var(--space-8);
}

main .wrap > * + * {
  margin-top: var(--space-5);
}

/* Section spacing is at least 4rem. See docs/BRAND.md. */
main .wrap > h2 {
  margin-top: var(--space-8);
}

.lead {
  font-size: var(--text-lg);
}

.start-list {
  list-style: none;
  padding: 0;
}

.start-list li + li {
  margin-top: var(--space-4);
}

.start-list a {
  font-weight: 700;
}

/* A link presented on its own line, rather than inline in a sentence, is not
   exempt from the 24px target size the way an inline link is. inline-block
   plus vertical padding keeps its hit area at least 24 CSS pixels tall. See
   docs/ACCESSIBILITY.md, 2.5.8 Target Size. */
.action-link {
  display: inline-block;
  padding-block: var(--space-1);
}

/* Footer
   ------------------------------------------------------------------------ */

.site-footer {
  margin-top: var(--space-9);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.site-footer .wrap {
  padding-block: var(--space-8);
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  color: var(--footer-link);
  text-decoration: underline;
  border-radius: var(--radius);
}

.site-footer p {
  color: var(--footer-text);
}

.site-footer p + p {
  margin-top: var(--space-3);
}

.licence {
  color: var(--footer-text-muted);
  font-size: var(--text-sm);
}

/* Reduced motion. There is almost no motion here, so this is short. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}