/* ========================================================================== JC GRAPHIX — Design Tokens Single source of truth for colour, type, space, radius, shadow and motion. base.css / components.css / sections.css reference these tokens and must not hard-code a value that belongs here. ========================================================================== */ :root { /* ---- Brand palette -------------------------------------------------- Taken from the JC GRAPHIX logo: a pure red mark on white. --brand-500 is the logo red, used for the mark and large fills. --brand-600 / --brand-700 are darkened steps used for text, links and button fills so that contrast stays accessible on white. */ --brand-50: #FFF4F4; --brand-100: #FFE3E3; --brand-200: #FFC9C9; --brand-300: #FF9A9A; --brand-400: #FF5252; --brand-500: #FF0000; --brand-600: #D90000; --brand-700: #B00000; --brand-800: #8A0303; /* ---- Neutral ramp ---------------------------------------------------- */ --neutral-0: #FFFFFF; --neutral-25: #FCFCFD; --neutral-50: #F7F7F8; --neutral-100: #F1F1F3; --neutral-200: #E6E6EA; --neutral-300: #D4D4DB; --neutral-400: #A3A3AE; --neutral-500: #71717E; --neutral-600: #52525E; --neutral-700: #3F3F48; --neutral-800: #27272E; --neutral-850: #1B1B21; --neutral-900: #121216; --neutral-950: #0A0A0C; /* ---- Semantic colour (light theme is the default) -------------------- */ --color-bg: var(--neutral-0); --color-bg-sunken: var(--neutral-50); --color-bg-inverse: var(--neutral-950); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-0); --color-surface-sunken: var(--neutral-50); --color-surface-overlay: rgba(255, 255, 255, 0.72); /* Form controls need an opaque surface: a browser paints the native dropdown list itself, and it cannot see through a translucent one. */ --color-field: var(--neutral-0); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-border-inverse: rgba(255, 255, 255, 0.14); --color-text: var(--neutral-950); --color-text-muted: var(--neutral-600); --color-text-subtle: var(--neutral-500); --color-text-inverse: var(--neutral-0); --color-text-on-brand: #FFFFFF; --color-accent: var(--brand-600); --color-accent-hover: var(--brand-700); --color-accent-mark: var(--brand-500); --color-accent-soft: var(--brand-50); --color-accent-soft-bd: var(--brand-100); --color-accent-ring: rgba(217, 0, 0, 0.32); --color-whatsapp: #1EA952; --color-whatsapp-hover: #17833F; /* Decorative gradient mesh used behind the hero and key sections. */ --gradient-glow: radial-gradient(60% 55% at 18% 6%, rgba(255, 0, 0, 0.13) 0%, transparent 70%), radial-gradient(48% 48% at 88% 0%, rgba(255, 82, 82, 0.14) 0%, transparent 72%), radial-gradient(62% 48% at 50% 100%, rgba(255, 154, 154, 0.12) 0%, transparent 72%); --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%); /* ---- Typography ------------------------------------------------------ */ --font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Fluid type scale: minimum around a 360px viewport, maximum at 1280px. */ --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1rem; --text-lg: clamp(1.0625rem, 0.99rem + 0.33vw, 1.1875rem); --text-xl: clamp(1.1875rem, 1.08rem + 0.47vw, 1.375rem); --text-2xl: clamp(1.375rem, 1.2rem + 0.78vw, 1.75rem); --text-3xl: clamp(1.625rem, 1.35rem + 1.22vw, 2.25rem); --text-4xl: clamp(1.9375rem, 1.5rem + 1.95vw, 2.9375rem); --text-5xl: clamp(2.3125rem, 1.6rem + 3.17vw, 3.875rem); --text-6xl: clamp(2.625rem, 1.65rem + 4.33vw, 4.625rem); --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal: 1.45; --leading-relaxed: 1.65; --tracking-tighter: -0.035em; --tracking-tight: -0.022em; --tracking-normal: -0.011em; --tracking-wide: 0.02em; --tracking-widest: 0.12em; /* ---- Spacing (4px base) ---------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-14: 3.5rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Vertical rhythm between full-width page sections. */ --section-y: clamp(4rem, 2.6rem + 6vw, 7.5rem); --section-y-tight: clamp(3rem, 2.2rem + 3.5vw, 5rem); /* ---- Layout ----------------------------------------------------------- */ --container: 1180px; --container-wide: 1320px; --container-narrow: 760px; --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); --header-height: 68px; /* ---- Radii ------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; /* ---- Borders ----------------------------------------------------------- */ --border-hairline: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); /* ---- Shadows ----------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(10, 10, 12, 0.05); --shadow-sm: 0 1px 2px rgba(10, 10, 12, 0.05), 0 2px 6px rgba(10, 10, 12, 0.04); --shadow-md: 0 2px 4px rgba(10, 10, 12, 0.04), 0 8px 20px rgba(10, 10, 12, 0.07); --shadow-lg: 0 4px 8px rgba(10, 10, 12, 0.04), 0 18px 40px rgba(10, 10, 12, 0.09); --shadow-xl: 0 8px 16px rgba(10, 10, 12, 0.05), 0 32px 72px rgba(10, 10, 12, 0.14); --shadow-brand: 0 10px 28px rgba(217, 0, 0, 0.22); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* ---- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-slower: 700ms; /* ---- Stacking order ----------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; } /* ---- Dark theme ---------------------------------------------------------- */ :root[data-theme="dark"] { --color-bg: var(--neutral-950); --color-bg-sunken: #060608; --color-bg-inverse: var(--neutral-0); --color-surface: #111116; --color-surface-raised: #17171D; --color-surface-sunken: #0E0E12; --color-surface-overlay: rgba(10, 10, 12, 0.72); --color-field: #17171D; --color-border: #27272F; --color-border-strong: #35353F; --color-border-inverse: rgba(255, 255, 255, 0.12); --color-text: #F6F6F8; --color-text-muted: #A6A6B4; --color-text-subtle: #8B8B99; --color-text-inverse: var(--neutral-950); --color-text-on-brand: #FFFFFF; --color-accent: #FF5252; --color-accent-hover: #FF7A7A; --color-accent-mark: #FF2D2D; --color-accent-soft: rgba(255, 82, 82, 0.12); --color-accent-soft-bd: rgba(255, 82, 82, 0.26); --color-accent-ring: rgba(255, 82, 82, 0.45); --color-whatsapp: #25C462; --color-whatsapp-hover: #4BD683; --gradient-glow: radial-gradient(60% 55% at 18% 6%, rgba(255, 0, 0, 0.20) 0%, transparent 70%), radial-gradient(48% 48% at 88% 0%, rgba(255, 82, 82, 0.15) 0%, transparent 72%), radial-gradient(62% 48% at 50% 100%, rgba(176, 0, 0, 0.18) 0%, transparent 72%); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.6); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.5), 0 32px 72px rgba(0, 0, 0, 0.7); --shadow-brand: 0 10px 28px rgba(255, 0, 0, 0.26); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06); color-scheme: dark; }