/* ============================================================
   AKDN / AKES Design Tokens
   Source: AKES "Brand and Writing Style Guide" + AKDN Style
   Guidelines v8.0 (April 2024).

   [DECLARED]  = taken verbatim from the guidelines.
   [DERIVED]   = added to make a working UI; NOT brand-official.
                 Confirm with the Communications team.
   ============================================================ */

/* Gotham ships here as .otf/.ttf only, so those are the only sources listed (a missing .woff2 meant a 404 per face per page).
   ---- Brand webfonts — auto-pickup, no code change needed ----
   These files don't exist yet, so every @font-face below fails to load
   and the browser silently falls through to the next name in the
   font-family stack (Arial). The moment a real, licensed file is saved
   at the exact path/name below, the next page load picks it up —
   nothing else needs to change. See the README in each font folder for
   the exact expected filenames. Only source these from a licensed
   distributor — see docs/comms-signoff-request.md. */
@font-face {
  font-family: "Gotham";
  src: url("/portal-assets/fonts/gotham/Gotham-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/portal-assets/fonts/gotham/Gotham-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/portal-assets/fonts/gotham/Gotham-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/portal-assets/fonts/gotham/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gotham";
  src: url("/portal-assets/fonts/gotham/Gotham-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ITC New Baskerville";
  src: url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Roman.woff2") format("woff2"),
       url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ITC New Baskerville";
  src: url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Italic.woff2") format("woff2"),
       url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "ITC New Baskerville";
  src: url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Bold.woff2") format("woff2"),
       url("/portal-assets/fonts/itc-new-baskerville/ITCNewBaskerville-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand colours [DECLARED] ---- */
  --color-brand-green: #00843D;      /* RGB 0,132,61 · CMYK 93,0,98,17 · Pantone 348C */
  --color-black:       #000000;
  --color-white:       #FFFFFF;

  /* ---- Interactive / neutral scale [DERIVED] ---- */
  --color-green-hover:   #006E33;
  --color-green-active:  #005A2A;
  --color-green-subtle:  #E6F2EB;
  --color-green-border:  #B3D6C1;
  --color-focus-ring:    #00843D;

  --color-grey-900: #1A1A1A;         /* primary text */
  --color-grey-700: #4D4D4D;         /* secondary text */
  --color-grey-500: #808080;         /* muted / placeholder */
  --color-grey-300: #CCCCCC;         /* borders / dividers */
  --color-grey-100: #F2F2F2;         /* surfaces / cards */

  --color-danger:  #B00020;
  --color-warning: #8A6D00;
  --color-success: var(--color-brand-green);

  /* ---- Semantic aliases (use these in components) ---- */
  --text-primary:    var(--color-grey-900);
  --text-secondary:  var(--color-grey-700);
  --text-on-green:   var(--color-white);
  --surface:         var(--color-white);
  --surface-muted:   var(--color-grey-100);
  --border:          var(--color-grey-300);
  --accent:          var(--color-brand-green);
  --accent-hover:    var(--color-green-hover);

  /* ---- Font families [DECLARED families, roles DERIVED] ---- */
  --font-sans:   "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-serif:  "ITC New Baskerville", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-system: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;   /* [DECLARED] preferred emphasis, incl. headings */

  /* ---- Type scale [DERIVED from doc sizes] ---- */
  --text-display: 2.5rem;   --lh-display: 1.1;   --ls-display: -0.02em;
  --text-h1:      2rem;     --lh-h1: 1.15;       --ls-h1: -0.015em;
  --text-h2:      1.5rem;   --lh-h2: 1.2;        --ls-h2: -0.01em;
  --text-h3:      1.25rem;  --lh-h3: 1.3;
  --text-body:    1rem;     --lh-body: 1.5;
  --text-table:   0.9375rem;--lh-table: 1.4;     /* one step below body, per guide */
  --text-small:   0.8125rem;--lh-small: 1.4;

  /* ---- Spacing [DERIVED · 4px base] ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-8: 3rem;    --space-10: 4rem;

  /* ---- Radius [DERIVED · brand mark must stay square] ---- */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px;
}

/* ---- Dark mode [DERIVED] ----
   The greys/surface/text aliases above are light-mode-only flat values —
   the guide doesn't define a dark palette. Rather than invent a second,
   possibly-clashing dark grey scale, these route through the template's
   own already-tuned dark palette (main.css's [data-theme=dark] block,
   toggled by wwwroot/portal-assets/js/theme.js) so body text, borders and
   surfaces stay legible instead of rendering near-black text on a
   near-black background. Brand green itself fails AA contrast on dark
   surfaces (3.39:1) — same fix already applied to --accent-color in
   main.css: a lightened tint for dark mode only, flat green in light mode. */
[data-theme=dark] {
  --text-primary:   var(--heading-color);
  --text-secondary: var(--muted-color);
  --surface:         var(--surface-color);
  --surface-muted:   var(--background-color);
  --border:          var(--border-color);
  --color-grey-900:  var(--heading-color);
  --color-grey-700:  var(--muted-color);
  --color-grey-500:  var(--muted-color);
  --color-grey-300:  var(--border-color);
  --color-grey-100:  var(--surface-color);
  --accent:          #40A36E;
  --accent-hover:    #59AF81;
  --color-focus-ring: #40A36E;
}

/* ---- Base element defaults that encode the guide's rules ----
   Enabled: body font, heading sizes, and link underline behaviour now
   apply site-wide. Gotham/ITC New Baskerville are licensed and loaded
   (see wwwroot/portal-assets/fonts/), and full-site compliance has been
   authorized. */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface);
}

h1, h2, h3, h4 { font-weight: var(--weight-bold); }
h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }

a { color: var(--accent); text-decoration: underline; }
a:hover { color: var(--accent-hover); }
:where(h1,h2,h3,h4,p,span):not(a) { text-decoration: none; }

strong, b { font-weight: var(--weight-bold); }
em, i { font-style: italic; }

table { font-size: var(--text-table); line-height: var(--lh-table); }

/* Keyboard focus must be visible (accessibility floor) — safe to enable now,
   it only strengthens an existing outline, doesn't change brand look. */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}