/* ==========================================================================
   ISFAP design tokens
   ISFAP Student and Bursary Management Portal, built by MakwaIT Technologies

   This is the ONLY file in the codebase permitted to declare a colour value.
   Every other stylesheet, template and script must reference a var(--mk-*).
   scripts/check-contrast.mjs enforces both halves of that sentence.

   Palette source
   --------------
   Three values were supplied by ISFAP and are used exactly as given:
     background #F4F5F6, highlight #F5FAF9, text #616A84.

   Those three describe page chrome only. They contain no brand mark, so the
   green and the gold are sampled from the supplied ISFAP logo artwork rather
   than estimated: #26B24B is the modal pixel across the leaf (77,645 px) and
   #DCC024 the modal pixel across the sun (5,620 px). Every other green and
   gold here is derived from those two, holding their hue (136 and 51) and
   moving only lightness until the contrast each one has to meet is met.

   Why the token names are not colour names
   ----------------------------------------
   The previous palette named tokens after their hue: --mk-red, --mk-navy,
   --mk-cyan. That survives exactly one rebrand before --mk-red holds a green.
   Tokens are now named for the job they do, so the next palette change is a
   change to this file alone.

   The --mk- prefix is the stylesheet namespace and is deliberately left
   alone: renaming it touches roughly two thousand references across 37 pages
   for no visual effect.
   ========================================================================== */

:root {
  /* ---- Brand -------------------------------------------------------------
     --mk-brand is the leaf green from the logo. White text on it measures
     2.78:1, far under the 4.5:1 body-text bar, so like the previous brand
     colour it is an accent only: rules, active indicators, the current
     lifecycle node, large display fills. Never a text background.

     --mk-brand-strong (5.01:1 with white) carries the primary button.
     --mk-brand-dark (7.27:1 on white) carries green text and links on light
     surfaces, and the pressed button state.
     --mk-brand-deep is the sidebar, where white text measures 12.52:1.
  */
  --mk-brand:        #26B24B;
  --mk-brand-strong: #1B8036;
  --mk-brand-dark:   #15642A;
  --mk-brand-mid:    #115022;
  --mk-brand-deep:   #0D3C19;

  /* The sun from the logo. Bright enough that it is decorative only: gold
     text needs --mk-gold-dark, which is the same hue carried down to a
     legible weight. That weight is set by the worst case it has to survive,
     which is gold pill text on a 12 percent gold tint over --mk-canvas. */
  --mk-gold:         #DCC024;
  --mk-gold-dark:    #6D5F11;

  /* ---- Neutrals ----------------------------------------------------------
     --mk-slate is the ISFAP text colour, used as supplied. --mk-ink is a
     darker member of the same blue-grey family for primary text, because
     --mk-slate on --mk-canvas measures 4.93:1 and leaves nothing in hand for
     smaller or lighter weights.
  */
  --mk-ink:         #1E2433;
  --mk-slate:       #616A84;

  /* Two border weights, deliberately. --mk-line is decorative: table rules,
     card edges, dividers. --mk-line-strong is for the boundary of a form
     control, which WCAG 2.2 1.4.11 requires to reach 3:1 because that border
     is what identifies the control as a control. It measures 3.19:1. */
  --mk-line:        #D7DAE1;
  --mk-line-strong: #8B90A0;
  --mk-line-soft:   #EDEFF3;

  --mk-surface:     #FFFFFF;
  --mk-canvas:      #F4F5F6;
  --mk-highlight:   #F5FAF9;

  /* ---- Semantic text ----------------------------------------------------- */
  --mk-heading:     var(--mk-brand-deep);
  --mk-link:        var(--mk-brand-dark);

  /* ---- Status ------------------------------------------------------------
     Status colours are used as pill text sitting on a 12 percent tint of
     themselves. That composited background is what the contrast bar has to be
     met against, not plain white, so each value is darker than a typical
     status palette.

     --mk-success is kept a cooler, deeper green than --mk-brand on purpose.
     A success pill drawn in the brand green would read as decoration rather
     than as a state, and the two would be indistinguishable on the lifecycle
     rail where both appear.

     --mk-neutral is a step darker than --mk-slate. It is the same family, but
     a neutral pill has to clear 4.5:1 against a tint of itself over canvas,
     and the supplied text colour reaches only 4.23:1 in that position. The
     supplied value is untouched wherever it is used as text.
  */
  --mk-success:     #177347;
  --mk-warning:     var(--mk-gold-dark);
  --mk-danger:      #C0261C;
  --mk-info:        #33518F;
  --mk-neutral:     #545C73;

  /* ---- Channel triplets --------------------------------------------------
     Status pills need the status colour at 12 percent as a background with the
     full-strength colour as text. Declaring the channels lets components write
     rgb(var(--mk-success-rgb) / 12%) without hard-coding a second hex.
     check-contrast.mjs asserts each triplet still matches its hex, because a
     stale one keeps rendering in the old colour and reports nothing.
  */
  --mk-brand-rgb:        38 178 75;
  --mk-brand-strong-rgb: 27 128 54;
  --mk-brand-dark-rgb:   21 100 42;
  --mk-brand-deep-rgb:   13 60 25;
  --mk-gold-rgb:         220 192 36;
  --mk-gold-dark-rgb:    109 95 17;
  --mk-success-rgb:      23 115 71;
  --mk-warning-rgb:      109 95 17;
  --mk-danger-rgb:       192 38 28;
  --mk-info-rgb:         51 81 143;
  --mk-neutral-rgb:      84 92 115;
  --mk-ink-rgb:          30 36 51;
  --mk-slate-rgb:        97 106 132;
  --mk-surface-rgb:      255 255 255;

  /* ---- Semantic surfaces ------------------------------------------------- */
  --mk-sidebar-bg:      var(--mk-brand-deep);
  --mk-sidebar-raised:  var(--mk-brand-mid);
  --mk-sidebar-text:    rgb(255 255 255 / 78%);
  --mk-sidebar-text-on: #FFFFFF;
  --mk-sidebar-line:    rgb(255 255 255 / 12%);
  --mk-overlay:         rgb(13 60 25 / 55%);

  /* One focus colour has to clear 3:1 against the white content area and
     against the dark green sidebar it is also drawn over. It measures 3.69:1
     and 3.40:1 respectively. The gold fails this at 1.72:1 on white, which is
     why the ring is not gold. */
  --mk-focus:           #219940;

  /* ---- Type -------------------------------------------------------------- */
  --mk-font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --mk-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --mk-font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --mk-text-xs:   0.75rem;    /* 12px  meta, table captions */
  --mk-text-sm:   0.8125rem;  /* 13px  labels, pills */
  --mk-text-base: 0.9375rem;  /* 15px  body */
  --mk-text-md:   1.0625rem;  /* 17px  card titles */
  --mk-text-lg:   1.375rem;   /* 22px  page title */
  --mk-text-xl:   1.75rem;    /* 28px  stat figures */
  --mk-text-2xl:  2.25rem;    /* 36px  display */

  --mk-leading-tight: 1.25;
  --mk-leading-body:  1.55;

  /* ---- Geometry ---------------------------------------------------------- */
  --mk-radius:    8px;
  --mk-radius-sm: 5px;
  --mk-radius-lg: 14px;
  --mk-radius-pill: 999px;

  --mk-shadow:    0 1px 2px rgb(13 60 25 / 6%), 0 8px 24px rgb(13 60 25 / 7%);
  --mk-shadow-sm: 0 1px 2px rgb(13 60 25 / 9%);
  --mk-shadow-lg: 0 12px 40px rgb(13 60 25 / 18%);

  --mk-space: 8px;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 24px;
  --mk-space-6: 32px;
  --mk-space-7: 48px;

  /* ---- Layout metrics ---------------------------------------------------- */
  --mk-sidebar-w: 256px;
  --mk-topbar-h: 60px;
  --mk-content-max: 1360px;

  /* ---- Motion ------------------------------------------------------------ */
  --mk-ease: cubic-bezier(.2, .7, .3, 1);
  --mk-dur: 160ms;
}

/* Charts read their series colours from here so Chart.js never hard-codes one.

   A categorical palette has one job: any two series must be tellable apart.
   That is a question about perceived colour difference, not about contrast
   ratio, so check-contrast.mjs measures CIE Lab deltaE across all 28 pairs
   rather than luminance between neighbours.

   Two hues here are not in the ISFAP brand. Eight brand-derived colours
   cannot be made mutually distinguishable, and a chart nobody can read is a
   worse outcome than a chart carrying two supporting hues. They appear in
   charts only. */
:root {
  --mk-chart-teal: #0E7C86;
  --mk-chart-clay: #A85A1E;
  --mk-chart-plum: #7A3E8F;

  --mk-series-1: var(--mk-brand-strong);
  --mk-series-2: var(--mk-gold);
  --mk-series-3: var(--mk-info);
  --mk-series-4: var(--mk-brand);
  --mk-series-5: var(--mk-danger);
  --mk-series-6: var(--mk-chart-teal);
  --mk-series-7: var(--mk-chart-clay);
  --mk-series-8: var(--mk-chart-plum);

  --mk-grid: var(--mk-line);
  --mk-axis: var(--mk-slate);
}

@media (prefers-reduced-motion: reduce) {
  :root { --mk-dur: 0ms; }
}