/* =============================================================================
   Adelaide Design System — extracted tokens
   Source: storybook.adelaide.edu.au (Core/Colours, Core/Typography)
   Generated from extracted Storybook HTML.

   AGENT NOTE (for Claude Code / AI coding agents):
   Each token below carries a `← use for:` side note describing its intended
   role. Prefer the var(--au-*) token over a raw hex/px value when generating
   markup or styles. Match the *role* described in the note, not just the
   colour — e.g. use --au-error-500 for error text, not "any red".
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     Colours
     --------------------------------------------------------------------------- */

  /* Primary — brand navy. Core brand surfaces, headers, primary buttons. */
  --au-primary-darker:  #080620; /* ← use for: deepest backgrounds, near-black brand fills */
  --au-primary-dark:    #0C0930; /* ← use for: dark hero/header backgrounds, hover on primary */
  --au-primary-default: #140F50; /* ← use for: PRIMARY brand colour — main buttons, key UI accents */
  --au-primary-light:   #433F73; /* ← use for: secondary text on light bg, muted brand elements */
  --au-primary-lighter: #F3F3F6; /* ← use for: subtle page/section background tint */

  /* Secondary — bright blue. Links, interactive/focus states, info accents. */
  --au-secondary-darker:  #081D66; /* ← use for: pressed/active state of secondary actions */
  --au-secondary-dark:    #0C2B99; /* ← use for: hover state of links/secondary buttons */
  --au-secondary-default: #1448FF; /* ← use for: links, focus rings, interactive accent */
  --au-secondary-light:   #436DFF; /* ← use for: lighter interactive accents, visited-ish states */
  --au-secondary-lighter: #F3F6FF; /* ← use for: selected-row / info-tint backgrounds */

  /* Tertiary — warm cream. Soft section backgrounds, cards, callouts. */
  --au-tertiary-darker:  #63605A; /* ← use for: muted body/caption text on cream */
  --au-tertiary-dark:    #958F86; /* ← use for: borders/dividers on warm surfaces */
  --au-tertiary-default: #F8EFE0; /* ← use for: warm section/card background fill */
  --au-tertiary-light:   #F9F2E6; /* ← use for: lighter warm background variant */
  --au-tertiary-lighter: #FFFEFD; /* ← use for: near-white warm page background */

  /* Accent — purple. Highlights, badges, subheader bands, decorative emphasis. */
  --au-accent-darker:  #4F4099; /* ← use for: accent text/icons needing contrast */
  --au-accent-dark:    #6956CC; /* ← use for: subheader band background (.sub-header) */
  --au-accent-default: #836BFF; /* ← use for: decorative accent fills, badges, highlights */
  --au-accent-light:   #9C89FF; /* ← use for: hover/lighter accent surfaces */
  --au-accent-lighter: #E6E1FF; /* ← use for: accent-tint background behind emphasised content */

  /* Neutral — greys. Text, borders, surfaces. The everyday UI scale. */
  --au-neutral-800:   #3B4145; /* ← use for: DEFAULT body text colour */
  --au-neutral-700:   #586167; /* ← use for: secondary/muted text, labels */
  --au-neutral-500:   #93A2AC; /* ← use for: placeholder text, disabled text, icons */
  --au-neutral-200:   #D4DADE; /* ← use for: borders, dividers, input outlines */
  --au-neutral-50:    #FAFAFB; /* ← use for: page background, subtle surface fill */
  --au-neutral-black: #000000; /* ← use for: pure-black only where explicitly required */
  --au-neutral-white: #FFFFFF; /* ← use for: card/page surfaces, text on dark backgrounds */

  /* Digital validation — semantic status. Use ONLY for the matching state. */
  --au-info-500:    #0074E0; /* ← use for: informational text/icon/border */
  --au-info-50:     #E5F2FF; /* ← use for: informational banner/alert background */
  --au-success-500: #04B600; /* ← use for: success text/icon/border */
  --au-success-50:  #E8FFE7; /* ← use for: success banner/alert background */
  --au-warning-500: #FC8E28; /* ← use for: warning text/icon/border */
  --au-warning-50:  #FFDFC2; /* ← use for: warning banner/alert background */
  --au-error-500:   #D32362; /* ← use for: error/validation text, invalid input border */
  --au-error-50:    #FFE9F1; /* ← use for: error banner/alert background */

  /* ---------------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------------- */

  /* Font families */
  --au-font-heading: "National 2 Condensed", sans-serif; /* ← use for: all headings, labels, subheaders (display type) */
  --au-font-body:    "Roboto Serif", serif;              /* ← use for: body copy, paragraphs, links (running text) */

  /* Font weights */
  --au-font-weight-regular: 400; /* ← use for: body text, links */
  --au-font-weight-medium:  500; /* ← use for: h4–h6, labels, subheaders */
  --au-font-weight-bold:    700; /* ← use for: h1–h3, strong emphasis */

  /* Headings — pair size with its matching line + weight; always heading font. */
  --au-h1-size: 58px;   --au-h1-line: 62px;   --au-h1-weight: var(--au-font-weight-bold);   /* ← use for: page title, hero (one per page) */
  --au-h2-size: 48px;   --au-h2-line: 52px;   --au-h2-weight: var(--au-font-weight-bold);   /* ← use for: major section heading */
  --au-h3-size: 32px;   --au-h3-line: 36px;   --au-h3-weight: var(--au-font-weight-bold);   /* ← use for: subsection heading */
  --au-h4-size: 28px;   --au-h4-line: 32px;   --au-h4-weight: var(--au-font-weight-medium); /* ← use for: card titles, minor sections */
  --au-h5-size: 24px;   --au-h5-line: 28px;   --au-h5-weight: var(--au-font-weight-medium); /* ← use for: small headings, list group titles */
  --au-h6-size: 21px;   --au-h6-line: 24px;   --au-h6-weight: var(--au-font-weight-medium); /* ← use for: smallest heading / eyebrow */

  /* Body */
  --au-body-size:       16px;  --au-body-line:       24px; /* ← use for: default paragraph text */
  --au-body-small-size: 14px;  --au-body-small-line: 20px; /* ← use for: captions, fine print, helper/meta text */

  /* Label / Subheader / Link */
  --au-label-size: 18px;     --au-label-line: 24px;  /* ← use for: form field labels (.form-label) */
  --au-subheader-size: 24px; --au-subheader-line: 28px; /* ← use for: subheader band (.sub-header), section eyebrow */
  --au-link-size: 16px;      --au-link-line: 24px;   /* ← use for: inline text links (matches body size) */
}

/* =============================================================================
   Base typography
   ========================================================================== */

/* ← use for: global default text. Sets body font, 16/24, neutral-800.
   Every page inherits this — don't restate these on each element. */
body {
  font-family: var(--au-font-body);
  font-size: var(--au-body-size);
  line-height: var(--au-body-line);
  letter-spacing: 0;
  color: var(--au-neutral-800);
}

/* ← use for: any h1–h6. Shared heading font + reset; size set per-level below. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--au-font-heading);
  letter-spacing: 0;
  margin: 0 0 0.5em;
}

h1 { font-size: var(--au-h1-size); line-height: var(--au-h1-line); font-weight: var(--au-h1-weight); }
h2 { font-size: var(--au-h2-size); line-height: var(--au-h2-line); font-weight: var(--au-h2-weight); }
h3 { font-size: var(--au-h3-size); line-height: var(--au-h3-line); font-weight: var(--au-h3-weight); }
h4 { font-size: var(--au-h4-size); line-height: var(--au-h4-line); font-weight: var(--au-h4-weight); }
h5 { font-size: var(--au-h5-size); line-height: var(--au-h5-line); font-weight: var(--au-h5-weight); }
h6 { font-size: var(--au-h6-size); line-height: var(--au-h6-line); font-weight: var(--au-h6-weight); }

/* ← use for: inline small/fine print — wrap text in <small>. */
small {
  font-size: var(--au-body-small-size);
  line-height: var(--au-body-small-line);
}

/* ← use for: text links. Body font, secondary-blue. Add hover via --au-secondary-dark. */
a {
  font-family: var(--au-font-body);
  font-size: var(--au-link-size);
  line-height: var(--au-link-line);
  font-weight: var(--au-font-weight-regular);
  color: var(--au-secondary-default);
}

/* ← use for: form field labels — pair every input with a .form-label. */
.form-label,
.au-form .form-label {
  font-family: var(--au-font-heading);
  font-weight: var(--au-font-weight-medium);
  font-size: var(--au-label-size);
  line-height: var(--au-label-line);
  letter-spacing: 0;
}

/* ← use for: a coloured subheader band (purple bg, white text) above a section. */
.sub-header {
  font-family: var(--au-font-heading);
  font-weight: var(--au-font-weight-medium);
  font-size: var(--au-subheader-size);
  line-height: var(--au-subheader-line);
  letter-spacing: 0;
  padding: 8px;
  background-color: var(--au-accent-dark);
  color: var(--au-neutral-white);
}

/* ← use for: caption text under images/figures/tables. */
.caption {
  font-size: var(--au-body-small-size);
  line-height: var(--au-body-small-line);
}

/* =============================================================================
   Utility classes  (au-bg-* / au-txtcolor-*)
   ========================================================================== */

/* Background
   ← use for: applying a background fill in markup without writing CSS.
   Pattern: au-bg-<group>-<shade>. Each maps to the matching --au-* token,
   so the "use for:" note on that token in :root applies here too.
   Pair dark fills (primary/secondary/accent *-default and darker) with
   .au-txtcolor-neutral-white for readable text. */
.au-bg-primary-darker    { background-color: var(--au-primary-darker); }
.au-bg-primary-dark      { background-color: var(--au-primary-dark); }
.au-bg-primary-default   { background-color: var(--au-primary-default); }
.au-bg-primary-light     { background-color: var(--au-primary-light); }
.au-bg-primary-lighter   { background-color: var(--au-primary-lighter); }
.au-bg-secondary-darker  { background-color: var(--au-secondary-darker); }
.au-bg-secondary-dark    { background-color: var(--au-secondary-dark); }
.au-bg-secondary-default { background-color: var(--au-secondary-default); }
.au-bg-secondary-light   { background-color: var(--au-secondary-light); }
.au-bg-secondary-lighter { background-color: var(--au-secondary-lighter); }
.au-bg-tertiary-darker   { background-color: var(--au-tertiary-darker); }
.au-bg-tertiary-dark     { background-color: var(--au-tertiary-dark); }
.au-bg-tertiary-default  { background-color: var(--au-tertiary-default); }
.au-bg-tertiary-light    { background-color: var(--au-tertiary-light); }
.au-bg-tertiary-lighter  { background-color: var(--au-tertiary-lighter); }
.au-bg-accent-darker     { background-color: var(--au-accent-darker); }
.au-bg-accent-dark       { background-color: var(--au-accent-dark); }
.au-bg-accent-default    { background-color: var(--au-accent-default); }
.au-bg-accent-light      { background-color: var(--au-accent-light); }
.au-bg-accent-lighter    { background-color: var(--au-accent-lighter); }
.au-bg-neutral-800       { background-color: var(--au-neutral-800); }
.au-bg-neutral-700       { background-color: var(--au-neutral-700); }
.au-bg-neutral-500       { background-color: var(--au-neutral-500); }
.au-bg-neutral-200       { background-color: var(--au-neutral-200); }
.au-bg-neutral-50        { background-color: var(--au-neutral-50); }
.au-bg-neutral-black     { background-color: var(--au-neutral-black); }
.au-bg-neutral-white     { background-color: var(--au-neutral-white); }
.au-bg-info-500          { background-color: var(--au-info-500); }
.au-bg-info-50           { background-color: var(--au-info-50); }
.au-bg-success-500       { background-color: var(--au-success-500); }
.au-bg-success-50        { background-color: var(--au-success-50); }
.au-bg-warning-500       { background-color: var(--au-warning-500); }
.au-bg-warning-50        { background-color: var(--au-warning-50); }
.au-bg-error-500         { background-color: var(--au-error-500); }
.au-bg-error-50          { background-color: var(--au-error-50); }

/* Text colour
   ← use for: setting text colour in markup without writing CSS.
   Pattern: au-txtcolor-<group>-<shade>, mapping to the matching --au-* token.
   Defaults: body text is already neutral-800 — only add a class to override.
   Use semantic shades for status text (au-txtcolor-error-500 for validation
   messages, -success-500 for confirmations, etc.). */
.au-txtcolor-primary-darker    { color: var(--au-primary-darker); }
.au-txtcolor-primary-dark      { color: var(--au-primary-dark); }
.au-txtcolor-primary-default   { color: var(--au-primary-default); }
.au-txtcolor-primary-light     { color: var(--au-primary-light); }
.au-txtcolor-primary-lighter   { color: var(--au-primary-lighter); }
.au-txtcolor-secondary-darker  { color: var(--au-secondary-darker); }
.au-txtcolor-secondary-dark    { color: var(--au-secondary-dark); }
.au-txtcolor-secondary-default { color: var(--au-secondary-default); }
.au-txtcolor-secondary-light   { color: var(--au-secondary-light); }
.au-txtcolor-secondary-lighter { color: var(--au-secondary-lighter); }
.au-txtcolor-tertiary-darker   { color: var(--au-tertiary-darker); }
.au-txtcolor-tertiary-dark     { color: var(--au-tertiary-dark); }
.au-txtcolor-tertiary-default  { color: var(--au-tertiary-default); }
.au-txtcolor-tertiary-light    { color: var(--au-tertiary-light); }
.au-txtcolor-tertiary-lighter  { color: var(--au-tertiary-lighter); }
.au-txtcolor-accent-darker     { color: var(--au-accent-darker); }
.au-txtcolor-accent-dark       { color: var(--au-accent-dark); }
.au-txtcolor-accent-default    { color: var(--au-accent-default); }
.au-txtcolor-accent-light      { color: var(--au-accent-light); }
.au-txtcolor-accent-lighter    { color: var(--au-accent-lighter); }
.au-txtcolor-neutral-800       { color: var(--au-neutral-800); }
.au-txtcolor-neutral-700       { color: var(--au-neutral-700); }
.au-txtcolor-neutral-500       { color: var(--au-neutral-500); }
.au-txtcolor-neutral-200       { color: var(--au-neutral-200); }
.au-txtcolor-neutral-50        { color: var(--au-neutral-50); }
.au-txtcolor-neutral-black     { color: var(--au-neutral-black); }
.au-txtcolor-neutral-white     { color: var(--au-neutral-white); }
.au-txtcolor-info-500          { color: var(--au-info-500); }
.au-txtcolor-info-50           { color: var(--au-info-50); }
.au-txtcolor-success-500       { color: var(--au-success-500); }
.au-txtcolor-success-50        { color: var(--au-success-50); }
.au-txtcolor-warning-500       { color: var(--au-warning-500); }
.au-txtcolor-warning-50        { color: var(--au-warning-50); }
.au-txtcolor-error-500         { color: var(--au-error-500); }
.au-txtcolor-error-50          { color: var(--au-error-50); }