/* ==========================================================================
   CloudyIT Design System — Colors & Typography Tokens (2026 refresh)
   ========================================================================== */

/* Inter — single family across the system. Loaded from Google Fonts CDN.
   Fallbacks: Montserrat (display), Noto Sans (everything else) per spec. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@800&family=Noto+Sans:wght@400;500;600&display=swap");

:root {
  /* ---- Core palette -------------------------------------------------- */
  --cloudy-navy: #0A2540;          /* primary anchor */
  --cloudy-blue: #008ECA;          /* accent */
  --cloudy-sky:  #4FB3E0;          /* lighter tint */
  --cloudy-white:#FFFFFF;

  /* ---- Neutrals ------------------------------------------------------ */
  --ink:    #3C3C3B;               /* body text */
  --slate:  #6B7280;               /* secondary text, captions */
  --line:   #E5E9EF;               /* borders, dividers */
  --canvas: #F7F9FC;               /* off-white backgrounds */

  /* ---- Functional ---------------------------------------------------- */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #DC2626;

  /* ---- Product accents ---------------------------------------------- */
  --govassist:       #008ECA;      /* AI flagship — blue */
  --govfinance:      #0D9488;      /* teal */
  --govsuite:        #0A2540;      /* umbrella — navy */
  --digital-defence: #1F2937;      /* graphite */
  --digital-defence-accent: #DC2626;

  /* ---- Retired (campaign-only) -------------------------------------- */
  --magenta-retired: #B80E80;

  /* ---- Semantic foreground / background ----------------------------- */
  --bg-page:    var(--cloudy-white);
  --bg-canvas:  var(--canvas);
  --bg-dark:    var(--cloudy-navy);
  --bg-darker:  #081C30;           /* slightly darker navy for footers */

  --fg-strong:  var(--cloudy-navy);
  --fg-body:    var(--ink);
  --fg-muted:   var(--slate);
  --fg-accent:  var(--cloudy-blue);
  --fg-invert:  var(--cloudy-white);

  --border:     var(--line);
  --border-strong: #CDD5E0;

  /* ---- Elevation (restrained) --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10,37,64,.06);
  --shadow-md: 0 4px 16px rgba(10,37,64,.08);
  --shadow-lg: 0 12px 40px rgba(10,37,64,.12);
  --shadow-focus: 0 0 0 3px rgba(0,142,202,.25);

  /* ---- Radii --------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --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;

  /* ---- Typography families ------------------------------------------ */
  --font-sans: "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale — tuned to the 2026 refresh spec ------------------ */
  --type-display-size:  56px;
  --type-display-weight:800;
  --type-display-track: -0.02em;
  --type-display-lh:    1.02;

  --type-h1-size:  44px;
  --type-h1-weight:800;
  --type-h1-track: -0.02em;
  --type-h1-lh:    1.05;

  --type-h2-size:  30px;
  --type-h2-weight:700;
  --type-h2-track: -0.015em;
  --type-h2-lh:    1.15;

  --type-h3-size:  21px;
  --type-h3-weight:600;
  --type-h3-track: -0.01em;
  --type-h3-lh:    1.3;

  --type-body-size:   16px;   /* ~12pt web equivalent */
  --type-body-weight: 400;
  --type-body-lh:     1.55;

  --type-small-size: 13px;
  --type-small-lh:   1.45;

  --type-eyebrow-size: 11px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-track: 0.12em;
}

/* ==========================================================================
   Base element styles — drop this stylesheet in and get the vibe immediately
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  color: var(--fg-body);
  background: var(--bg-page);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--type-h1-size);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-track);
  line-height: var(--type-h1-lh);
}
h2 {
  font-size: var(--type-h2-size);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-track);
  line-height: var(--type-h2-lh);
}
h3 {
  font-size: var(--type-h3-size);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-track);
  line-height: var(--type-h3-lh);
}

p { margin: 0 0 var(--s-4); text-wrap: pretty; }

a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: #0078AD; }

small, .cy-small { font-size: var(--type-small-size); line-height: var(--type-small-lh); color: var(--fg-muted); }

/* Eyebrow label — the signature small-caps label paired with a square bullet */
.cy-eyebrow {
  font-size: var(--type-eyebrow-size);
  font-weight: var(--type-eyebrow-weight);
  letter-spacing: var(--type-eyebrow-track);
  text-transform: uppercase;
  color: var(--fg-accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cy-eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
  flex: none;
}

/* Accent word — highlight a word or two inside a display headline */
.cy-accent { color: var(--cloudy-blue); }

/* Thin blue rule, typical horizontal accent */
.cy-rule {
  border: 0;
  border-top: 2px solid var(--cloudy-blue);
  width: 40px;
  margin: 0 0 var(--s-4);
}

/* Hairline section divider */
.cy-hairline { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

/* Dark-section overrides */
.cy-on-dark {
  background: var(--bg-dark);
  color: var(--fg-invert);
}
.cy-on-dark h1, .cy-on-dark h2, .cy-on-dark h3 { color: var(--fg-invert); }
.cy-on-dark .cy-eyebrow { color: var(--cloudy-sky); }
.cy-on-dark p { color: rgba(255,255,255,.82); }