/* AquaSafe design tokens — the single source for colour, type and spacing. * * Loaded after the theme bundles and before every AquaSafe page sheet. Each * page-scoped sheet (home-v3, inner-pages-v3, utility-pages-v3, * shared-footer) keeps its own local variable names and points them here, so * a value is chosen once and every page inherits the same one. The load * position matters in one direction only: the second :root block at the * bottom has to out-order main.min.css. * * This file is the ONLY place a frontend palette value is declared. Six * stylesheets used to declare one; two of them (forms, a11y) did it at * :root, so whichever loaded last silently decided the colour for every * page sheet scoped below it. That is why /courses and the homepage * disagreed about which red they were. * * WHERE THE VALUES COME FROM * * Red and navy are sampled from the approved design board, * .design-src/inner-pages-option-2.png. Its buttons are #ce0000 and its * footer is the #060b3d navy family. #ce0000 is also the brand's configured * `secondary_color`, which is why it was already being painted on every page * by the theme components the page sheets do not override — the site showed * #ce0000 beside #d71920 on the homepage, and #ce0000 beside #c9342b on * /courses. Adopting it removes two reds rather than adding a third. * * Blue is #0873cf. The logo's blue sits at hue 205deg; #0873cf is 207deg, * where the previous forms/inner-page blue (#4d75cf) was 222deg — visibly * indigo next to the logo. The board's own accent (#5d93d6) only reaches * 3.4:1 on white, so it cannot carry the text roles this token fills; it * survives as --as-blue-soft below. White on #0873cf is 4.82:1, which is * why --as-blue-strong is no longer a different hue from --as-blue. */ :root { /* Brand */ --as-red: #ce0000; --as-red-dark: #a80000; --as-navy: #071a49; --as-navy-deep: #050f2e; --as-blue: #0873cf; --as-blue-dark: #075ca7; --as-blue-soft: #6eafdf; /* 6.8:1 on white, for labels that reverse out of a blue fill. */ --as-blue-strong: var(--as-blue-dark); --as-link: var(--as-blue); /* Text — three roles, replacing the ten literals the homepage alone was painting. */ --as-ink: #14213d; --as-body: #35425a; --as-muted: #5d687c; --as-on-dark: #cbd3e5; --as-on-dark-muted: #aeb9d0; /* Rings and marks drawn on the navy surfaces, where --as-blue goes flat. */ --as-on-dark-ring: #a8ccf5; /* Surfaces and lines */ --as-surface: #fff; --as-soft: #f4f8fd; --as-soft-blue: #e8f4fd; --as-line: #dce6ef; --as-line-strong: #cfdae6; --as-line-on-dark: rgba(210, 221, 244, .18); /* Semantic, kept deliberately separate from the brand accent above. These names are the ones aquasafe-forms.css already styles against. */ --as-ok-ink: #1d6b39; --as-ok-bg: #eef7f0; --as-warn-ink: #8a5312; --as-warn-bg: #fdf5e8; --as-err-ink: #9c2b23; --as-err-bg: #fdf0ef; /* Type scale. Prose is --as-text-base everywhere; --as-text-md is for compact card and meta text. The 12.5px, 15px, 21px, 27px and 31px one-offs this replaces were each a local decision. The heading steps are the ones the inner pages were QA'd against in design-qa.md; the home sheet's one-offs come onto them rather than the other way round. Fluid clamp() headings stay fluid — a deliberate range is not a stray value. */ --as-text-xs: 12px; --as-text-sm: 13px; --as-text-md: 14px; --as-text-base: 16px; --as-text-lg: 18px; --as-text-xl: 20px; --as-heading-xs: 20px; --as-heading-sm: 24px; --as-heading-md: 30px; --as-heading-lg: 40px; /* Display only: the homepage hero, which is the one thing on the site allowed to be larger than a page title. */ --as-heading-display: 54px; /* Spacing */ --as-space-xs: 8px; --as-space-sm: 12px; --as-space-md: 16px; --as-space-lg: 24px; --as-space-xl: 32px; --as-space-2xl: 48px; /* Shape */ --as-radius-sm: 8px; --as-radius: 12px; --as-radius-pill: 999px; /* Elevation — all three derive from --as-navy so a card never casts a shadow in a hue the palette does not contain. */ --as-shadow-sm: 0 8px 24px rgba(7, 26, 73, .06); --as-shadow: 0 12px 32px rgba(7, 26, 73, .07); --as-shadow-lg: 0 18px 42px rgba(7, 26, 73, .08); /* The primary call to action is the one thing that casts a red shadow. */ --as-shadow-cta: 0 9px 22px rgba(206, 0, 0, .18); /* Layout */ --as-content-width: 1320px; /* Fonts — the theme sets these; the fallbacks keep the pages correct if a page renders before the theme's own custom properties are applied. */ --as-font-body: var(--tg-body-font-family, "Inter", sans-serif); --as-font-heading: var(--tg-heading-font-family, "Poppins", sans-serif); } /* --------------------------------------------------------------------------- * The theme's own neutrals, pointed at the palette above. * * main.min.css routes its greys through --tg-* custom properties, and they are * a lavender family: body copy #6D6C80, secondary text #7F7E97, headings * #161439, borders #C9C9DD / #D0DAE9 / #D7DCE3. Every component the page * sheets do not restyle - the cart and account controls, the breadcrumb * separator, sidebar dates, search fields - painted in those, next to * AquaSafe's blue-slate. * * Remapping the variables fixes all of them at once. The alternative was one * override per component, each having to out-specify a selector like * `.tgmenu__action > ul li .cart-count`, and each silently going stale the * next time the theme bundle changes. * * NOT remapped: --tg-theme-primary, --tg-theme-secondary, --tg-common-color- * blue / blue-2 / dark / black / dark-2. Those are the admin's configurable * brand colours, written into a