/* ========================================================================== VARIABLES.CSS — Design Tokens toilet-cubicle.co.uk Industrial precision meets architectural elegance ========================================================================== */ :root { /* ----------------------------------------------------------------------- COLOUR PALETTE ----------------------------------------------------------------------- */ /* Primary — Charcoal */ --color-charcoal: #2D3436; --color-charcoal-light: #3D4447; --color-charcoal-dark: #1A1E1F; /* Primary — Green (action, CTA, accent) */ --color-green: #27AE60; --color-green-dark: #1E8C4C; --color-green-light: #2ECC71; --color-green-muted: rgba(39, 174, 96, 0.12); /* Neutrals */ --color-white: #FFFFFF; --color-off-white: #F5F6FA; --color-grey-50: #FAFAFA; --color-grey-100: #F0F0F0; --color-grey-200: #E5E7EB; --color-grey-300: #D1D5DB; --color-grey-400: #9CA3AF; --color-grey-600: #6B7280; --color-grey-800: #374151; --color-grey-900: #1F2937; /* Semantic */ --color-red: #E74C3C; --color-red-light: rgba(231, 76, 60, 0.10); --color-success: var(--color-green); --color-error: var(--color-red); /* Derived / Surface */ --color-body-bg: var(--color-white); --color-surface: var(--color-white); --color-surface-raised: var(--color-white); --color-border: var(--color-grey-200); --color-text-primary: var(--color-grey-900); --color-text-secondary: var(--color-grey-600); --color-text-inverse: var(--color-white); /* ----------------------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------------------- */ /* Font families */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace; /* Font sizes — modular scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 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: 3rem; /* 48px */ --text-5xl: 3.5rem; /* 56px */ /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ----------------------------------------------------------------------- SPACING — 8px base unit ----------------------------------------------------------------------- */ --sp-px: 1px; --sp-0: 0; --sp-1: 0.5rem; /* 8px */ --sp-2: 1rem; /* 16px */ --sp-3: 1.5rem; /* 24px */ --sp-4: 2rem; /* 32px */ --sp-5: 2.5rem; /* 40px */ --sp-6: 3rem; /* 48px */ --sp-7: 3.5rem; /* 56px */ --sp-8: 4rem; /* 64px */ --sp-9: 4.5rem; /* 72px */ --sp-10: 5rem; /* 80px */ --sp-11: 5.5rem; /* 88px */ --sp-12: 6rem; /* 96px */ /* ----------------------------------------------------------------------- LAYOUT ----------------------------------------------------------------------- */ --container-max: 1280px; --container-narrow: 900px; --container-wide: 1440px; --header-height: 64px; --sidebar-width: 380px; --footer-min-height: 200px; /* ----------------------------------------------------------------------- BORDERS & RADII ----------------------------------------------------------------------- */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --border-width: 1px; /* ----------------------------------------------------------------------- TRANSITIONS ----------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 250ms var(--ease-out); --transition-slow: 400ms var(--ease-in-out); /* ----------------------------------------------------------------------- SHADOWS — layered for realism ----------------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04); /* Coloured shadows for emphasis */ --shadow-green: 0 4px 14px rgba(39, 174, 96, 0.25); --shadow-green-lg: 0 8px 24px rgba(39, 174, 96, 0.30); /* ----------------------------------------------------------------------- Z-INDEX SCALE ----------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ----------------------------------------------------------------------- BREAKPOINTS (for reference — use in media queries as raw values) sm: 576px md: 768px lg: 1024px xl: 1280px ----------------------------------------------------------------------- */ }