/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — the single source of truth for every colour, and the
   two font stacks, on every page of this site.

   Why this file exists. These tokens used to be copy-pasted into six
   places: site.css, writeup.css, and an inline <style> in each of the
   four hub pages. That is not theoretical debt. It caused two real
   WCAG failures, because a contrast fix was applied to some copies and
   not the others:

     light --accent2  was #00875a (4.12:1 on --bg, fails AA) in
                      site.css and the certifications hub, while
                      writeup.css and three other pages already
                      carried the corrected #00704a (5.56:1).
     dark  --text3    was #556677 (2.86:1 on --surface, fails AA) in
                      writeup.css alone, #758697 everywhere else.
     light --accent3  was #e03050 (4.46:1, fails AA) in site.css and
                      #c22243 (5.83:1) in writeup.css.

   Every one of those is a token that existed in two values at once.
   With one file that class of bug cannot recur: a colour is fixed
   once and every page follows.

   Ratios below are measured against the surface the token actually
   paints on in that theme, and were computed rather than estimated.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* grounds */
  --bg: #080b10;
  --bg2: #0d1117;
  --surface: #141c26;
  --surface-2: #141a24;
  --border: #1e2d3d;

  /* accents */
  --accent: #00d4ff;          --accent-rgb: 0,212,255;
  --accent-strong: #00d4ff;
  --accent2: #00ff9d;         --accent2-rgb: 0,255,157;
  --accent3: #ff4d6d;         --accent3-rgb: 255,77,109;
  --accent4: #f5a623;         --accent4-rgb: 245,166,35;

  /* thm-green: the TryHackMe card's points and stat icons. Was a
     hardcoded lime in five .thm-* rules, so it never adapted to light
     theme, where it measured 1.44:1 on white. Dark value unchanged. */
  --thm-green: #a2ea2a;

  /* danger: form error text only. Kept separate from --accent3 so the
     error colour can clear AA without shifting the hero glitch layer
     or the red skill category, which --accent3 also paints. */
  --danger: #ff4d6d;

  /* text */
  --text: #e8edf2;
  --text2: #8899aa;
  --text3: #758697;
  --text-dim: #8899aa;

  /* badge rarity tiers — dark values match the original hardcoded
     colours exactly. */
  --tier-exam: #3ecf8e;       --tier-exam-rgb: 62,207,142;
  --tier-common: #8fd6a6;     --tier-common-rgb: 143,214,166;
  --tier-rare: #f5a623;       --tier-rare-rgb: 245,166,35;
  --tier-epic: #d7a1ff;       --tier-epic-rgb: 215,161,255;

  /* type */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;

  /* layout: the content column width, shared by the nav, the hero, every
     section, the contact block, the footer and the hub pages. It was the
     literal 1200px repeated in four stylesheets; the hero and the nav had no
     cap at all, which is why on an ultrawide monitor the name pinned to the
     far left and the badge cards to the far right with a void between them,
     while the sections below sat in a tidy 1200px column. */
  --page-max: 1200px;

  /* gutter: the inline padding every section carries INSIDE the --page-max
     column. It matters that this is a token and not a repeated 3rem, because
     the nav and footer are full-bleed and have to line their content up with
     it by formula:

       section text starts at   max(0, (100% - page-max)/2) + gutter
       so nav padding must be   max(gutter, (100% - page-max)/2 + gutter)

     Getting that wrong is not subtle. Capping the nav to the same WIDTH as the
     sections but forgetting their inner padding left the AK.SEC logo sitting
     48px to the left of the hero text it sits above, at every width over
     1296px. Expressed as a formula off one token, the two cannot drift. */
  --gutter: 3rem;

  /* motion: one curve and a three-step scale.

     The site previously specified almost no easing at all, so every transition
     ran on the browser default, which is symmetrical and reads as mechanical.
     It also used seven different durations (.1 .15 .2 .22 .25 .3 .6) picked in
     isolation across 51 declarations, which is why movements happening near
     each other felt unrelated.

     One curve, starting fast and settling soft, and three durations with a job
     each. Changing the feel of the whole site is now two values, not fifty. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Progress indicators only. They track a real quantity - how far down the page
     you are, how far through the loader - so they must follow it tightly rather
     than easing toward it. Collapsing them onto --t-fast in the motion rewrite
     slowed them from .1s to .18s, which put 80ms of lag between the scroll and
     the bar that reports it. Separate token so the scale can move without
     dragging them with it. */
  --t-instant: .1s;
  --t-fast: .18s;   /* colour, border, opacity on small elements */
  --t-base: .28s;   /* hovers, transforms, anything that moves */
  --t-slow: .6s;    /* scroll reveals, the one deliberately unhurried step */
}

[data-theme="light"] {
  --bg: #f0f4f8;
  --bg2: #e2e8f0;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --border: #cbd5e1;

  --accent: #0077aa;          --accent-rgb: 0,119,170;
  --accent-strong: #006699;
  /* 5.56:1 on --bg. The -rgb pair feeds rgba() in the open-to-work
     banner and the green skill category, so it has to track the hex;
     it was left at the old colour's 0,135,90 when the hex was fixed. */
  --accent2: #00704a;         --accent2-rgb: 0,112,74;
  /* 5.83:1. site.css carried #e03050 at 4.46:1, which fails AA and is
     used as text via the red skill category's --cat. writeup.css
     already had this value; it is now the only one. */
  --accent3: #c22243;         --accent3-rgb: 194,34,67;
  --accent4: #b8730f;         --accent4-rgb: 184,115,15;

  --thm-green: #4e7a08;       /* 5.11:1 on white, was 1.44:1 */
  --danger: #c92645;          /* 5.46:1 on white, was 4.46:1 */

  --text: #0f172a;
  --text2: #475569;
  --text3: #5b6b7f;
  --text-dim: #475569;

  /* Same hue and saturation as dark, lightness lowered to clear
     4.5:1 on a white card. */
  --tier-exam: #1d764f;       --tier-exam-rgb: 29,118,79;
  --tier-common: #2c7844;     --tier-common-rgb: 44,120,68;
  --tier-rare: #905d07;       --tier-rare-rgb: 144,93,7;
  --tier-epic: #8e00f8;       --tier-epic-rgb: 142,0,248;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
}