/* Minecare Evolution — design tokens Colour, type, spacing, and base element defaults. Plain CSS custom properties, no build step required. Note: webfonts are loaded from (preconnect + ), not via @import here — @import blocks on a second round trip before fonts start downloading. */ :root { color-scheme: light; /* Primary */ --me-blue: #57ACEA; /* Minecare Blue — the wordmark */ --me-bedrock: #04263A; /* deepest navy, inverse surfaces */ --me-signal: #3FCEFF; /* bright cyan accent */ /* Depth ramp — charts, tiers, shading (dark → light) */ --me-blue-900: #04263A; --me-blue-800: #004566; --me-blue-700: #096491; --me-blue-600: #146E9A; --me-blue-500: #2179A4; --me-blue-400: #278FC3; --me-blue-300: #57ACEA; --me-blue-200: #90AADC; --me-blue-100: #9DC3E6; --me-blue-050: #E4ECF1; /* Neutrals */ --me-ink: #0B2A3D; --me-slate: #3A4E5C; --me-muted: #5E7687; --me-mist: #E4ECF1; --me-paper: #F6F9FB; --me-white: #FFFFFF; --me-line: rgba(11, 42, 61, 0.12); --me-line-strong: rgba(11, 42, 61, 0.24); /* Secondary spectrum — expressive / data only, not core UI */ --me-green: #13B75C; --me-lime: #C9ED73; --me-gold: #FFC000; --me-coral: #FCBB8A; --me-red: #FF6B6B; --me-magenta: #D572DC; --me-purple: #7030A0; --me-sky: #2E75B6; /* Semantic status */ --me-success: #13B75C; --me-success-surface: #F1F7EF; --me-danger: #B0424B; --me-danger-surface: #FBF0F0; /* Semantic aliases (prefer these) */ --text-heading: var(--me-ink); --text-body: var(--me-slate); --text-muted: var(--me-muted); --text-on-accent: var(--me-white); --text-on-inverse: #B7D3E6; --surface-page: var(--me-paper); --surface-card: var(--me-white); --surface-sunken: var(--me-paper); --surface-inverse: var(--me-bedrock); --border-default: var(--me-line); --border-strong: var(--me-line-strong); --accent: var(--me-blue); --accent-strong: var(--me-blue-500); --accent-contrast: var(--me-bedrock); --focus-ring: var(--me-signal); --link: var(--me-blue-500); --link-hover: var(--me-blue); /* Type */ --font-display: 'Ubuntu', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --text-hero: clamp(34px, 5vw, 60px); --text-h1: clamp(28px, 3.6vw, 44px); --text-h2: 28px; --text-h3: 20px; --text-lead: clamp(17px, 1.8vw, 21px); --text-body-lg: 18px; --text-body-md: 16px; --text-body-sm: 14px; --text-label: 12px; --lh-tight: 1.05; --lh-heading: 1.1; --lh-body: 1.6; --ls-display: -0.015em; --ls-label: 0.2em; --ls-label-sm: 0.14em; /* Spacing / radius / shadow / motion — 4px base unit */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 44px; --space-8: 64px; --space-9: 96px; --space-10: 110px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(11, 42, 61, 0.06); --shadow-md: 0 4px 16px rgba(11, 42, 61, 0.08); --shadow-lg: 0 12px 40px rgba(4, 38, 58, 0.18); --focus-width: 3px; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 120ms; --dur-base: 180ms; /* Entrance/reveal motion — longer-duration counterparts to the micro-interaction tokens above, same quiet no-bounce curve. */ --dur-entrance: 600ms; --dur-reveal: 500ms; --stagger-step: 70ms; } /* Base element defaults */ body { margin: 0; background: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-body-md); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-display); text-transform: lowercase; /* brand casing rule */ margin: 0 0 var(--space-4); } h1 { font-size: var(--text-h1); font-weight: var(--fw-bold); } h2 { font-size: var(--text-h2); font-weight: var(--fw-medium); } h3 { font-size: var(--text-h3); font-weight: var(--fw-bold); } p { margin: 0 0 var(--space-4); } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } ::selection { background: var(--me-blue); color: #fff; } .me-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-strong); }