/* Central Asia Procurement, brand tokens v2.0 (October 2026)
   Load the fonts in <head>:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap" rel="stylesheet">
*/
:root {
  /* Primary */
  --cap-ink: #17303A;            /* headings, body text, dark sections. 13.8:1 on white */
  --cap-turquoise: #13868B;      /* accents, large text only (>= 24px, or >= 18.7px bold). 4.4:1 on white */
  --cap-gold: #E0A93E;           /* highlights on ink only. 6.5:1 on ink. Never on white */
  --cap-white: #FFFFFF;

  /* Functional */
  --cap-turquoise-deep: #0F7479; /* links and small accent text on white. 5.5:1 */
  --cap-gold-deep: #94681A;      /* gold-coloured text on white. 4.9:1 */
  --cap-slate: #4B5F68;          /* secondary text, captions. 6.7:1 on white */

  /* Secondary: Kazakhstan accent. Charts, illustrations, events in Kazakhstan. Never text on white (2.8:1) */
  --cap-sky: #00ABC2;

  /* Tints */
  --cap-ink-80: #455961;
  --cap-ink-60: #748389;
  --cap-ink-20: #D1D6D8;         /* hairlines, borders */
  --cap-ink-10: #E8EAEB;
  --cap-turquoise-30: #B8DBDC;
  --cap-turquoise-12: #E3F0F1;   /* tinted panels */
  --cap-gold-30: #F6E5C5;
  --cap-gold-15: #FAF2E2;
  --cap-light: #F4F6F6;          /* light section ground */

  /* Type */
  --cap-font-serif: "Source Serif 4", Georgia, serif;   /* headings and all Kazakh text */
  --cap-font-sans: Manrope, Arial, sans-serif;          /* body, UI. Latin and Russian only */

  --cap-text-display: 600 48px/56px var(--cap-font-serif);
  --cap-text-h1: 600 36px/44px var(--cap-font-serif);
  --cap-text-h2: 600 28px/36px var(--cap-font-serif);
  --cap-text-h3: 600 22px/30px var(--cap-font-serif);
  --cap-text-body: 500 17px/28px var(--cap-font-sans);
  --cap-text-small: 500 15px/24px var(--cap-font-sans);
  --cap-text-caption: 600 12px/16px var(--cap-font-sans); /* capitals, letter-spacing 0.08em */

  /* Spacing, 4px base */
  --cap-space-1: 4px;
  --cap-space-2: 8px;
  --cap-space-3: 12px;
  --cap-space-4: 16px;
  --cap-space-5: 24px;
  --cap-space-6: 32px;
  --cap-space-7: 48px;
  --cap-space-8: 64px;

  /* Shape: square corners; the brand corner is a 45 degree cut, not a radius */
  --cap-radius: 0;
  --cap-cut: 12px;

  /* Layout */
  --cap-container: 1200px;       /* max content width; side gutter 16px under 768px, 32px above */
  --cap-white-10: rgba(255, 255, 255, 0.1); /* hover of secondary button on ink */
}

/* Breakpoints: phone < 768px, tablet 768-1199px, desktop >= 1200px */
@media (max-width: 767px) {
  :root {
    --cap-text-display: 600 36px/44px var(--cap-font-serif);
    --cap-text-h1: 600 30px/38px var(--cap-font-serif);
    --cap-text-h2: 600 24px/32px var(--cap-font-serif);
    --cap-text-h3: 600 20px/28px var(--cap-font-serif);
  }
}

/* Kazakh: Manrope has no Ә Ғ Қ Ң Ұ. Any element with lang="kk", on any page, switches to the serif */
:lang(kk) { font-family: var(--cap-font-serif); --cap-font-sans: var(--cap-font-serif); --cap-text-body: 400 17px/28px var(--cap-font-serif); --cap-text-small: 400 15px/24px var(--cap-font-serif); --cap-text-caption: 600 12px/16px var(--cap-font-serif); }

/* Base */
body { margin: 0; font: var(--cap-text-body); color: var(--cap-ink); background: var(--cap-white); }
h1 { font: var(--cap-text-h1); } h2 { font: var(--cap-text-h2); } h3 { font: var(--cap-text-h3); }
.cap-container { max-width: var(--cap-container); margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) { .cap-container { padding: 0 16px; } }

/* Reference components */
.cap-caption { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-slate); }
/* Links in running text are always underlined (WCAG 1.4.1). Navigation links may drop it with .cap-nav a */
a { color: var(--cap-turquoise-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }
.cap-nav a { color: var(--cap-ink); text-decoration: none; font: 600 15px/1 var(--cap-font-sans); }
.cap-nav a:hover, .cap-nav a:focus-visible { color: var(--cap-turquoise-deep); }
:focus-visible { outline: 2px solid var(--cap-turquoise-deep); outline-offset: 2px; }
.cap-dark :focus-visible { outline-color: var(--cap-gold); }

.cap-button { font: 600 15px/1 var(--cap-font-sans); padding: 12px 24px; border: 1.5px solid var(--cap-ink); border-radius: var(--cap-radius); background: var(--cap-ink); color: var(--cap-white); cursor: pointer; }
.cap-button:hover { background: var(--cap-turquoise-deep); border-color: var(--cap-turquoise-deep); }
.cap-button--secondary { background: transparent; color: var(--cap-ink); }
.cap-button--secondary:hover { background: var(--cap-ink-10); color: var(--cap-ink); border-color: var(--cap-ink); }
.cap-dark .cap-button { background: var(--cap-white); color: var(--cap-ink); border-color: var(--cap-white); }
.cap-dark .cap-button:hover { background: var(--cap-ink-10); border-color: var(--cap-ink-10); }
.cap-dark .cap-button--secondary { background: transparent; color: var(--cap-white); border-color: var(--cap-white); }
.cap-dark .cap-button--secondary:hover { background: var(--cap-white-10); }

/* Form field */
.cap-input { font: var(--cap-text-body); color: var(--cap-ink); background: var(--cap-white); border: 1px solid var(--cap-ink-60); border-radius: 0; padding: 10px 14px; }
.cap-input:focus-visible { outline: none; border: 2px solid var(--cap-turquoise-deep); padding: 9px 13px; }

/* List with the gold square marker: ink grounds only */
.cap-dark .cap-list { list-style: none; padding: 0; }
.cap-dark .cap-list li { position: relative; padding-left: calc(0.4em + 12px); }
.cap-dark .cap-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4em; height: 0.4em; background: var(--cap-gold); }

/* Mitre line divider: 2px line at 45 degrees, 24px high, then a 1px rule. White on ink and turquoise grounds */
.cap-mitre { display: flex; align-items: flex-end; gap: 8px; height: 24px; }
.cap-mitre::before { content: ""; width: 26px; height: 24px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--cap-turquoise) calc(50% - 1px), var(--cap-turquoise) calc(50% + 1px), transparent calc(50% + 1px)); }
.cap-mitre::after { content: ""; flex: 1; height: 1px; background: var(--cap-ink-20); }
.cap-dark .cap-mitre::before { background: linear-gradient(to top right, transparent calc(50% - 1px), var(--cap-white) calc(50% - 1px), var(--cap-white) calc(50% + 1px), transparent calc(50% + 1px)); }

/* Language switch: EN RU KZ, always in Manrope */
.cap-lang { display: flex; gap: 12px; font: 600 13px/1 Manrope, Arial, sans-serif; }
.cap-lang a { color: var(--cap-slate); text-decoration: none; padding-bottom: 4px; }
.cap-lang a[aria-current="true"] { color: var(--cap-ink); border-bottom: 2px solid var(--cap-turquoise); }

/* Table: ink header, hairlines, no vertical lines. Wrap in .cap-table-wrap to scroll on phones */
.cap-table-wrap { overflow-x: auto; }
.cap-table { border-collapse: collapse; font: var(--cap-text-small); }
.cap-table th { background: var(--cap-ink); color: var(--cap-white); font-weight: 600; text-align: left; padding: 10px 12px; }
.cap-table td { padding: 10px 12px; border-bottom: 1px solid var(--cap-ink-20); }

/* The brand corner: 45 degree cut, top right corner only. 1/8 of the short side, max 24px; 12px default for cards */
.cap-cut { clip-path: polygon(0 0, calc(100% - var(--cap-cut)) 0, 100% var(--cap-cut), 100% 100%, 0 100%); }

.cap-dark { background: var(--cap-ink); color: var(--cap-white); }
.cap-dark a { color: var(--cap-white); text-decoration: underline; text-decoration-color: var(--cap-gold); }
.cap-dark .cap-nav a { color: var(--cap-white); text-decoration: none; }