/**
 * @file
 * FAO-aligned colour palette for swalim_theme.
 *
 * WHY THIS FILE EXISTS
 * Loaded in the `global` library immediately AFTER css/tokens.css, so every
 * colour token below overrides whatever tokens.css set. Nothing in tokens.css
 * is deleted — if this file is removed from the library, the theme reverts.
 * Once the values here are agreed, fold them into tokens.css and delete this.
 *
 * It also fixes a real bug: components were relying on token fallbacks like
 * var(--x, #fff), so any token tokens.css defined with a dark value produced
 * dark text on a dark ground. Every token a component uses is now defined
 * here explicitly, so no component depends on a fallback.
 *
 * SOURCE
 * Values marked [FAO] are from the FAO Design System (design-system.fao.org,
 * v2.36). Values marked [SWALIM] are extensions — FAO's system has no green
 * or brown, which SWALIM needs for water, land and natural resources work.
 * The FAO logo itself is Pantone 279; it is never recoloured, so it is not a
 * palette entry.
 *
 * CONTRAST
 * Every pairing used in the theme was measured against WCAG 2.1. Ratios are
 * noted inline. AA needs 4.5:1 for body text, 3:1 for large text and UI.
 *
 * THE ORANGE RULE
 * FAO orange #F58320 is 2.58:1 against white — it FAILS as a ground for white
 * text. Use it with dark ink (6.17:1), or as a rule, underline, icon or
 * hover state. Never white text on orange.
 */

:root {

  /* Core FAO --------------------------------------------------------------
     Primary blue is the identity colour: links, buttons, active states.
     Deep blue is FAO's "caption" tone — the workhorse for dark sections,
     and far safer than a mid blue at 9.78:1 against white. */

  --swalim-color-blue:            #116AAB;  /* [FAO] Primary. White text 5.72:1 */
  --swalim-color-blue-deep:       #1C4767;  /* [FAO] Caption. White text 9.78:1 */
  --swalim-color-blue-darkest:    #13334A;  /* [SWALIM] darker step for legal bars */
  --swalim-color-blue-pale:       #E5ECF4;  /* [FAO] Primary light — tint grounds */
  --swalim-color-blue-un:         #5792C9;  /* [FAO] UN blue — accents on dark only */

  /* Thematic extensions ---------------------------------------------------
     Green reads as water and vegetation, brown as land and soil. Both are
     tuned to clear 7:1 against white so they can carry white text at any
     size without a second thought. */

  --swalim-color-green:           #24614A;  /* [SWALIM] White text 7.28:1 */
  --swalim-color-green-light:     #2E7D5E;  /* [SWALIM] hover/lighter step */
  --swalim-color-brown:           #7A4E24;  /* [SWALIM] Land/NRM. White text 7.14:1 */
  --swalim-color-brown-light:     #8A5A2B;  /* [SWALIM] hover/lighter step */

  /* Accent ----------------------------------------------------------------
     FAO orange is the alert and emphasis colour. See THE ORANGE RULE above:
     it takes dark text, never white. The -on-dark variant is lightened so it
     can be used for small text on the deep blue grounds. */

  --swalim-color-accent:          #F58320;  /* [FAO] Orange. Dark ink 6.17:1 */
  --swalim-color-accent-on-dark:  #F9A64A;  /* [SWALIM] On deep blue 4.93:1 */
  --swalim-color-accent-ink:      #12261D;  /* text colour to use ON orange */
  --swalim-color-emergency:       #980000;  /* [FAO] flood/drought alerts only */

  /* Neutrals --------------------------------------------------------------
     Body text is a soft near-black rather than pure #000: 9.34:1 on white,
     easier to read over long passages, and it stops headings looking
     heavier than the FAO blue beside them. */

  --swalim-color-ink:             #1A1A1A;  /* Headings. On white 17.4:1 */
  --swalim-color-ink-body:        #3D4852;  /* Body. On white 9.34:1 */
  --swalim-color-ink-muted:       #545454;  /* [FAO] Gray dark. On white 7.57:1 */
  --swalim-color-rule:            #D9DEE3;  /* borders, hairlines */
  --swalim-color-surface:         #FFFFFF;
  --swalim-color-surface-muted:   #F7F8F9;  /* [FAO] White FAO */
  --swalim-color-surface-tint:    #F2F2F2;  /* [FAO] Gray light */

  /* Text on dark grounds --------------------------------------------------
     These are what the disappearing-heading bug was about. Anything sitting
     on blue-deep, green or brown MUST use these, never --swalim-color-ink. */

  --swalim-color-on-dark:         #FFFFFF;  /* On blue-deep 9.78:1 */
  --swalim-color-on-dark-muted:   #C3D4E3;  /* On blue-deep 6.45:1 */
  --swalim-color-on-dark-rule:    rgb(255 255 255 / 0.18);

  /* Aliases ---------------------------------------------------------------
     The component files were written against these names before the palette
     moved to FAO blue. Kept as aliases so nothing had to be renamed and any
     component not yet updated still resolves to a correct colour. */

  --swalim-color-brand:           var(--swalim-color-blue);
  --swalim-color-brand-deep:      var(--swalim-color-blue-deep);
  --swalim-color-brand-darkest:   var(--swalim-color-blue-darkest);
  --swalim-color-on-brand:        var(--swalim-color-on-dark);
  --swalim-color-on-brand-muted:  var(--swalim-color-on-dark-muted);

  /* Section rhythm --------------------------------------------------------
     One value drives the vertical gap between every homepage block, so the
     page can be tightened or loosened from here rather than section by
     section. Was an effective 5rem; this is roughly 40% less at desktop. */

  --swalim-section-pad:           clamp(2rem, 4vw, 3rem);
  --swalim-section-header-gap:    clamp(1.25rem, 2.5vw, 1.75rem);
}