/* ========================================================================== Design tokens — txcertco.com Version: v1.0.0 Created: 23 October 2026 Site: txcertco-com (Firebase target: txcertco) Deploy path: /sites/txcertco-com/public/tokens.css CHANGELOG v1.0.0 2026-10-23 Initial creation. Same token structure as ganngroup.com so /shared/css/base.css reads it unchanged; brand values are TX Certification Co. --------------------------------------------------------------------------- PALETTE SOURCE Both brand values are sampled from the logo files the Duda site serves (TXCC Logo Linear-Short and TXCC Logo White, flat PNGs, not compressed photos): near-black #111111 the wordmark signal green #06F917 the round mark The green is a fill and highlight colour only. It is far too light to be text on white (1.4:1). Links and anything readable on a light surface use --color-brand-700, a darkened step of the same hue. On the near-black surface the logo green itself is readable (13.1:1) and is used there. --------------------------------------------------------------------------- MEASURED CONTRAST On white (#FFFFFF): --color-text #111111 18.9:1 AAA --color-text-muted #4B5157 8.0:1 AAA --color-link #0B7A17 5.5:1 AA On light grey (#F3F4F5): --color-text #111111 17.1:1 AAA --color-link #0B7A17 5.0:1 AA On near-black (#111111): #06F917 (logo green) 13.1:1 AAA #E9ECEE (inverse text) 15.9:1 AAA Primary button: #111111 text on #06F917 fill, 13.1:1. ========================================================================== */ :root { /* ====================================================================== 0. FIXED BRAND REFERENCES — sampled from the logo files. Never adjust. ====================================================================== */ --brand-txcc-black: #111111; --brand-txcc-green: #06F917; /* ====================================================================== 1. PALETTE ====================================================================== */ /* Brand — green. 500 is the logo value. */ --color-brand-50: #ECFEEE; --color-brand-100: #D2FDD6; --color-brand-200: #A6FBAE; --color-brand-300: #6EFA7B; --color-brand-400: #3BF94C; --color-brand-500: #06F917; --color-brand-600: #05C412; --color-brand-700: #0B7A17; --color-brand-800: #0A5E13; --color-brand-900: #08440E; --color-brand-950: #052A09; /* Accent — the brand green again, so base.css list markers and rules that read --color-accent-* stay on-brand. */ --color-accent-100: #D2FDD6; --color-accent-200: #A6FBAE; --color-accent-300: #6EFA7B; --color-accent-400: #3BF94C; --color-accent-500: #06F917; --color-accent-600: #05C412; --color-accent-700: #0B7A17; --color-accent-800: #0A5E13; --color-accent-900: #08440E; /* Neutral — cool greys anchored on the logo black. */ --color-neutral-0: #FFFFFF; --color-neutral-50: #F8F9FA; --color-neutral-100: #F3F4F5; --color-neutral-200: #E9ECEE; --color-neutral-300: #D6DADD; --color-neutral-400: #B9BFC4; --color-neutral-500: #9AA1A7; --color-neutral-600: #6E757B; --color-neutral-700: #4B5157; --color-neutral-800: #2C3034; --color-neutral-900: #1B1D1F; --color-neutral-950: #111111; /* Status */ --color-success-100: #E3F2E8; --color-success-600: #2F7A4D; --color-success-800: #1D4E31; --color-warning-100: #FBF0D6; --color-warning-600: #9A6B00; --color-warning-800: #634500; --color-error-100: #FBE6E4; --color-error-600: #B3261E; --color-error-800: #7A1913; /* ====================================================================== 2. SEMANTIC COLOUR ====================================================================== */ --color-text: var(--color-neutral-950); --color-text-strong: var(--color-neutral-950); --color-text-muted: var(--color-neutral-700); --color-text-inverse: var(--color-neutral-200); --color-text-on-accent: var(--color-neutral-950); --color-surface: var(--color-neutral-0); --color-surface-alt: var(--color-neutral-100); --color-surface-sunken: var(--color-neutral-100); --color-surface-raised: var(--color-neutral-0); --color-surface-inverse: var(--color-neutral-950); --color-surface-legal: #0A0A0A; --color-surface-accent: var(--color-brand-50); --color-border: var(--color-neutral-300); --color-border-strong: var(--color-neutral-400); --color-border-inverse: var(--color-neutral-800); --color-link: var(--color-brand-700); --color-link-hover: var(--color-brand-800); --color-link-visited: var(--color-brand-700); --color-link-inverse: var(--color-brand-500); --color-focus-ring: var(--color-brand-600); --color-selection-bg: var(--color-brand-100); --color-selection-text: var(--color-neutral-950); --color-overlay: rgb(17 17 17 / 0.62); --color-scrim: rgb(0 0 0 / 0.35); /* ====================================================================== 3. TYPEFACES — declared in /shared/css/fonts.css. The logo is a wide geometric sans, so headings stay in the sans family rather than a serif. ====================================================================== */ --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace; /* ====================================================================== 4. TYPE SCALE — shared, identical to the template ====================================================================== */ --step--2: clamp(0.750rem, 0.7125rem + 0.125vw, 0.8125rem); --step--1: clamp(0.875rem, 0.8375rem + 0.125vw, 0.9375rem); --step-0: clamp(1.000rem, 0.9250rem + 0.250vw, 1.1250rem); --step-1: clamp(1.125rem, 0.9750rem + 0.500vw, 1.3750rem); --step-2: clamp(1.375rem, 1.1500rem + 0.750vw, 1.7500rem); --step-3: clamp(1.625rem, 1.3250rem + 1.000vw, 2.1250rem); --step-4: clamp(2.000rem, 1.4000rem + 2.000vw, 3.0000rem); --step-5: clamp(2.500rem, 1.7500rem + 2.500vw, 3.7500rem); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heading: 700; --leading-none: 1; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em; --measure: 68ch; --measure-narrow: 48ch; /* ====================================================================== 5. SPACING — shared ====================================================================== */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --space-section: clamp(2.5rem, 1.3rem + 4vw, 5rem); --space-section-tight: clamp(1.5rem, 0.9rem + 2vw, 2.5rem); --space-section-loose: clamp(4rem, 2.2rem + 6vw, 7.5rem); /* ====================================================================== 6. LAYOUT — shared ====================================================================== */ --width-container: 1120px; --width-container-wide: 1280px; --width-container-narrow: 760px; --space-gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem); --grid-columns: 12; --grid-gap: clamp(1rem, 0.7rem + 1.5vw, 1.5rem); --grid-gap-row: var(--space-lg); --tap-target-min: 44px; /* ====================================================================== 7. BORDERS, RADII, SHADOWS — small radius; technical, not soft. ====================================================================== */ --border-width-hairline: 1px; --border-width-rule: 2px; --border-width-heavy: 4px; --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgb(17 17 17 / 0.06), 0 1px 3px rgb(17 17 17 / 0.08); --shadow-md: 0 2px 4px rgb(17 17 17 / 0.05), 0 4px 12px rgb(17 17 17 / 0.10); --shadow-lg: 0 4px 8px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.14); /* ====================================================================== 8. MOTION — shared ====================================================================== */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ====================================================================== 9. LAYERING — shared ====================================================================== */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-drawer-overlay: 290; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-skip-link: 600; /* ====================================================================== 10. FOCUS — shared ====================================================================== */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-style: solid; /* ====================================================================== 11. COMPONENT TOKENS ====================================================================== */ /* --- Button -------------------------------------------------------- */ --btn-font: var(--font-body); --btn-font-size: var(--step--1); --btn-font-weight: var(--weight-bold); --btn-tracking: var(--tracking-wide); --btn-padding-block: 0.875rem; --btn-padding-inline: 1.75rem; --btn-radius: var(--radius-sm); --btn-border-width: 1px; --btn-min-width: 240px; --btn-min-height: var(--tap-target-min); --btn-primary-bg: var(--color-brand-500); --btn-primary-bg-hover: var(--color-brand-400); --btn-primary-text: var(--color-neutral-950); --btn-primary-border: transparent; --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-neutral-950); --btn-secondary-text: var(--color-neutral-950); --btn-secondary-text-hover: var(--color-neutral-0); --btn-secondary-border: var(--color-neutral-950); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-brand-50); --btn-ghost-text: var(--color-brand-700); --btn-ghost-border: var(--color-neutral-300); /* --- Header -------------------------------------------------------- */ --header-bg: var(--color-surface-inverse); --header-text: var(--color-text-inverse); --header-border: var(--color-border-inverse); --header-padding-block: var(--space-sm); --header-logo-height: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); /* --- Navigation ---------------------------------------------------- */ --nav-font: var(--font-body); --nav-font-size: var(--step--1); --nav-font-weight: var(--weight-semibold); --nav-tracking: var(--tracking-wide); --nav-item-gap: var(--space-md); --nav-text: var(--color-text-inverse); --nav-text-hover: var(--color-brand-500); /* --- Footer -------------------------------------------------------- */ --footer-bg: var(--color-surface-inverse); --footer-text: var(--color-neutral-400); --footer-heading: var(--color-neutral-200); --footer-link: var(--color-neutral-200); --footer-link-hover: var(--color-brand-500); --footer-border: var(--color-border-inverse); --footer-padding-block: var(--space-2xl); --footer-font-size: var(--step--1); /* --- Form fields --------------------------------------------------- */ --field-bg: var(--color-neutral-0); --field-text: var(--color-text); --field-placeholder: var(--color-neutral-600); --field-border: var(--color-border-strong); --field-border-hover: var(--color-neutral-600); --field-border-focus: var(--color-brand-700); --field-border-error: var(--color-error-600); --field-radius: var(--radius-sm); --field-padding-block: 0.75rem; --field-padding-inline: 0.875rem; --field-min-height: var(--tap-target-min); --field-font-size: var(--step-0); --field-label-size: var(--step--1); --field-label-weight: var(--weight-semibold); --field-help-size: var(--step--1); --field-help-text: var(--color-text-muted); --field-error-text: var(--color-error-800); --field-required-mark: var(--color-brand-700); /* --- Card ---------------------------------------------------------- */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-padding: var(--space-md); --card-shadow: none; /* --- Divider ------------------------------------------------------- */ --divider-color: var(--color-border); --divider-width: var(--border-width-hairline); --divider-margin: var(--space-lg); /* --- Media --------------------------------------------------------- */ --media-radius: var(--radius-md); --media-placeholder: var(--color-neutral-300); --video-aspect: 16 / 9; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }