/* ========================================================================== Gemial Digital — Design tokens -------------------------------------------------------------------------- Every value the design system uses lives here, in the --gd- namespace so nothing collides with Blocksy's --theme- variables or with Elementor. Declaring these changes nothing visually. They are only consumed by base.css and by our page templates. ========================================================================== */ :root { /* ---------------------------------------------------------------------- Colour — brand Lime and forest are sampled from the Gemial logo artwork. ---------------------------------------------------------------------- */ --gd-lime: #acf601; /* Accent only. Never body text on white. */ --gd-lime-dim: #7bb300; /* Lime where text contrast is required. */ --gd-lime-soft: #f2fdd9; /* Tint for light accent panels. */ --gd-forest: #006e31; /* Primary. Buttons and links on light. */ --gd-forest-deep: #004d22; /* Hover and pressed. */ --gd-forest-soft: #e6f2eb; /* Tint for light brand panels. */ /* ---------------------------------------------------------------------- Colour — ground Near-blacks carry a green undertone so dark sections read as brand rather than as a neutral slab. ---------------------------------------------------------------------- */ --gd-ink: #0a100c; /* Primary dark ground. */ --gd-ink-2: #121a15; /* Raised surface on dark. */ --gd-ink-3: #1c2620; /* Borders and dividers on dark. */ --gd-paper: #fafbf9; /* Light page ground. */ --gd-white: #ffffff; --gd-line: #e3e8e4; /* Hairlines on light. */ --gd-line-strong: #c9d2cc; /* Emphasised hairlines on light. */ /* ---------------------------------------------------------------------- Colour — text ---------------------------------------------------------------------- */ --gd-text: #0a100c; --gd-text-2: #5a6560; /* Secondary prose. */ --gd-text-3: #8a938e; /* Meta, captions, disabled. */ --gd-text-on-dark: #eef2f0; --gd-text-on-dark-2: #a3afa9; /* ---------------------------------------------------------------------- Colour — signal A cold blue so numbers, charts and technical annotation have somewhere to live that is not another green. ---------------------------------------------------------------------- */ --gd-signal: #0b7fd4; --gd-signal-soft: #e7f2fb; --gd-warn: #b4690e; --gd-warn-soft: #fdf3e3; --gd-danger: #c0341d; --gd-danger-soft: #fdeeeb; /* WhatsApp brand green, for the chat CTA only. */ --gd-whatsapp: #25d366; --gd-whatsapp-deep: #1da851; /* ---------------------------------------------------------------------- Typography — families ---------------------------------------------------------------------- */ --gd-font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gd-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gd-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* ---------------------------------------------------------------------- Typography — scale Fluid from a 380px viewport to 1440px. Display sizes are deliberately tight-tracked; the mono label size is fixed because it must stay legible. ---------------------------------------------------------------------- */ --gd-text-label: 0.6875rem; /* 11px, mono */ --gd-text-xs: 0.75rem; /* 12px */ --gd-text-sm: 0.875rem; /* 14px */ --gd-text-base: 1rem; /* 16px */ --gd-text-md: 1.0625rem; /* 17px body */ --gd-text-lg: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); --gd-text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem); --gd-h6: clamp(0.9375rem, 0.2vw + 0.9rem, 1rem); --gd-h5: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem); --gd-h4: clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem); --gd-h3: clamp(1.375rem, 1vw + 1.15rem, 1.875rem); --gd-h2: clamp(1.75rem, 2.1vw + 1.25rem, 2.875rem); --gd-h1: clamp(2.25rem, 3.6vw + 1.4rem, 4rem); --gd-display: clamp(2.75rem, 5.4vw + 1.4rem, 5.5rem); --gd-leading-tight: 1.06; --gd-leading-snug: 1.2; --gd-leading-normal: 1.45; --gd-leading-relaxed: 1.65; --gd-tracking-display: -0.03em; --gd-tracking-heading: -0.02em; --gd-tracking-normal: 0; --gd-tracking-label: 0.14em; --gd-weight-regular: 400; --gd-weight-medium: 500; --gd-weight-semibold: 600; --gd-weight-bold: 700; /* ---------------------------------------------------------------------- Spacing — 4px base ---------------------------------------------------------------------- */ --gd-space-1: 0.25rem; --gd-space-2: 0.5rem; --gd-space-3: 0.75rem; --gd-space-4: 1rem; --gd-space-5: 1.25rem; --gd-space-6: 1.5rem; --gd-space-8: 2rem; --gd-space-10: 2.5rem; --gd-space-12: 3rem; --gd-space-16: 4rem; --gd-space-20: 5rem; --gd-space-24: 6rem; --gd-space-32: 8rem; /* Vertical rhythm for full-bleed sections. */ --gd-section-y: clamp(3.5rem, 6vw, 7rem); --gd-section-y-lg: clamp(5rem, 9vw, 10rem); /* ---------------------------------------------------------------------- Layout ---------------------------------------------------------------------- */ --gd-container: 1200px; --gd-container-wide: 1400px; --gd-container-narrow: 760px; --gd-gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---------------------------------------------------------------------- Radii Kept tight on purpose. Soft rounding reads as friendly; this brand needs to read as engineered. ---------------------------------------------------------------------- */ --gd-radius-xs: 2px; --gd-radius-sm: 4px; --gd-radius-md: 6px; --gd-radius-lg: 10px; --gd-radius-xl: 16px; --gd-radius-pill: 999px; /* ---------------------------------------------------------------------- Borders and elevation In this system borders do most of the structural work and shadows stay almost invisible, which is what makes it read as precise. ---------------------------------------------------------------------- */ --gd-border: 1px solid var(--gd-line); --gd-border-strong: 1px solid var(--gd-line-strong); --gd-border-dark: 1px solid var(--gd-ink-3); --gd-shadow-xs: 0 1px 2px rgba(10, 16, 12, 0.05); --gd-shadow-sm: 0 1px 3px rgba(10, 16, 12, 0.06), 0 1px 2px rgba(10, 16, 12, 0.04); --gd-shadow-md: 0 4px 12px rgba(10, 16, 12, 0.07), 0 1px 3px rgba(10, 16, 12, 0.05); --gd-shadow-lg: 0 12px 32px rgba(10, 16, 12, 0.1), 0 2px 8px rgba(10, 16, 12, 0.05); --gd-focus-ring: 0 0 0 2px var(--gd-paper), 0 0 0 4px var(--gd-forest); --gd-focus-ring-dark: 0 0 0 2px var(--gd-ink), 0 0 0 4px var(--gd-lime); /* ---------------------------------------------------------------------- Motion ---------------------------------------------------------------------- */ --gd-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --gd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --gd-dur-fast: 120ms; --gd-dur: 220ms; --gd-dur-slow: 420ms; /* ---------------------------------------------------------------------- Z-index ---------------------------------------------------------------------- */ --gd-z-base: 1; --gd-z-raised: 10; --gd-z-sticky: 100; --gd-z-overlay: 500; --gd-z-modal: 1000; }