/* =========================================================================
   RNZAF Avionics Reunion — Design Tokens
   colors_and_type.css
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700&family=Cinzel:wght@500;600;700&display=swap");

/* -------------------------------------------------------------------------
   Root tokens
   ------------------------------------------------------------------------- */
:root {
  /* ── Brand colours — pulled from the RNZAF roundel + NZDF Air Force theme ── */
  --rnzaf-blue:        #0A2240;  /* deep navy — primary ink + surface */
  --rnzaf-blue-700:    #14315A;  /* hover on blue surfaces */
  --rnzaf-blue-500:    #1D4A82;  /* mid blue, e.g. headings on bone */
  --airforce-sky:      #31B3E8;  /* NZDF Air Force theme — links, accents */
  --airforce-sky-300:  #8AD3F2;  /* hover lift */
  --ensign-light:      #7FB7D4;  /* supporting wash, borders */
  --ensign-pale:       #DCEDF6;  /* light fills, hover backgrounds */
  --kiwi-red:          #C8102E;  /* alerts, upcoming reunion, restricted */
  --kiwi-red-700:      #9A0C24;  /* red hover */

  /* ── Neutrals ── */
  --bone:              #F6F4EE;  /* page background — warm, archival */
  --bone-50:           #FBFAF6;  /* lifted card on bone */
  --white:             #FFFFFF;
  --black:             #111418;  /* body text */
  --field-grey:        #5B6770;  /* secondary text, captions */
  --field-grey-300:    #A6AEB5;  /* disabled, faint rules */
  --field-grey-100:    #E2E5E8;  /* divider lines on bone */

  /* ── Semantic colour roles ── */
  --bg:                var(--bone);
  --bg-elevated:       var(--white);
  --bg-inverse:        var(--rnzaf-blue);

  --fg:                var(--black);
  --fg-muted:          var(--field-grey);
  --fg-inverse:        var(--bone);
  --fg-link:           var(--rnzaf-blue);
  --fg-link-hover:     var(--airforce-sky);
  --fg-alert:          var(--kiwi-red);

  --border:            var(--field-grey-100);
  --border-strong:     var(--ensign-light);
  --border-input:      rgba(10, 34, 64, 0.15);

  --focus-ring:        var(--airforce-sky);

  /* ── Typography ── */
  --font-display:      "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:         "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-heritage:     "Cinzel", "Trajan Pro", "Optima", Georgia, serif;
  --font-mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.12em;
  --tracking-caps:   0.18em;

  /* ── Spacing scale (4-based) ── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ── Radii ── */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;        /* avoid for primary chrome */
  --r-pill: 999px;      /* badges and status pips only */
  --r-full: 50%;        /* the roundel and avatars */

  /* ── Borders ── */
  --bw-hair: 1px;
  --bw-bold: 2px;
  --bw-rule: 4px;       /* section dividers */

  /* ── Shadows ── */
  --shadow-sm:  0 1px 2px rgba(10, 34, 64, 0.08);
  --shadow-md:  0 4px 16px rgba(10, 34, 64, 0.12);
  --shadow-lg:  0 12px 32px rgba(10, 34, 64, 0.18);
  --shadow-inset: inset 0 0 0 1px rgba(10, 34, 64, 0.06);

  /* ── Protection gradient for photographic heroes ── */
  --hero-veil: linear-gradient(180deg,
                 rgba(10, 34, 64, 0.20) 0%,
                 rgba(10, 34, 64, 0.55) 50%,
                 rgba(10, 34, 64, 0.85) 100%);

  /* ── Motion ── */
  --ease:       cubic-bezier(0.2, 0, 0, 1);
  --d-fast:     120ms;
  --d-normal:   180ms;
  --d-slow:     320ms;
}

/* -------------------------------------------------------------------------
   Element styles — these map semantic HTML to the token system
   ------------------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--rnzaf-blue);
  line-height: var(--lh-tight);
  margin: 0;
}

h1 {
  font-size: var(--fs-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
}

h4 {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

p {
  margin: 0 0 var(--s-4) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg);
  text-wrap: pretty;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--d-normal) var(--ease);
}
a:hover { color: var(--fg-link-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Special-purpose classes ------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--airforce-sky);
}

.heritage {
  font-family: var(--font-heritage);
  letter-spacing: var(--tracking-wide);
}

.year-stamp {
  font-family: var(--font-heritage);
  font-weight: 600;
  font-size: var(--fs-5xl);
  color: var(--kiwi-red);
  letter-spacing: 0.04em;
  line-height: 1;
}

.alert-text {
  color: var(--kiwi-red);
  font-weight: 700;
}