/* ========================================================================== Arthur Labs — design tokens (ART-298) Single source of truth for color, type, spacing, radius, shadow, motion. Plain CSS custom properties: works on the static Hostinger site today and is mirrored by design-system/tailwind.preset.js for a Tailwind build later. Theme: follows the OS by default. Force one with or . ========================================================================== */ :root { /* ---- Primitive palette ------------------------------------------------ */ /* Neutral: cool slate with a slight blue cast (continuity with today's site) */ --al-neutral-0: #ffffff; --al-neutral-50: #f7f8fa; --al-neutral-100: #eef0f4; --al-neutral-200: #dfe3ea; --al-neutral-300: #c5ccd8; --al-neutral-400: #9aa3b5; --al-neutral-500: #6f7889; --al-neutral-600: #525a6a; --al-neutral-700: #363d4b; --al-neutral-800: #1f2530; --al-neutral-850: #171c25; --al-neutral-900: #11151c; --al-neutral-950: #0a0d12; /* Accent: "lab teal" — evolves the current #5eead4 into a usable scale */ --al-accent-50: #effefa; --al-accent-100: #c8fff0; --al-accent-200: #92fde2; --al-accent-300: #5eead4; --al-accent-400: #27d4bc; --al-accent-500: #0eb8a3; --al-accent-600: #089485; --al-accent-700: #0b766c; --al-accent-800: #0e5e57; --al-accent-900: #114e49; /* Status (used sparingly, badges only) */ --al-success: #16a34a; --al-warning: #d97706; --al-danger: #dc2626; /* ---- Typography ------------------------------------------------------- */ --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fluid scale, ratio ≈1.25 (major third); 16px base */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem); /* 20–22 */ --text-2xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /* 24–30 */ --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* 30–40 */ --text-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* 36–56 */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows / badges, uppercase */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Spacing (4px grid) ----------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-24: 6rem; /* 96 */ --section-gap: clamp(var(--space-16), 10vw, var(--space-24)); --gutter: clamp(var(--space-4), 4vw, var(--space-8)); --max-width: 1120px; /* ---- Radius ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 500ms; /* ---- Semantic roles: LIGHT -------------------------------------------- */ --color-bg: var(--al-neutral-50); --color-surface: var(--al-neutral-0); --color-surface-raised: var(--al-neutral-0); --color-surface-sunken: var(--al-neutral-100); --color-border: var(--al-neutral-200); --color-border-strong: var(--al-neutral-300); --color-text: var(--al-neutral-900); --color-text-muted: var(--al-neutral-600); --color-text-subtle: var(--al-neutral-500); --color-accent: var(--al-accent-700); /* 5.5:1 on white */ --color-accent-hover: var(--al-accent-800); --color-accent-soft: var(--al-accent-50); --color-on-accent: var(--al-neutral-0); --color-focus: var(--al-accent-500); --shadow-sm: 0 1px 2px rgb(17 21 28 / 0.06); --shadow-md: 0 2px 4px rgb(17 21 28 / 0.04), 0 8px 24px rgb(17 21 28 / 0.08); --shadow-lg: 0 4px 8px rgb(17 21 28 / 0.05), 0 24px 48px rgb(17 21 28 / 0.12); color-scheme: light; } /* ---- Semantic roles: DARK ----------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: var(--al-neutral-950); --color-surface: var(--al-neutral-900); --color-surface-raised: var(--al-neutral-850); --color-surface-sunken: var(--al-neutral-950); --color-border: rgb(255 255 255 / 0.08); --color-border-strong: rgb(255 255 255 / 0.16); --color-text: var(--al-neutral-100); --color-text-muted: var(--al-neutral-400); --color-text-subtle: var(--al-neutral-500); --color-accent: var(--al-accent-300); --color-accent-hover: var(--al-accent-200); --color-accent-soft: rgb(94 234 212 / 0.1); --color-on-accent: var(--al-neutral-950); --color-focus: var(--al-accent-300); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35); --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 24px 48px rgb(0 0 0 / 0.5); color-scheme: dark; } } :root[data-theme="dark"] { --color-bg: var(--al-neutral-950); --color-surface: var(--al-neutral-900); --color-surface-raised: var(--al-neutral-850); --color-surface-sunken: var(--al-neutral-950); --color-border: rgb(255 255 255 / 0.08); --color-border-strong: rgb(255 255 255 / 0.16); --color-text: var(--al-neutral-100); --color-text-muted: var(--al-neutral-400); --color-text-subtle: var(--al-neutral-500); --color-accent: var(--al-accent-300); --color-accent-hover: var(--al-accent-200); --color-accent-soft: rgb(94 234 212 / 0.1); --color-on-accent: var(--al-neutral-950); --color-focus: var(--al-accent-300); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.35); --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 24px 48px rgb(0 0 0 / 0.5); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }