/* ============================================================================= Cents Traders Limited — Design Tokens All CSS custom properties for colours, typography, spacing, and more. ============================================================================= */ :root { /* ----------------------------------------------------------------------- Brand colours — Corporate / Paper ----------------------------------------------------------------------- */ --color-cents-primary: #FE5500; --color-cents-primary-dark: #CC4400; --color-cents-gold: #FE7200; --color-cents-gold-light: #FFAF01; --color-surface: #F8F8F5; /* ----------------------------------------------------------------------- Brand colours — Dolfin ----------------------------------------------------------------------- */ --color-dolfin-blue: #1486F2; --color-dolfin-blue-dark: #0F66C2; --color-dolfin-black: #111715; /* ----------------------------------------------------------------------- Neutral colours ----------------------------------------------------------------------- */ --color-white: #FFFFFF; --color-gray-50: #F9FAFB; --color-gray-100: #F3F4F6; --color-gray-200: #E5E7EB; --color-gray-300: #D1D5DB; --color-gray-400: #9CA3AF; --color-gray-500: #6B7280; --color-gray-600: #4B5563; --color-gray-700: #374151; --color-gray-800: #1F2937; --color-gray-900: #111827; /* ----------------------------------------------------------------------- Text colours ----------------------------------------------------------------------- */ --color-text: var(--color-gray-800); --color-text-muted: var(--color-gray-600); --color-text-subtle: var(--color-gray-500); --color-text-on-primary: var(--color-white); --color-text-on-dark: var(--color-white); --color-link: var(--color-cents-primary); --color-link-hover: var(--color-cents-gold); /* ----------------------------------------------------------------------- Surface colours ----------------------------------------------------------------------- */ --color-bg: var(--color-white); --color-bg-elevated: var(--color-gray-50); --color-bg-surface: var(--color-surface); --color-bg-dark: var(--color-gray-900); /* ----------------------------------------------------------------------- Border colours ----------------------------------------------------------------------- */ --color-border: var(--color-gray-200); --color-border-strong: var(--color-gray-300); --color-border-focus: var(--color-cents-primary); /* ----------------------------------------------------------------------- State colours ----------------------------------------------------------------------- */ --color-success: #15803D; --color-success-bg: #F0FDF4; --color-success-border: #BBF7D0; --color-warning: #B45309; --color-warning-bg: #FFFBEB; --color-warning-border: #FDE68A; --color-error: #DC2626; --color-error-bg: #FEF2F2; --color-error-border: #FECACA; --color-info: #1D4ED8; --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; /* ----------------------------------------------------------------------- Typography scale (fluid) ----------------------------------------------------------------------- */ --text-xs: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem); --text-sm: clamp(0.875rem, 0.82rem + 0.1vw, 1rem); --text-body: clamp(1rem, 0.98rem + 0.1vw, 1.125rem); --text-lg: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); --text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.7rem + 2.5vw, 3.5rem); --text-display: clamp(2.25rem, 1.4rem + 4vw, 5.5rem); /* Site-wide readable public-page scale, based on the Paper hero. */ --text-page-copy: clamp(1.25rem, 1.1rem + 0.5vw, 1.4rem); --text-page-heading: clamp(2.5rem, 2rem + 2vw, 3rem); --text-page-label: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); --text-page-action: clamp(1.125rem, 1rem + 0.3vw, 1.25rem); --text-card-copy: clamp(0.9rem, 0.84rem + 0.18vw, 1.0625rem); /* ----------------------------------------------------------------------- Font families ----------------------------------------------------------------------- */ --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace; /* ----------------------------------------------------------------------- Font weights ----------------------------------------------------------------------- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ----------------------------------------------------------------------- Line heights ----------------------------------------------------------------------- */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.6; --leading-loose: 1.8; /* ----------------------------------------------------------------------- Fluid spacing scale ----------------------------------------------------------------------- */ --space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.375rem); --space-2xs: clamp(0.375rem, 0.34rem + 0.15vw, 0.5rem); --space-xs: clamp(0.5rem, 0.45rem + 0.2vw, 0.75rem); --space-sm: clamp(0.75rem, 0.65rem + 0.3vw, 1rem); --space-md: clamp(1rem, 0.8rem + 0.7vw, 1.5rem); --space-lg: clamp(1.5rem, 1.1rem + 1.5vw, 3rem); --space-xl: clamp(2.5rem, 1.5rem + 3vw, 5rem); --space-2xl: clamp(3.5rem, 2rem + 5vw, 7rem); /* ----------------------------------------------------------------------- Container widths ----------------------------------------------------------------------- */ --content-narrow: 30rem; --content-reading: 45rem; --content-wide: 80rem; --content-full: 100%; /* ----------------------------------------------------------------------- Border radius ----------------------------------------------------------------------- */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; /* ----------------------------------------------------------------------- Shadows ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* ----------------------------------------------------------------------- Transitions ----------------------------------------------------------------------- */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 400ms ease-in-out; /* ----------------------------------------------------------------------- Layering (z-index) ----------------------------------------------------------------------- */ --z-base: 1; --z-header: 100; --z-dropdown: 150; --z-drawer: 200; --z-modal: 300; --z-toast: 400; /* ----------------------------------------------------------------------- Focus rings ----------------------------------------------------------------------- */ --focus-ring: 3px solid var(--color-cents-primary); --focus-ring-offset: 2px; --focus-ring-dolfin: 3px solid var(--color-dolfin-blue); /* ----------------------------------------------------------------------- Default theme (corporate) ----------------------------------------------------------------------- */ --color-primary: var(--color-cents-primary); --color-primary-dark: var(--color-cents-primary-dark); --color-accent: var(--color-cents-gold); --color-accent-light: var(--color-cents-gold-light); --focus-ring-color: var(--color-cents-primary); } /* --------------------------------------------------------------------------- Paper theme --------------------------------------------------------------------------- */ [data-theme="paper"] { --color-primary: var(--color-cents-primary); --color-primary-dark: var(--color-cents-primary-dark); --color-accent: var(--color-cents-gold); --color-accent-light: var(--color-cents-gold-light); --color-bg-surface: var(--color-surface); --focus-ring-color: var(--color-cents-primary); --color-link: var(--color-cents-primary); --color-link-hover: var(--color-cents-gold); --color-border-focus: var(--color-cents-primary); } /* --------------------------------------------------------------------------- Dolfin theme --------------------------------------------------------------------------- */ [data-theme="dolfin"] { --color-primary: var(--color-dolfin-blue); --color-primary-dark: var(--color-dolfin-blue-dark); --color-accent: var(--color-dolfin-blue); --color-accent-light: #4DA4FA; --color-bg-surface: var(--color-gray-50); --focus-ring-color: var(--color-dolfin-blue); --color-link: var(--color-dolfin-blue); --color-link-hover: var(--color-dolfin-blue-dark); --color-border-focus: var(--color-dolfin-blue); }