/* ========================================================================== Velora Tech Consulting — Design Tokens veloratech.mx ArchitectUX — 2026-04-08 ========================================================================== Token layers (in order of specificity): 1. Primitive tokens — raw values, no semantic meaning 2. Semantic tokens — intent-based aliases that reference primitives 3. Component tokens — scoped to a specific component pattern Usage convention: Always consume semantic tokens in component/layout CSS. Primitive tokens exist only so semantic tokens have a single source of truth. ========================================================================== */ /* -------------------------------------------------------------------------- 1. PRIMITIVE COLOR TOKENS -------------------------------------------------------------------------- */ :root { --primitive-navy: #163B73; --primitive-navy-deep: #0F2B57; --primitive-teal: #35C3B0; --primitive-white: #FFFFFF; --primitive-gray-light: #F3F6FA; --primitive-gray-mid: #D8E0EA; --primitive-gray-dark: #263244; /* Teal scale — generated for hover / active states */ --primitive-teal-light: #5DD1C2; /* +20% lightness */ --primitive-teal-dark: #27A898; /* -10% lightness */ /* Navy scale — used for hover / active states on navy surfaces */ --primitive-navy-light: #1E4E96; } /* -------------------------------------------------------------------------- 2. SEMANTIC COLOR TOKENS — Light theme (default) -------------------------------------------------------------------------- */ :root { /* Backgrounds */ --color-bg-primary: var(--primitive-white); --color-bg-secondary: var(--primitive-gray-light); --color-bg-invert: var(--primitive-navy); --color-bg-invert-deep: var(--primitive-navy-deep); /* Surfaces (cards, panels) */ --color-surface: var(--primitive-white); --color-surface-raised: var(--primitive-gray-light); --color-surface-invert: var(--primitive-navy-light); /* Text */ --color-text-primary: var(--primitive-gray-dark); --color-text-secondary: #4A5568; /* readable muted on white */ --color-text-muted: #718096; --color-text-invert: var(--primitive-white); --color-text-invert-muted: rgba(255, 255, 255, 0.72); /* Brand */ --color-brand-primary: var(--primitive-navy); --color-brand-primary-hover: var(--primitive-navy-deep); --color-brand-accent: var(--primitive-teal); --color-brand-accent-hover: var(--primitive-teal-dark); --color-brand-accent-subtle: rgba(53, 195, 176, 0.12); /* Borders */ --color-border: var(--primitive-gray-mid); --color-border-strong: #B0BCCF; --color-border-invert: rgba(255, 255, 255, 0.18); /* Feedback (future-proofing) */ --color-success: #22C55E; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: var(--primitive-teal); /* Raw brand references — keep for direct use where needed */ --color-navy: var(--primitive-navy); --color-navy-deep: var(--primitive-navy-deep); --color-teal: var(--primitive-teal); --color-white: var(--primitive-white); --color-gray-light: var(--primitive-gray-light); --color-gray-mid: var(--primitive-gray-mid); --color-gray-dark: var(--primitive-gray-dark); } /* -------------------------------------------------------------------------- 3. DARK THEME — activated via data-theme="dark" -------------------------------------------------------------------------- */ [data-theme="dark"] { --color-bg-primary: #0D1B2E; --color-bg-secondary: #132236; --color-bg-invert: var(--primitive-navy-deep); --color-bg-invert-deep: #09172A; --color-surface: #132236; --color-surface-raised: #1A2D44; --color-surface-invert: #0D1B2E; --color-text-primary: #EDF2F7; --color-text-secondary: #A0AEC0; --color-text-muted: #718096; --color-text-invert: var(--primitive-white); --color-text-invert-muted: rgba(255, 255, 255, 0.60); --color-brand-primary: var(--primitive-teal); --color-brand-primary-hover: var(--primitive-teal-light); --color-brand-accent: var(--primitive-teal); --color-brand-accent-hover: var(--primitive-teal-light); --color-brand-accent-subtle: rgba(53, 195, 176, 0.16); --color-border: #1E3A58; --color-border-strong: #2A4D6E; --color-border-invert: rgba(255, 255, 255, 0.12); } /* System preference dark — applies when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-primary: #0D1B2E; --color-bg-secondary: #132236; --color-bg-invert: var(--primitive-navy-deep); --color-bg-invert-deep: #09172A; --color-surface: #132236; --color-surface-raised: #1A2D44; --color-surface-invert: #0D1B2E; --color-text-primary: #EDF2F7; --color-text-secondary: #A0AEC0; --color-text-muted: #718096; --color-text-invert: var(--primitive-white); --color-text-invert-muted: rgba(255, 255, 255, 0.60); --color-brand-primary: var(--primitive-teal); --color-brand-primary-hover: var(--primitive-teal-light); --color-brand-accent: var(--primitive-teal); --color-brand-accent-hover: var(--primitive-teal-light); --color-brand-accent-subtle: rgba(53, 195, 176, 0.16); --color-border: #1E3A58; --color-border-strong: #2A4D6E; --color-border-invert: rgba(255, 255, 255, 0.12); } } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY TOKENS -------------------------------------------------------------------------- */ :root { /* Font families */ --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; /* Type scale — base 16px / 1rem */ --text-2xs: 0.75rem; /* 12px */ --text-xs: 0.875rem; /* 14px */ --text-sm: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.5rem; /* 40px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 4.5rem; /* 72px */ /* Font weights */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line heights */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --leading-loose: 1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.12em; } /* -------------------------------------------------------------------------- 5. SPACING TOKENS — 4px base unit -------------------------------------------------------------------------- */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Semantic spacing aliases */ --section-padding-desktop: var(--space-20); /* 80px */ --section-padding-tablet: var(--space-16); /* 60px — approx via space-16 */ --section-padding-mobile: var(--space-12); /* 48px */ --container-padding-desktop: 5rem; /* 80px horizontal */ --container-padding-tablet: 3rem; /* 48px horizontal */ --container-padding-mobile: 1.5rem; /* 24px horizontal */ --content-max-width: 75rem; /* 1200px */ } /* -------------------------------------------------------------------------- 6. SHADOW TOKENS -------------------------------------------------------------------------- */ :root { /* sm — subtle lift for cards at rest */ --shadow-sm: 0 1px 2px rgba(22, 59, 115, 0.04), 0 2px 8px rgba(22, 59, 115, 0.06); /* md — elevated card, hover state, dropdowns */ --shadow-md: 0 4px 12px rgba(22, 59, 115, 0.08), 0 8px 24px rgba(22, 59, 115, 0.10); /* lg — modals, drawers, sticky header on scroll */ --shadow-lg: 0 8px 24px rgba(22, 59, 115, 0.10), 0 20px 48px rgba(22, 59, 115, 0.14); /* Teal glow — CTA buttons, accent highlights */ --shadow-teal: 0 0 0 3px rgba(53, 195, 176, 0.30), 0 4px 16px rgba(53, 195, 176, 0.24); /* Inner shadow — pressed states */ --shadow-inset: inset 0 2px 4px rgba(22, 59, 115, 0.10); } [data-theme="dark"] { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36), 0 20px 48px rgba(0, 0, 0, 0.44); --shadow-teal: 0 0 0 3px rgba(53, 195, 176, 0.40), 0 4px 16px rgba(53, 195, 176, 0.32); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36), 0 20px 48px rgba(0, 0, 0, 0.44); } } /* -------------------------------------------------------------------------- 7. BORDER RADIUS TOKENS -------------------------------------------------------------------------- */ :root { --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 9999px; /* pill shape */ } /* -------------------------------------------------------------------------- 8. TRANSITION TOKENS -------------------------------------------------------------------------- */ :root { --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Easing curves for animation */ --ease-in-out-cubic: cubic-bezier(0.4, 0, 0.2, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Composite transitions for frequently toggled properties */ --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); --transition-shadow: box-shadow var(--transition-base); --transition-transform: transform var(--transition-base) var(--ease-out-expo); /* Full surface transition — used on body for theme switching */ --transition-theme: background-color var(--transition-slow), color var(--transition-slow); } /* -------------------------------------------------------------------------- 9. Z-INDEX SCALE -------------------------------------------------------------------------- */ :root { --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-dropdown: 200; --z-sticky: 300; /* sticky header */ --z-modal: 400; --z-toast: 500; } /* -------------------------------------------------------------------------- 10. LAYOUT TOKENS -------------------------------------------------------------------------- */ :root { /* Grid */ --grid-columns: 12; --grid-gap: var(--space-6); /* 24px default column gap */ --grid-gap-sm: var(--space-4); /* 16px tight grids */ --grid-gap-lg: var(--space-8); /* 32px wide grids */ /* Header */ --header-height-desktop: 72px; --header-height-mobile: 60px; /* Breakpoints — referenced in ARCHITECTURE.md; cannot be used directly in media queries, listed here as documentation tokens only */ --bp-mobile: 768px; /* < 768px → mobile */ --bp-tablet: 1024px; /* 768–1024px → tablet */ --bp-desktop: 1024px; /* > 1024px → desktop */ } /* -------------------------------------------------------------------------- 11. COMPONENT TOKENS -------------------------------------------------------------------------- */ /* --- Button --- */ :root { --btn-padding-y: 0.75rem; /* 12px */ --btn-padding-x: 1.5rem; /* 24px */ --btn-padding-y-sm: 0.5rem; /* 8px */ --btn-padding-x-sm: 1rem; /* 16px */ --btn-padding-y-lg: 1rem; /* 16px */ --btn-padding-x-lg: 2rem; /* 32px */ --btn-border-radius: var(--radius-full); --btn-font-size: var(--text-xs); /* 14px */ --btn-font-weight: var(--font-semibold); --btn-letter-spacing: var(--tracking-wide); --btn-transition: var(--transition-base); /* Primary button (teal on navy context) */ --btn-primary-bg: var(--color-brand-accent); --btn-primary-bg-hover: var(--color-brand-accent-hover); --btn-primary-color: var(--primitive-navy-deep); --btn-primary-shadow: var(--shadow-teal); /* Secondary / ghost button */ --btn-ghost-color: var(--color-brand-accent); --btn-ghost-border: var(--color-brand-accent); --btn-ghost-bg-hover: var(--color-brand-accent-subtle); } /* --- Card --- */ :root { --card-padding: var(--space-8); /* 32px */ --card-padding-sm: var(--space-6); /* 24px */ --card-border-radius: var(--radius-md); --card-border: 1px solid var(--color-border); --card-bg: var(--color-surface); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); } /* --- Navigation --- */ :root { --nav-bg: var(--color-navy); --nav-bg-scrolled: var(--color-navy-deep); --nav-link-color: rgba(255, 255, 255, 0.80); --nav-link-hover: var(--primitive-white); --nav-link-active: var(--primitive-teal); --nav-link-font-size: var(--text-xs); /* 14px */ --nav-link-weight: var(--font-medium); --nav-link-spacing: var(--tracking-wide); /* Mobile nav drawer */ --nav-drawer-bg: var(--color-navy-deep); --nav-drawer-width: 280px; } /* --- Theme Toggle --- */ :root { --toggle-bg: var(--color-surface-raised); --toggle-border: var(--color-border); --toggle-active-bg: var(--color-brand-accent); --toggle-active-color: var(--primitive-navy-deep); --toggle-border-radius: var(--radius-full); } /* --- Section backgrounds --- */ :root { --section-hero-bg: var(--color-navy); --section-alt-bg: var(--color-bg-secondary); --section-default-bg: var(--color-bg-primary); --section-cta-bg: var(--color-navy); --section-footer-bg: var(--color-navy-deep); }