/* ========================================================================== GCIT design system - tokens (v1, 13 Oct 2026) Framework agnostic. Import before gcit-components.css. Source of truth: brand-assets/gcit-design-system/README.md Brand guide: "2025 Brand Guidelines v1.0" (colour p10, type p13-14, shapes p16, UI p23) Contrast pairs (WCAG 2.x ratio, measured with the relative luminance formula): on white #FFFFFF ink 17.06 | body 12.56 | navy 11.25 | caption 6.91 | teal-ink 6.70 | muted 5.50 | teal-deep 4.95 on cream #FBF7F3 navy 10.56 | teal-ink 6.29 | muted 5.16 | teal-deep 4.64 on mint #EBF7F4 navy 10.26 | teal-ink 6.11 | muted 5.01 | (teal-deep 4.51, avoid) on mist #DDEBEF navy 9.22 | teal-ink 5.49 | muted 4.51 | (teal-deep 4.06 FAILS) on butter #F8F3D9 navy 10.08 | teal-ink 6.00 | muted 4.93 | (teal-deep 4.44 FAILS) on navy #143D60 white 11.25 | mist 9.22 | sun 8.61 | on-navy 7.37 | sea 6.69 | on-navy-muted 5.55 | teal 5.37 on navy-deep #0F2F4B white 13.74 | on-navy 9.00 | teal 6.55 on teal #34C9A1 ink-btn 8.65 | navy 5.37 | (white 2.10 FAILS) Never: teal #34C9A1 as text on any light fill. Never: small text on navy-tone #1B4C75. ========================================================================== */ :root { /* ---- Brand colour (guide p10) ---- */ --gcs-navy: #143D60; /* secondary in the guide, lead dark on the web */ --gcs-navy-deep: #0F2F4B; /* second dark panel, Wave field on navy. Replaces #0d1e2d / #0e1a2b */ --gcs-navy-tone: #1B4C75; /* decorative field inside navy only. No small text on it */ --gcs-teal: #34C9A1; /* primary. Accents, Water caps, bullets. Text only on navy */ --gcs-teal-deep: #147B8C; /* primary. Teal text on white and cream, numerals */ --gcs-teal-ink: #0F6574; /* teal text on mint, mist, butter and sea fields */ --gcs-green: #007F73; /* secondary. Charts and icons, rarely text */ --gcs-sea: #A3D1C6; /* secondary. Tier mark base on navy, chart fills */ --gcs-sun: #FFDD9B; /* primary. Seal and logo apex only. Never a sparkle */ --gcs-coral: #E07A5F; /* accent. Alerts and penalties only (max 30% with brown) */ --gcs-coral-ink: #A8432A; /* coral text on light (5.6 on white) */ --gcs-brown: #A27B5C; /* accent. Charts only */ /* ---- Neutrals ---- */ --gcs-white: #FFFFFF; --gcs-cream: #FBF7F3; /* guide neutral. Hero and panel fill (live hero #faf7f2 is equivalent) */ --gcs-mint: #EBF7F4; /* guide neutral. Panels, label boxes */ --gcs-mist: #DDEBEF; /* guide neutral. Light field, kicker text on navy */ --gcs-butter: #F8F3D9; /* guide neutral. Use sparingly, one section per page at most */ --gcs-ink: #1A1A2E; /* headings on light */ --gcs-charcoal: #232323; /* guide charcoal, print and wordmark */ --gcs-body: #2B3442; /* body text on light */ --gcs-muted: #5E6A7A; /* secondary text on light */ --gcs-caption: #4F5B6B; /* captions on light */ --gcs-on-navy: #C5D3DF; /* body text on navy */ --gcs-on-navy-muted:#A8B8C8; /* captions on navy */ --gcs-ink-btn: #0A1628; /* text on teal buttons */ --gcs-rule: #C9D6DF; /* hairline on light */ --gcs-rule-warm: #DCD3C6; /* hairline on cream */ --gcs-rule-dark: rgba(221, 235, 239, .24); /* hairline on navy */ /* ---- Type (guide p13-14) ---- */ --gcs-font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif; /* 300 headings, 400 stress, 500 figures */ --gcs-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* 400 body, 500 kickers, labels, buttons */ --gcs-fs-display: clamp(36px, 4.2vw + 12px, 56px); --gcs-fs-h1: clamp(32px, 2.6vw + 14px, 46px); --gcs-fs-h2: clamp(28px, 1.8vw + 14px, 40px); --gcs-fs-h3: clamp(20px, .6vw + 15px, 24px); --gcs-fs-lead: clamp(17px, .3vw + 15px, 19px); --gcs-fs-body: 16px; --gcs-fs-small: 15px; /* kicker, table cells, captions */ --gcs-fs-micro: 13px; /* label box only. Nothing smaller anywhere */ --gcs-fs-figure: clamp(34px, 1.6vw + 24px, 44px); --gcs-lh-head: 1.18; --gcs-lh-body: 1.65; /* ---- Space (4px base) ---- */ --gcs-s1: 4px; --gcs-s2: 8px; --gcs-s3: 12px; --gcs-s4: 16px; --gcs-s5: 24px; --gcs-s6: 32px; --gcs-s7: 48px; --gcs-s8: 64px; --gcs-s9: 96px; --gcs-s10: 128px; --gcs-section-y: clamp(64px, 7vw, 112px); --gcs-gutter: clamp(16px, 4vw, 40px); --gcs-measure: 68ch; --gcs-container: 1180px; /* ---- Radius: one family ---- */ --gcs-r-sm: 4px; /* label box, chip, tag, input */ --gcs-r-md: 8px; /* button, photo, small panel */ --gcs-r-lg: 12px; /* panel, bento, chart card */ --gcs-r-pill: 999px;/* Water caps and Water bullets ONLY */ /* ---- Water cap (the signature) ---- */ --gcs-cap-w: 40px; --gcs-cap-h: 4px; /* ---- Motion ---- */ --gcs-ease: cubic-bezier(.2, .7, .2, 1); --gcs-dur-fast: 150ms; /* colour and fill changes on hover */ --gcs-dur-reveal: 400ms; /* the single allowed fade-in */ /* ---- Brand shapes as data URIs (from the brand guide master SVGs, assets/*.svg) ---- */ /* Tier mark: the logo's two lower chevrons, teal over deep teal. The kicker mark. */ --gcs-tier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 167 175'%3E%3Cpath fill='%23FFDD9B' d='M 104.5 23.15 L 104.55 23.15 91.95 4.7 Q 88.75 0 83.05 0 77.4 0 74.15 4.7 L 61.6 23.15 Q 59 26.95 59.95 31.4 60.85 35.85 64.7 38.35 L 77.3 46.3 Q 79.95 47.95 83.05 47.95 86.2 47.95 88.8 46.3 L 101.4 38.35 Q 105.25 35.9 106.2 31.45 107.1 26.95 104.5 23.15 Z'/%3E%3Cpath fill='%2334C9A1' d='M 116.05 45.35 Q 111.8 44.45 108.1 46.8 L 88.8 59 Q 86.2 60.65 83.05 60.65 79.95 60.65 77.3 59 L 58.05 46.8 Q 54.35 44.45 50.1 45.35 45.85 46.2 43.4 49.8 L 31.85 66.8 Q 29.25 70.55 30.2 75.05 31.1 79.5 34.95 81.95 L 77.3 108.8 Q 79.95 110.45 83.05 110.45 86.2 110.45 88.8 108.8 L 131.15 81.95 Q 135.05 79.5 135.95 75.05 136.9 70.55 134.3 66.8 L 122.75 49.8 Q 120.3 46.2 116.05 45.35 Z'/%3E%3Cpath fill='%23147B8C' d='M 165.95 118.95 Q 166.9 114.5 164.3 110.7 L 152.55 93.45 Q 150.1 89.85 145.85 88.95 141.55 88.1 137.9 90.4 L 137.85 90.4 137.85 90.45 88.8 121.5 Q 86.2 123.15 83.05 123.15 79.95 123.15 77.3 121.5 L 28.25 90.45 Q 24.55 88.1 20.35 89 16.05 89.85 13.6 93.45 L 1.85 110.7 Q -0.7 114.5 0.25 119 1.15 123.45 5 125.9 L 77.3 171.65 Q 79.95 173.3 83.1 173.3 86.2 173.3 88.85 171.65 L 161.15 125.9 Q 165 123.4 165.95 118.95 Z'/%3E%3C/svg%3E"); /* Same mark on navy: base chevron lifts to sea so it stays visible */ --gcs-tier-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 167 175'%3E%3Cpath fill='%23FFDD9B' d='M 104.5 23.15 L 104.55 23.15 91.95 4.7 Q 88.75 0 83.05 0 77.4 0 74.15 4.7 L 61.6 23.15 Q 59 26.95 59.95 31.4 60.85 35.85 64.7 38.35 L 77.3 46.3 Q 79.95 47.95 83.05 47.95 86.2 47.95 88.8 46.3 L 101.4 38.35 Q 105.25 35.9 106.2 31.45 107.1 26.95 104.5 23.15 Z'/%3E%3Cpath fill='%2334C9A1' d='M 116.05 45.35 Q 111.8 44.45 108.1 46.8 L 88.8 59 Q 86.2 60.65 83.05 60.65 79.95 60.65 77.3 59 L 58.05 46.8 Q 54.35 44.45 50.1 45.35 45.85 46.2 43.4 49.8 L 31.85 66.8 Q 29.25 70.55 30.2 75.05 31.1 79.5 34.95 81.95 L 77.3 108.8 Q 79.95 110.45 83.05 110.45 86.2 110.45 88.8 108.8 L 131.15 81.95 Q 135.05 79.5 135.95 75.05 136.9 70.55 134.3 66.8 L 122.75 49.8 Q 120.3 46.2 116.05 45.35 Z'/%3E%3Cpath fill='%23147B8C' d='M 165.95 118.95 Q 166.9 114.5 164.3 110.7 L 152.55 93.45 Q 150.1 89.85 145.85 88.95 141.55 88.1 137.9 90.4 L 137.85 90.4 137.85 90.45 88.8 121.5 Q 86.2 123.15 83.05 123.15 79.95 123.15 77.3 121.5 L 28.25 90.45 Q 24.55 88.1 20.35 89 16.05 89.85 13.6 93.45 L 1.85 110.7 Q -0.7 114.5 0.25 119 1.15 123.45 5 125.9 L 77.3 171.65 Q 79.95 173.3 83.1 173.3 86.2 173.3 88.85 171.65 L 161.15 125.9 Q 165 123.4 165.95 118.95 Z'/%3E%3C/svg%3E"); /* Wave field (brand Wave.svg) in navy-deep, for navy sections */ --gcs-wave-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%230F2F4B' d='M484.6 364.2c-7.7-8.9-18.8-10.8-35.8-13.7-20.4-3.5-22.9-.9-39.2-4.6-11.4-2.6-24.1-4.7-28.4-19.2-3.8-12.7 3.1-20.9 10.4-29.6 3.1-3.6 4.8-5 10.7-10.5 0 0 8.5-8 17-16.4 11.7-11.7 29-29 26.1-47-1.3-7.7-5.8-13.2-7.8-15.7-2.2-2.6-9.1-10.7-20.9-13-5.6-1.1-10-.4-12.5 0 0 0-22.2 6.6-46-1.5-34.1-11.7-59.5-34.7-74.9-67.6-7.1-15.1-10.8-32-25.1-43.4-30.2-22.6-64.7-28.6-101.1-23-26.6 4.1-45.5 10.2-66.9 18.7C48.8 94.6 26.4 103.5 21.1 124c-3.9 15.1 2.4 32.4 12.8 42.5 12.2 11.8 24.7 10.1 54.3 13.7 29.2 3.6 58.1 9.4 82.5 29 17.1 13.7 35.2 26.7 48.3 44.1 26.1 34.4 28.4 46.2 71.6 114.3 21.2 33.5 34 50.3 56.6 61.7 16.4 8.2 30.9 10 40.4 11.1 6.8 1.1 64.7 9.2 94.3-27.2 4-5 8.2-11.6 11.4-20.4 3.6-10.4 3.6-23.1-4.7-32.6z'/%3E%3C/svg%3E"); /* Water field (brand Water.svg) in a mint tone, for light panels */ --gcs-water-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23DAEFE8' d='M449.3 130.6H91.7c-22.6 0-41 18.3-41 41s18.3 41 41 41h221.8c5.2 0 9.8 3.8 10.3 9 .6 5.9-4.1 10.9-9.9 10.9h-97.1c-18.1 0-33.6 13.9-34.4 31.9-.9 19.2 14.4 35.1 33.5 35.1h31c4.1 0 7.4 3.3 7.4 7.4s-3.3 7.4-7.4 7.4H37.1C22.7 314.4 11 326 11 340.4v2.5c0 14.4 11.7 26.1 26.1 26.1h402.3c14.4 0 26.1-11.7 26.1-26.1v-2.5c0-14.4-11.7-26.1-26.1-26.1H301.5c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4h87.2c18.1 0 33.6-13.9 34.4-31.9.9-19.3-14.4-35.1-33.5-35.1h-8.3c-5.2 0-9.8-3.8-10.3-9-.6-5.9 4.1-10.9 9.9-10.9h68.3c22.6 0 41-18.3 41-41s-18.3-41-40.9-41z'/%3E%3C/svg%3E"); /* Water field in mist, for cream panels */ --gcs-water-mist: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath fill='%23E6EEF0' d='M449.3 130.6H91.7c-22.6 0-41 18.3-41 41s18.3 41 41 41h221.8c5.2 0 9.8 3.8 10.3 9 .6 5.9-4.1 10.9-9.9 10.9h-97.1c-18.1 0-33.6 13.9-34.4 31.9-.9 19.2 14.4 35.1 33.5 35.1h31c4.1 0 7.4 3.3 7.4 7.4s-3.3 7.4-7.4 7.4H37.1C22.7 314.4 11 326 11 340.4v2.5c0 14.4 11.7 26.1 26.1 26.1h402.3c14.4 0 26.1-11.7 26.1-26.1v-2.5c0-14.4-11.7-26.1-26.1-26.1H301.5c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4h87.2c18.1 0 33.6-13.9 34.4-31.9.9-19.3-14.4-35.1-33.5-35.1h-8.3c-5.2 0-9.8-3.8-10.3-9-.6-5.9 4.1-10.9 9.9-10.9h68.3c22.6 0 41-18.3 41-41s-18.3-41-40.9-41z'/%3E%3C/svg%3E"); }