/* ISH Academy shared design system, phase-one candidate v1.0, 2026-09-06.
   Inform, Innovate and Learn must all consume this file. It is the single source
   for colour, typography, spacing, motion and accessibility-switch states. */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Fjalla+One&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;0,800;1,400;1,700&display=swap");

@font-face {
  font-family: "OpenDyslexic";
  src: url("/shared/fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OpenDyslexic";
  src: url("/shared/fonts/OpenDyslexic-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Colour */
  --ink: #111111;
  --paper: #ffffff;
  --surface: #faf7ef;
  --surface-raised: #fffdf8;
  --muted: #57534e;
  --rule: #111111;
  --blue: #005287;
  --crimson: #d30d44;
  --lime: #b3d234;
  --orange: #f26648;
  --purple: #9b56a2;
  --on-solid: #ffffff;
  --on-accent: #111111;
  --link: var(--blue);
  --link-hover: var(--crimson);
  --primary: var(--blue);
  --cta: var(--crimson);
  --current: var(--crimson);
  --cat-curious: var(--lime);
  --cat-connected: var(--orange);
  --cat-compassionate: var(--purple);
  --tint-blue: #d9e7f0;
  --tint-crimson: #fadce4;
  --tint-lime: #eef5d0;
  --tint-orange: #fde2da;
  --tint-purple: #eaddec;
  --focus: var(--purple);
  --dot: #c8dce8;
  --veil: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-display: "Fjalla One", sans-serif;
  --font-marker: "Fjalla One", sans-serif;
  --font-body: "Source Sans 3", sans-serif;
  --font-dyslexic: "Atkinson Hyperlegible", "OpenDyslexic", sans-serif;
  --font-size-root: 18px;
  --font-weight-regular: 400;
  --font-weight-semi: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-body: 1.58;
  --line-tight: 0.94;
  --line-heading: 1.04;
  --line-dyslexic: 1.78;
  --track-label: 0.1em;
  --track-nav: 0.025em;
  --text-label: 1rem;
  --text-small: 1rem;
  --text-body: 1.06rem;
  --text-lede: clamp(1.15rem, 1.6vw, 1.42rem);
  --text-nav: 1.25rem;
  --text-h3: clamp(1.35rem, 2vw, 1.72rem);
  --text-h2: clamp(2.05rem, 4vw, 3.8rem);
  --text-h1: clamp(2.75rem, 5.8vw, 4.888rem);
  --text-grid-hero: clamp(2.75rem, 4.75vw, 4.2rem);
  --text-hero: clamp(3rem, 6.5vw, 4.888rem);
  --measure: 65ch;
  --measure-tight: 48ch;

  /* Spacing and layout */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-fluid: clamp(1rem, 3vw, 2.5rem);
  --space-section: clamp(3.5rem, 8vw, 7rem);
  --content: 78rem;
  --content-narrow: 65rem;
  --header-logo-min: 10rem;
  --header-logo-width: 12.75rem;
  --school-logo-width: 12.5rem;
  --footer-logo-width: 13.5rem;
  --hero-logo-width: 30rem;
  --hero-logo-compact: 20rem;
  --hero-editorial-min: 17rem;
  --hero-poster-min: 18.5rem;
  --hero-grid-min: 18rem;
  --tile-min-height: 10rem;
  --card-min-width: 15rem;
  --date-column-width: 5.5rem;
  --mark-size: 8rem;
  --dot-cell: 2.5rem;
  --dot-size: 0.16rem;
  --poster-angle: -6deg;
  --icon-button-size: 2.85rem;
  --touch-target: 2.75rem;
  --rule-width: 2px;
  --rule-width-high: 3px;
  --rule-style: solid;
  --border: var(--rule-width) var(--rule-style) var(--rule);
  --shadow-step: 0.25rem;
  --shadow-lift-step: 0.42rem;
  --shadow: var(--shadow-step) var(--shadow-step) 0 var(--rule);
  --shadow-lift: var(--shadow-lift-step) var(--shadow-lift-step) 0 var(--rule);
  --lift-distance: 0.18rem;
  --radius: 0;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-linear: linear;
  --duration-fast: 160ms;
  --duration-enter: 560ms;
  --duration-hero: 18s;
  --duration-drift: 11s;
  --stagger: 90ms;

  /* Layers */
  --layer-base: 0;
  --layer-content: 2;
  --layer-nav: 20;
  --layer-tooltip: 40;
}

/* High contrast is deliberately monochrome; meaning is repeated in text labels. */
:root[data-contrast="high"] {
  --ink: #000000;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --muted: #000000;
  --rule: #000000;
  --blue: #000000;
  --crimson: #000000;
  --lime: #000000;
  --orange: #000000;
  --purple: #000000;
  --link: #0000cc;
  --link-hover: #000000;
  --primary: #000000;
  --cta: #000000;
  --current: #000000;
  --on-solid: #ffffff;
  --on-accent: #ffffff;
  --cat-curious: #000000;
  --cat-connected: #000000;
  --cat-compassionate: #000000;
  --tint-blue: #ffffff;
  --tint-crimson: #ffffff;
  --tint-lime: #ffffff;
  --tint-orange: #ffffff;
  --tint-purple: #ffffff;
  --dot: #000000;
  --veil: rgba(255, 255, 255, 0);
  --rule-width: var(--rule-width-high);
  --shadow-step: 0.32rem;
}

:root[data-font="dyslexic"] {
  --font-display: var(--font-dyslexic);
  --font-body: var(--font-dyslexic);
  --line-body: var(--line-dyslexic);
  --line-heading: 1.18;
  --line-tight: 1.12;
  --track-label: 0.055em;
  --measure: 60ch;
}

:root[data-font="dyslexic"] em,
:root[data-font="dyslexic"] i {
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  font-size: var(--font-size-root);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: var(--space-0);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-body);
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
summary,
a {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration-thickness: var(--rule-width);
  text-underline-offset: var(--space-1);
}

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

:focus-visible {
  outline: var(--rule-width-high) var(--rule-style) var(--focus);
  outline-offset: var(--space-1);
}

h1,
h2,
h3,
.ish-display {
  max-width: var(--measure-tight);
  margin: var(--space-0);
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-heading);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

p {
  max-width: var(--measure);
}

.ish-label {
  margin: var(--space-0);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-label);
  line-height: var(--line-heading);
  text-transform: uppercase;
}

.ish-shell {
  width: min(calc(100% - (2 * var(--space-fluid))), var(--content));
  margin-inline: auto;
}

.ish-skip {
  position: fixed;
  z-index: var(--layer-tooltip);
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  transform: translateY(calc(-100% - var(--space-10)));
}

.ish-skip:focus {
  transform: translateY(var(--space-0));
}

.ish-box {
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.ish-box--lift {
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.ish-box--lift:hover,
.ish-box--lift:focus-within {
  box-shadow: var(--shadow-lift);
  transform: translate(calc(-1 * var(--lift-distance)), calc(-1 * var(--lift-distance)));
}

.ish-topbar {
  position: relative;
  z-index: var(--layer-nav);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--space-10);
  padding: var(--space-3) var(--space-fluid);
  border-bottom: var(--border);
  background: var(--primary);
  color: var(--on-solid);
}

.ish-topbar__brand {
  display: inline-flex;
  align-items: center;
  min-width: var(--header-logo-min);
}

.ish-topbar__wordmark {
  width: var(--header-logo-width);
  min-width: var(--header-logo-min);
  height: auto;
}

.ish-topbar__school {
  width: var(--school-logo-width);
  height: auto;
  margin-left: auto;
}

.ish-topbar__tools {
  display: flex;
  gap: var(--space-2);
}

.ish-switch {
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-heading);
}

.ish-switch::before {
  content: "○";
  margin-right: var(--space-2);
}

.ish-switch[aria-pressed="true"]::before {
  content: "●";
  color: var(--crimson);
}

.ish-sections {
  position: relative;
  z-index: var(--layer-nav);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--border);
  background: var(--paper);
}

.ish-sections a {
  position: relative;
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border-right: var(--border);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-nav);
  letter-spacing: var(--track-nav);
  line-height: var(--line-heading);
  text-align: center;
  text-decoration: none;
}

.ish-sections a:last-child {
  border-right: var(--space-0);
}

.ish-sections a[aria-current="page"] {
  background: var(--current);
  color: var(--on-solid);
}

.ish-sections a:hover:not([aria-current="page"]),
.ish-sections a:focus-visible:not([aria-current="page"]) {
  background: var(--tint-blue);
}

.ish-sections a[data-tooltip]::after {
  position: absolute;
  z-index: var(--layer-tooltip);
  top: calc(100% + var(--space-2));
  left: 50%;
  width: max-content;
  max-width: var(--measure-tight);
  padding: var(--space-2) var(--space-3);
  border: var(--border);
  background: var(--ink);
  color: var(--paper);
  content: attr(data-tooltip);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: normal;
  line-height: var(--line-body);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-1 * var(--space-2)));
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.ish-sections a[data-tooltip]:hover::after,
.ish-sections a[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, var(--space-0));
}

.ish-chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: var(--border);
  color: var(--on-accent);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--track-label);
  line-height: var(--line-heading);
  text-transform: uppercase;
}

.ish-chip--curious {
  background: var(--cat-curious);
}

.ish-chip--connected {
  background: var(--cat-connected);
}

.ish-chip--compassionate {
  background: var(--cat-compassionate);
  color: var(--on-solid);
}

.ish-footer {
  margin-top: var(--space-section);
  border-top: var(--border);
  background: var(--surface);
}

.ish-footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding-block: var(--space-8);
}

.ish-footer-brand__academy {
  width: var(--footer-logo-width);
  min-width: var(--header-logo-min);
  height: auto;
}

.ish-footer-brand__school {
  width: var(--school-logo-width);
  height: auto;
}

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

@keyframes ish-enter {
  from {
    opacity: 0;
    transform: translateY(var(--space-6));
  }
  to {
    opacity: 1;
    transform: translateY(var(--space-0));
  }
}

@keyframes ish-dot-drift {
  from {
    background-position: var(--space-0) var(--space-0);
  }
  to {
    background-position: var(--space-10) var(--space-10);
  }
}

@keyframes ish-float {
  0%,
  100% {
    transform: translate(var(--space-0), var(--space-0));
  }
  50% {
    transform: translate(var(--space-4), calc(-1 * var(--space-4)));
  }
}

.ish-enter > * {
  animation: ish-enter var(--duration-enter) var(--ease-out) both;
}

.ish-enter > :nth-child(2) {
  animation-delay: calc(var(--stagger) * 1);
}

.ish-enter > :nth-child(3) {
  animation-delay: calc(var(--stagger) * 2);
}

.ish-enter > :nth-child(4) {
  animation-delay: calc(var(--stagger) * 3);
}

.ish-enter > :nth-child(5) {
  animation-delay: calc(var(--stagger) * 4);
}

.ish-enter > :nth-child(6) {
  animation-delay: calc(var(--stagger) * 5);
}

@media (max-width: 56rem) {
  .ish-topbar {
    flex-wrap: wrap;
  }

  .ish-topbar__tools {
    width: 100%;
  }

  .ish-switch {
    flex: 1;
  }
}

@media (max-width: 40rem) {
  .ish-topbar {
    gap: var(--space-3);
  }

  .ish-topbar__wordmark {
    width: var(--header-logo-min);
  }

  .ish-topbar__school {
    display: none;
  }

  .ish-sections a {
    padding-inline: var(--space-2);
    font-size: var(--text-body);
  }

  .ish-sections a[data-tooltip]::after {
    display: none;
  }

  .ish-footer-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .ish-footer-brand__school {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}