/** * CSC design tokens. * * The single source of truth for colour, type, space and motion. * Nothing else in the theme may hardcode a hex value. * * Derived from: CSC Brand Guidelines 2023 v1.0 * Contrast values are WCAG 2.1, measured against #FFFFFF unless noted. */ /* --------------------------------------------------------------- Inter — self-hosted. Google's CDN is not used: it discloses visitor IPs to a third country, which Complianz cannot consent away for an EU operator. --------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); /* Lithuanian ą č ę ė į š ų ū ž live in U+0100–017F. */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ---------- brand: verbatim from the guidelines ---------- */ --csc-orange: #FF8000; --csc-coral: #FF5330; --csc-red: #FF3030; --csc-black: #000000; --csc-gradient: linear-gradient(135deg, #FF3030 0%, #FF8000 100%); /* ---------- derived: the brand values cannot carry text ---------- #FF8000 is 2.52:1 on white, so it is a fill, never an ink. */ --csc-orange-ink: #B45A00; /* 4.77:1 on white — links, small text */ --csc-orange-hover: #E67300; /* primary button hover */ --csc-on-orange: #0A0A0B; /* 8.34:1 on orange — button labels */ --csc-orange-soft: #FFF1E2; /* tint for focus rings and soft panels */ /* ---------- grays ---------- 100–500 are brandbook values. 600–800 are additions: the brandbook scale stops at 500, which cannot carry body copy (#828282 is only 3.84:1 on white). */ --csc-white: #FFFFFF; --csc-gray-100: #F5F5F5; --csc-gray-200: #E8E8E8; --csc-gray-300: #D9D9D9; --csc-gray-400: #B5B5B5; --csc-gray-500: #828282; --csc-gray-600: #5C5C5C; --csc-gray-700: #3D3D3D; --csc-gray-800: #1F1F1F; /* ---------- supplementary tints ---------- */ --csc-spring: #E7F3DF; --csc-beige: #F2F2CF; --csc-rose: #FCE1DA; --csc-foam: #D6E7EC; /* ---------- semantic: fill + matching ink ---------- Every fill below fails as text on white. Use the -ink partner for any type sitting on the tint. */ --csc-ok: #6CBE3A; --csc-ok-ink: #3F7A1E; /* 5.23:1 */ --csc-ok-bg: var(--csc-spring); --csc-warn: #FAC400; --csc-warn-ink: #8A6A00; /* 5.07:1 */ --csc-warn-bg: var(--csc-beige); --csc-bad: #EE1144; --csc-bad-ink: #C90D38; /* 5.84:1 */ --csc-bad-bg: var(--csc-rose); --csc-info: #2B7A94; --csc-info-ink: #1F5B6E; --csc-info-bg: var(--csc-foam); /* ---------- semantic surface roles ---------- Templates reference these, not the raw palette, so a future dark mode is a matter of redefining this block alone. */ --csc-bg: var(--csc-white); --csc-bg-subtle: var(--csc-gray-100); --csc-bg-muted: var(--csc-gray-200); --csc-text: #0A0A0B; --csc-text-muted: var(--csc-gray-600); --csc-text-subtle: var(--csc-gray-500); --csc-border: var(--csc-gray-200); --csc-border-strong: var(--csc-gray-300); --csc-link: var(--csc-orange-ink); /* ---------- type ---------- */ --csc-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --csc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --csc-fs-display: clamp(2.25rem, 1.3rem + 4.2vw, 3.5rem); /* 36 → 56 */ --csc-fs-h1: clamp(1.9rem, 1.2rem + 3.1vw, 2.75rem); /* 30 → 44 */ --csc-fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); /* 24 → 32 */ --csc-fs-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem); /* 20 → 24 */ --csc-fs-h4: 1.25rem; /* 20 */ --csc-fs-lg: 1.125rem; /* 18 */ --csc-fs-body: 1rem; /* 16 */ --csc-fs-sm: 0.875rem; /* 14 */ --csc-fs-caption: 0.75rem; /* 12 */ --csc-fs-label: 0.6875rem; /* 11 */ --csc-lh-tight: 1.1; --csc-lh-heading: 1.2; --csc-lh-body: 1.6; /* Negative tracking scales with size — this is what stops a neo-grotesque reading loose at display sizes. */ --csc-ls-display: -0.033em; --csc-ls-h1: -0.03em; --csc-ls-h2: -0.022em; --csc-ls-h3: -0.015em; --csc-ls-body: 0; --csc-ls-label: 0.14em; --csc-fw-regular: 400; --csc-fw-medium: 500; --csc-fw-semibold: 600; --csc-fw-bold: 700; --csc-fw-extrabold: 800; --csc-fw-black: 900; /* hero thesis only */ --csc-measure: 68ch; /* Lithuanian compounds get hard to track past this */ /* ---------- space: 4px base ---------- */ --csc-sp-1: 0.25rem; --csc-sp-2: 0.5rem; --csc-sp-3: 0.75rem; --csc-sp-4: 1rem; --csc-sp-5: 1.25rem; --csc-sp-6: 1.5rem; --csc-sp-8: 2rem; --csc-sp-10: 2.5rem; --csc-sp-12: 3rem; --csc-sp-16: 4rem; --csc-sp-20: 5rem; --csc-sp-24: 6rem; --csc-section-gap: clamp(3rem, 1.5rem + 6vw, 6rem); --csc-gutter: 1rem; /* never below 16px at any width */ --csc-grid-gap: 1.5rem; --csc-container: 1320px; /* ---------- radius & elevation ---------- */ --csc-radius-sm: 6px; /* buttons, inputs */ --csc-radius-md: 10px; /* cards, panels */ --csc-radius-pill: 999px; /* badges, tags */ /* Two levels only. A border already separates a resting card. */ --csc-shadow-raised: 0 1px 2px rgba(10, 10, 11, 0.05), 0 8px 24px -12px rgba(10, 10, 11, 0.18); --csc-shadow-overlay: 0 4px 12px rgba(10, 10, 11, 0.1), 0 24px 48px -16px rgba(10, 10, 11, 0.24); /* ---------- motion ---------- */ --csc-ease: cubic-bezier(0.2, 0, 0.2, 1); --csc-dur-ui: 150ms; --csc-dur-enter: 250ms; /* ---------- layering ---------- */ --csc-z-dropdown: 100; --csc-z-sticky: 200; --csc-z-header: 300; --csc-z-overlay: 400; --csc-z-modal: 500; } /* Breakpoints, for reference — CSS custom properties cannot be used in media queries, so these values are repeated literally in base.css and components.css. Keep them in sync. sm 576px container 540px md 768px container 720px lg 992px container 960px xl 1200px container 1140px xxl 1400px container 1320px */