/* ========================================================================== VARIABLES.CSS — Design Tokens toilet-cubicle.co.uk — A Paneltech brand Engineered washrooms, configured online. See docs/brand/BRAND.md ========================================================================== */ :root { /* ----------------------------------------------------------------------- COLOUR PALETTE ----------------------------------------------------------------------- */ /* Primary — Charcoal */ --color-charcoal: #2D3436; --color-charcoal-light: #3D4447; --color-charcoal-dark: #1A1E1F; /* Brand — Petrol / Lime / Teal / Stone (Paneltech palette, BRAND.md §1) */ --color-petrol: #1E5760; --color-petrol-dark: #15414A; --color-petrol-deep: #0E2E34; --color-petrol-light: #2A6E79; --color-petrol-tint: rgba(30, 87, 96, 0.10); --color-lime: #B8DA07; --color-lime-dark: #9DBA06; --color-teal: #39B5AF; --color-teal-tint: #CDEDEB; --color-stone: #C2C7BA; /* Legacy green tokens — re-pointed to petrol so existing CSS re-skins automatically. Do not use in new code; prefer the petrol tokens above. */ --color-green: var(--color-petrol); --color-green-dark: var(--color-petrol-dark); --color-green-light: var(--color-petrol-light); --color-green-muted: var(--color-petrol-tint); /* Neutrals */ --color-white: #FFFFFF; --color-off-white: #F4F7F6; --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 — AA on white (BRAND.md §1) */ --color-red: #C62828; --color-red-light: rgba(198, 40, 40, 0.10); --color-success: #177A43; --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 — Hanken Grotesk throughout, JetBrains Mono for technical figures (BRAND.md §2). Never use mono weights above 500. */ --font-display: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Courier New", monospace; /* Font sizes — modular scale */ --text-2xs: 0.6875rem; /* 11px — legibility floor; nothing renders smaller */ --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; --weight-extrabold: 800; /* 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-snug: -0.01em; --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 — petrol-tinted (no green shadows, BRAND.md §4) */ --shadow-petrol: 0 4px 14px rgba(30, 87, 96, 0.25); --shadow-petrol-lg: 0 8px 24px rgba(30, 87, 96, 0.30); /* Legacy shadow aliases — re-pointed to petrol equivalents */ --shadow-green: var(--shadow-petrol); --shadow-green-lg: var(--shadow-petrol-lg); /* ----------------------------------------------------------------------- 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 ----------------------------------------------------------------------- */ }