/* ==========================================================================
   Project Townsville - main.css
   Design tokens, base element styles, accessibility primitives.

   Every value the visual language spec defines lives here as a custom
   property. Components reference these properties. No component file
   carries a raw hex value, a one-off radius or a one-off shadow.
   ========================================================================== */

:root {
  /* --- Brand palette (client supplied swatch sheet) --------------------- */
  --color-surface:        #F5FFFF; /* page background, light surfaces        */
  --color-surface-white:  #FFFFFF; /* raised light surface                   */
  --color-ink:            #081D2D; /* body text, dark surfaces, footer       */
  --color-action:         #1570BF; /* links, buttons, active states          */
  --color-cyan:           #22CCF2; /* accent, never text on light surfaces   */
  --color-yellow:         #FFD900; /* accent, never text on light surfaces   */

  /* --- Derived values, not brand colors --------------------------------- */
  /* Tints of --color-ink. Used for the second line of two-tone headings,
     muted body copy and hairline rules. Contrast verified against
     --color-surface: ink-muted 5.31:1, passes AA for normal text.          */
  --color-ink-muted:      #5E6C76;
  --color-ink-faint:      #CFD4D7; /* decorative hairline on light surfaces  */
  --color-hairline:       #CFD4D7;
  --color-hairline-dark:  rgba(245, 255, 255, 0.16);
  --color-action-hover:   #10589A; /* darkened action for hover              */
  --color-cyan-text:      #09809B; /* cyan family text on light backgrounds  */
  --color-yellow-text:    #8A7500; /* yellow family text on light backgrounds*/
  --color-tile:           rgba(21, 112, 191, 0.10); /* icon tile fill        */

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, sans-serif;
  /* Base size is 17px, not 16px. The audience spans 25 to 65 and the site
     carries long explanatory copy. See brief section 6.                     */
  --font-size-base: 1.0625rem;
  --line-height-base: 1.65;
  --line-height-tight: 1.1;

  /* --- Structure -------------------------------------------------------- */
  --container-max:  1200px;
  --container-pad:  1.5rem;
  --space-section:      7.5rem; /* 120px, desktop section padding           */
  --space-section-sm:   4rem;   /* mobile section padding                   */

  /* --- Component tokens ------------------------------------------------- */
  --radius-media: 14px;  /* images only                                     */
  --radius-tile:  8px;   /* small icon tiles only                           */
  --radius-pill:  999px; /* buttons only                                    */
  --hairline-weight: 1px;
  --tap-target: 44px;

  /* --- Motion ----------------------------------------------------------- */
  --transition-base: 160ms ease-in-out;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--line-height-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 { font-weight: 700; }

/* h4 to h6 were not specified by the client. Derived from the reference,
   which drops to the body family at small sizes. Recorded in the brief. */
h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
}

p {
  max-width: 68ch;
}

a {
  color: var(--color-action);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color var(--transition-base);
}

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

strong {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Focus and skip link
   Focus is never suppressed. Both are WCAG 2.2 requirements.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--color-action);
  outline-offset: 3px;
  border-radius: 2px;
}

.on-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-cyan);
}

.skip-to-main {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background-color: var(--color-ink);
  color: var(--color-surface);
  padding: 0.875rem 1.5rem;
  font-weight: 600;
  text-decoration: none;
}

.skip-to-main:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}