/* * trainitnow-child — Design tokens * * Single source of truth for the project's design system, ported from the * Lovable React/Tailwind source (src/index.css). Divi 5 Design Variables * defined in the builder reference these CSS variables via var(--tin-*) so * the builder swatches and any custom CSS share one canonical value. * * Convention: all variables are prefixed with --tin- (TrainItNow). * To change a token, edit it here and re-upload the child theme. * * Rebranding a clone: the brand colours (the purple + teal system) are all * derived from three hue knobs at the top of :root — --tin-hue-primary, * --tin-hue-primary-2 and --tin-hue-secondary. Rotate those hues to recolour * the whole site (icons, backgrounds, gradients, focus rings, text accents); * each derived token keeps its own saturation/lightness so the shade stays * tuned. Neutral greys (background, borders, muted) and the navy body text * are intentionally NOT hue-coupled, so they survive any rebrand untouched. * * Light mode only. Dark mode tokens from the Lovable source are intentionally * not ported — out of scope for the initial build. */ :root { /* -- Brand hue knobs --------------------------------------------------- * The only values a clone normally edits to rebrand. Hue is 0–360. * Everything purple/teal below derives from these. */ --tin-hue-primary: 245; /* indigo — primary CTA, links, icons, accent, focus ring */ --tin-hue-primary-2: 280; /* violet — second stop of the primary gradient */ --tin-hue-secondary: 165; /* teal — secondary CTA + its gradient */ /* -- Surfaces -- */ --tin-background: hsl(220 20% 97%); /* page background, off-white blue tint */ --tin-foreground: hsl(230 25% 15%); /* default body text, deep navy (neutral — not hue-coupled) */ --tin-card: hsl(0 0% 100%); /* card surface, pure white */ --tin-card-foreground: hsl(230 25% 15%); --tin-popover: hsl(0 0% 100%); --tin-popover-foreground: hsl(230 25% 15%); /* -- Brand (derived from the hue knobs above) -- */ --tin-primary: hsl(var(--tin-hue-primary) 50% 48%); /* indigo, primary CTA + links */ --tin-primary-foreground: hsl(0 0% 100%); --tin-secondary: hsl(var(--tin-hue-secondary) 60% 40%); /* teal, secondary CTA */ --tin-secondary-foreground: hsl(0 0% 100%); --tin-accent: hsl(var(--tin-hue-primary) 40% 95%); /* pale lavender, accent surface */ --tin-accent-foreground: var(--tin-primary); /* -- State / utility -- */ --tin-muted: hsl(220 15% 93%); /* muted surface (chips, alt rows) */ --tin-muted-foreground: hsl(220 10% 46%); /* muted text (meta, captions) */ --tin-destructive: hsl(0 84% 60%); /* error red */ --tin-destructive-foreground: hsl(0 0% 100%); --tin-ring: var(--tin-primary); /* focus ring colour, = primary */ --tin-focus-ring: 0 0 0 3px hsl(var(--tin-hue-primary) 50% 48% / 0.15); /* focus glow (box-shadow) */ /* -- Borders / inputs -- */ --tin-border: hsl(220 15% 90%); --tin-input: hsl(220 15% 90%); /* -- Radius (Lovable: --radius = 0.75rem; sm/md/lg derived) -- */ --tin-radius: 0.75rem; /* 12px @ 16px base */ --tin-radius-lg: var(--tin-radius); --tin-radius-md: calc(var(--tin-radius) - 2px); --tin-radius-sm: calc(var(--tin-radius) - 4px); /* -- Shadows -- */ --tin-shadow-card: 0 1px 3px hsl(230 25% 15% / 0.06), 0 4px 12px hsl(230 25% 15% / 0.04); --tin-shadow-card-hover: 0 4px 16px hsl(230 25% 15% / 0.10), 0 8px 32px hsl(230 25% 15% / 0.06); --tin-shadow-elevated: 0 8px 30px hsl(var(--tin-hue-primary) 50% 48% / 0.12); /* -- Gradients -- */ --tin-gradient-primary: linear-gradient(135deg, hsl(var(--tin-hue-primary) 50% 48%), hsl(var(--tin-hue-primary-2) 60% 55%)); --tin-gradient-hero: linear-gradient(180deg, hsl(220 30% 96%) 0%, hsl(var(--tin-hue-primary) 40% 95%) 50%, hsl(220 30% 96%) 100%); --tin-gradient-cta: linear-gradient(135deg, hsl(var(--tin-hue-secondary) 60% 40%), hsl(var(--tin-hue-secondary) 50% 35%)); /* -- Typography -- */ --tin-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* --------------------------------------------------------------------------- * Divi Global Color bridge * --------------------------------------------------------------------------- * Divi stores its Global Colors ("Primary", "Secondary") as standalone * literals and emits them as --gcid-* custom properties. Builder-configured * elements (e.g. the header "Bekijk cursussen" CTA) render via * var(--gcid-primary-color), so by default they do NOT follow the --tin-* * tokens — a clone would have to change the brand colour twice (here AND in * the Divi builder's Global Colors). * * Re-point Divi's two BRAND Global Colors at our tokens so tokens.css stays * the single source of truth: rotating the hue knobs above now recolours BOTH * the child-theme CSS AND every builder element that uses a Global Color. * * Scope/!important: Divi declares --gcid-* deep in the tree (around #et-boc), * so we re-declare at #et-boc/body with !important to win the cascade. * Verified live: value-preserving (var(--tin-primary) == the stored gcid * literal, zero visual change) and builder elements follow a hue-knob change * end-to-end (245→0→120 tracked red→green on the CTA). * * Only the brand colours are bridged; Divi's neutral global colours * (greys/white) are clone-invariant and left as-is. Note: the builder colour * SWATCH still shows Divi's stored value (cosmetic, editor-only) — the * rendered output always resolves to the token. */ #et-boc, body { --gcid-primary-color: var(--tin-primary) !important; --gcid-secondary-color: var(--tin-secondary) !important; }