/* ============================================================================= RefReflect theme — the design-token layer. WHY THIS FILE EXISTS -------------------- Every page in this app is built from the same Tabler component vocabulary (~640 `.card`, ~520 `.card-header`, Tabler buttons/tables/badges throughout). That means the look of all 650+ templates is decided by Tabler's CSS variables — so retheming the app is a matter of redefining those variables once, here, rather than editing templates. THE RULE: colour, radius, shadow, spacing and type belong to a token. Do NOT add a hex colour to a template. If you need a shade that isn't here, add it here as a token and use the token. The app previously accumulated 249 distinct hard-coded hex colours across templates (three different design systems' palettes mixed together) — that is what this file exists to end. LOAD ORDER: Tabler first, then this file. Overrides below rely on that. Light mode only, deliberately. The tokens are structured so a dark palette can be added later as a `[data-bs-theme="dark"]` block without restating any component rule. ============================================================================= */ :root { /* --------------------------------------------------------------------- BRAND SEEDS — the four colours everything else is derived from. These come from AppSettings (see config.models: brand_primary_color and friends) and are emitted as :root overrides by templates/includes/_brand_theme_vars.html, which loads AFTER this file. The values below are the fallbacks — they must stay in step with the model defaults, because they are what renders when a page omits that include or the settings row is unavailable. Four, not forty: the ramp below is computed from them, so a tenant can change the brand without being able to produce a scale whose steps disagree with each other. --------------------------------------------------------------------- */ /* RefReflect Blue — the default theme (config.models.REFREFLECT_BLUE_THEME). Football Australia's green and gold is a saved theme; tenants pick or save themes under Settings -> Branding & theme. */ --rr-brand-primary-seed: #206bc4; /* fills, navbar, heroes */ --rr-brand-primary-dark-seed: #1a56a0; /* gradient ends, hover states */ --rr-brand-primary-mid-seed: #2f76cc; /* links and figures on white */ --rr-brand-accent-seed: #ff922b; /* highlights and active marks */ /* --------------------------------------------------------------------- PRIMARY RAMP — the product accent, derived from the seeds above. The three steps that ARE a seed read it directly, with the literal as a `var()` fallback. The in-between tints are literals here and are recomputed from the seed inside the `@supports` block further down — NOT with a second declaration beside the literal. That shortcut does not work for a custom property: its value is not validated at parse time, so an unsupported `color-mix()` is stored happily and only collapses when `var()` resolves it, taking the property to unset rather than falling back to the literal above it. `@supports` gates the whole block instead, which is the only form that actually degrades. Monotonic light→dark, and note where the seeds land: 500 is the mid seed, 600 the primary, 700 the primary-dark. That ordering matters because the component rules below address the ramp by number. --------------------------------------------------------------------- */ --rr-primary-50: #f3f7fc; --rr-primary-100: #e6eff9; --rr-primary-200: #cddef3; --rr-primary-300: #acc8eb; --rr-primary-400: #78a6de; --rr-primary-500: var(--rr-brand-primary-mid-seed, #2f76cc); --rr-primary-600: var(--rr-brand-primary-seed, #206bc4); --rr-primary-700: var(--rr-brand-primary-dark-seed, #1a56a0); --rr-primary-800: #174c8d; --rr-primary-900: #144078; /* --------------------------------------------------------------------- LEGACY BLUE ALIASES — deprecated, kept so the retheme actually lands. ~155 references to `--rr-blue-*` are spread across ~30 templates. Left pointing at blue they would have survived the brand change as blue islands on green pages; repointing them here retheme them all without a sweep, and without a template needing to know the brand moved. DO NOT use `--rr-blue-*` in new work — the name now lies about its value. Use `--rr-primary-*`. These aliases exist to be deleted once the remaining call sites are migrated. --------------------------------------------------------------------- */ --rr-blue-50: var(--rr-primary-50); --rr-blue-100: var(--rr-primary-100); --rr-blue-200: var(--rr-primary-200); --rr-blue-300: var(--rr-primary-300); --rr-blue-400: var(--rr-primary-400); --rr-blue-500: var(--rr-primary-500); --rr-blue-600: var(--rr-primary-600); --rr-blue-700: var(--rr-primary-700); --rr-blue-800: var(--rr-primary-800); --rr-blue-900: var(--rr-primary-900); /* --------------------------------------------------------------------- ACCENT — the gold. It is a colour for DARK surfaces: at 4.5:1 the raw seed fails against white, so text-on-white uses `--rr-accent-ink` and the seed itself is reserved for fills, marks and type on the primary. --------------------------------------------------------------------- */ --rr-accent: var(--rr-brand-accent-seed, #ff922b); /* Darkened enough to read as text on white. */ --rr-accent-ink: #8c5018; /* The soft fill behind accent badges ("47 awaiting"). */ --rr-accent-soft: #ffeedd; --rr-accent-border: #ffcea0; /* Text and icons sitting ON gold — the deep brand green, not black. */ --rr-on-accent: #123c70; /* Text sitting ON any primary surface. */ --rr-on-primary: #ffffff; /* Accent-coloured TEXT on a primary surface (the active menu item, a hero's eyebrow). The accent itself only where it holds 4.5:1 there; otherwise the primary's ink. The default brand's orange on blue is 2.4:1, so this default is the ink. The tenant's value is computed in core/branding_colours.accent_text and emitted by includes/_brand_theme_vars.html. */ --rr-accent-text: var(--rr-on-primary); /* PANEL HEADER — the full-bleed hero block on the finance and performance pages (`.appointment-info`, `.report-header` and friends), and the match and next-match heroes on the redesigned dashboards. Was a violet gradient, the app's one departure from the brand ramp. The redesign carries the brand green through every hero, and a violet panel in the middle of it read as a leftover from the old theme. It is a gradient rather than a flat fill for the same reason as before — a flat fill lost the depth these panels had. All 26 sites point at this token, so the treatment is still a one-line change here. */ --rr-panel-header-bg: linear-gradient(135deg, var(--rr-brand-primary-seed, #206bc4) 0%, var(--rr-brand-primary-dark-seed, #1a56a0) 100%); /* --------------------------------------------------------------------- NEUTRALS — one cool-grey ramp. Replaces the Bootstrap-4 greys (#6c757d, #dee2e6, #e9ecef), the Tailwind greys (#6b7280, #374151, #1f2937) and the ad-hoc ones (#e0e0e0, #fefefe) that were all in use on different pages at the same time. --------------------------------------------------------------------- */ --rr-grey-25: #fbfcfd; --rr-grey-50: #f7f8fa; --rr-grey-100: #eff1f5; --rr-grey-200: #e4e8ee; --rr-grey-300: #cfd6e0; --rr-grey-400: #9aa5b5; --rr-grey-500: #6b7889; --rr-grey-600: #52606f; --rr-grey-700: #3d4855; --rr-grey-800: #2a323c; --rr-grey-900: #182433; /* --------------------------------------------------------------------- SEMANTIC STATUS — muted, modern versions of the traffic-light colours. The old #28a745 / #dc3545 / #ffc107 (Bootstrap 4) read as loud and dated next to everything else; these keep the same meanings at lower chroma. `warning` doubles as the "outstanding / needs attention" colour, matching how amber is already used in the dashboards. --------------------------------------------------------------------- */ --rr-success: #1a7f56; --rr-success-bg: #e8f6f0; /* Completes the -bg/-border set. Warning and danger already had a hairline distinct from their fill (a border mapped onto -bg is invisible against its own box); success did not, so `bg-green-lt` had no border to take. */ --rr-success-border: #b8ddcb; /* The LIGHT end of a success gradient. Several cards run `linear-gradient(--rr-success, )`; without a lighter step to point the second stop at, sweeping that literal onto --rr-success makes the gradient flat. */ --rr-success-light: #2fa678; --rr-warning: #b5730c; --rr-warning-bg: #fdf4e3; /* The hairline that pairs with the amber fill. Distinct on purpose: the fill and the border are two different jobs, and mapping both onto -bg (which the first colour sweep did) leaves a border that is invisible against its own box. */ --rr-warning-border: #f0d9ab; --rr-danger: #c8352f; --rr-danger-bg: #fdecea; --rr-danger-border: #f5c4c1; /* One rung between danger and warning, for the 5-point performance ramp — red / orange / amber / teal / green. Without it steps 2 and 3 of that scale are the same colour and the scale reads as 4 steps. */ --rr-orange: #c0561f; /* Orange's own fill and hairline, so `bg-orange-lt` has somewhere to point that is not warning's amber — the whole reason --rr-orange exists. */ --rr-orange-bg: #fbeee7; --rr-orange-border: #f2d6c6; /* INFO stays blue, and is now its OWN colour rather than an alias of the product accent. It used to be `--rr-blue-600` — the same value as the primary — which was harmless while the brand was blue. With a green brand that alias would have made every info alert and badge green, i.e. indistinguishable from success, and `--rr-info` is a semantic status colour whose whole job is to read as "not success, not a warning". Hence a literal: this one is deliberately NOT derived from the brand seeds, and should not be. */ --rr-info: #1f6fb2; --rr-info-bg: #eef5fb; --rr-info-ink: #17558a; --rr-info-border: #c3dcf0; /* --------------------------------------------------------------------- ELEVATION — layered, low-opacity shadows. Tabler's default single `0 .5rem 1rem rgba(0,0,0,.15)` is the harsh drop-shadow that dates the UI most visibly; real depth comes from a tight contact shadow plus a wider ambient one. --------------------------------------------------------------------- */ --rr-shadow-xs: 0 1px 2px rgba(24, 36, 51, 0.05); --rr-shadow-sm: 0 1px 2px rgba(24, 36, 51, 0.06), 0 1px 3px rgba(24, 36, 51, 0.04); --rr-shadow-md: 0 2px 4px rgba(24, 36, 51, 0.05), 0 4px 12px rgba(24, 36, 51, 0.07); --rr-shadow-lg: 0 4px 8px rgba(24, 36, 51, 0.05), 0 12px 28px rgba(24, 36, 51, 0.10); /* The focus ring. A literal rgba() would pin it to the retired blue and leave every focused control ringed in a colour the brand no longer uses. Mixed from the primary in the @supports block below; this value is the default brand's, so the ring stays visible — the part that actually matters for accessibility — either way. */ --rr-ring: 0 0 0 3px rgba(32, 107, 196, 0.22); /* RADIUS — the single loudest "modern vs 2019" signal. Tabler ships 4px. */ --rr-radius-sm: 6px; --rr-radius: 8px; --rr-radius-lg: 12px; --rr-radius-xl: 16px; /* --------------------------------------------------------------------- ORGANISATION BRAND COLOURS These are Football Australia's own palette, used on the media and analytics pages for charts and hero panels — NOT the product UI colours above. They were hardcoded across five templates; centralised here so they can be changed in one place. Note for white-labelling: the app resolves names and logos through `AppSettings.organization_name` / `ORGANIZATION_LOGO_URL`, but these colours are still fixed. Making them configurable is a separate change; this at least puts them in one place to change rather than five. --------------------------------------------------------------------- */ --rr-brand-green: #00843D; --rr-brand-green-dark: #006430; --rr-brand-gold: #FFD100; --rr-brand-navy: #002B5C; /* --------------------------------------------------------------------- CATEGORICAL SERIES SCALE — for chart series, and ONLY for chart series. A categorical scale has one job the semantic tokens cannot do: every entry must be told apart from every other entry, including by a reader with colour-vision deficiency and including at the 2px width of a line on a trend chart. That is why this is a scale of DIFFERENT HUES rather than steps of the brand ramp — ten shades of green is not a legend. Ordering matters. The first four carry the most series on the most-read charts, so they lead with the brand and then take the widest hue and lightness separations available; the tail is for charts with a series per official, where being distinguishable at all is the whole requirement. They are picked from the same families the semantic tokens use, so a chart sits beside a status badge without arguing with it. HOW TO USE THEM. Canvas has NO CSS cascade: Chart.js hands borderColor/backgroundColor straight to the 2D context, and a raw `var(--rr-…)` string there is silently ignored — the slice paints black. Read them through the `rrToken()` helper in the base templates, which resolves the computed value: borderColor: rrToken('--rr-series-2') Do not put these on an element's CSS; the semantic tokens are for that. --------------------------------------------------------------------- */ --rr-series-1: #0d6a49; /* brand green */ --rr-series-2: #d99000; /* gold, darkened to read on white */ --rr-series-3: #1f6fb2; /* info blue */ --rr-series-4: #c8352f; /* danger red */ --rr-series-5: #7048e8; /* violet */ --rr-series-6: #0ca678; /* mint */ --rr-series-7: #e8590c; /* orange */ --rr-series-8: #0b7285; /* deep teal */ --rr-series-9: #ae3ec9; /* magenta */ --rr-series-10: #495057; /* graphite */ /* SPACING RHYTHM */ --rr-space-1: 0.25rem; --rr-space-2: 0.5rem; --rr-space-3: 0.75rem; --rr-space-4: 1rem; --rr-space-5: 1.5rem; --rr-space-6: 2rem; /* ===================================================================== TABLER VARIABLE MAPPING Everything above is wired into Tabler here. This is the part that retheme every template at once. ===================================================================== */ --tblr-primary: var(--rr-primary-600); /* Tabler's /
 and any page rule reading its variable take the
     design's mono face. */
  --tblr-font-monospace: var(--rr-font-mono);
  /* Tabler builds rgba() shadows and tints from the channel triplet, and it
     cannot be derived from a custom property — a `rgb(var(--x))` there would
     need the components, not a hex. This is the DEFAULT primary's channels;
     includes/_brand_theme_vars.html overrides it with the tenant's, computed
     server-side (core/branding_colours.rgb_triplet). */
  --tblr-primary-rgb: 32, 107, 196;
  --tblr-blue: var(--rr-primary-600);
  /* Links take the MID seed, not 700. The ramp is monotonic, so 700 is darker
     than the 600 used for fills — on this brand that is a near-black green
     that reads as body copy rather than as a link. The mid seed is the
     design's link colour and the one step that holds 4.5:1 on white while
     still looking like an accent. */
  --tblr-link-color: var(--rr-primary-500);
  --tblr-link-hover-color: var(--rr-primary-700);

  --tblr-body-bg: var(--rr-grey-50);
  --tblr-body-color: var(--rr-grey-900);
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: var(--rr-grey-50);
  --tblr-bg-surface-tertiary: var(--rr-grey-100);
  --tblr-border-color: var(--rr-grey-200);
  --tblr-border-color-translucent: var(--rr-grey-200);
  --tblr-secondary: var(--rr-grey-500);
  --tblr-muted: var(--rr-grey-500);

  --tblr-success: var(--rr-success);
  --tblr-warning: var(--rr-warning);
  --tblr-danger: var(--rr-danger);
  --tblr-info: var(--rr-info);

  --tblr-border-radius: var(--rr-radius);
  --tblr-border-radius-sm: var(--rr-radius-sm);
  --tblr-border-radius-lg: var(--rr-radius-lg);
  --tblr-border-radius-xl: var(--rr-radius-xl);

  --tblr-box-shadow: var(--rr-shadow-md);
  --tblr-box-shadow-sm: var(--rr-shadow-sm);
  --tblr-box-shadow-lg: var(--rr-shadow-lg);

  /* TYPE — 0.875rem base was cramped; 0.9375rem with a looser leading reads
     as considered rather than dense, without reflowing any layout. */
  --tblr-body-font-size: 0.9375rem;
  --tblr-body-line-height: 1.55;
  /* Tabler sets h5 at 12px and h6 at 10px — below body text. The templates
     were written against Bootstrap, where h6 is 16px, and use h5/h6 as the
     title of a list item or a form section; at Tabler's sizes a match name
     rendered smaller than the date line under it. Keep them under the 16px
     h3/card title, and above body-small. */
  --tblr-font-size-h4: 0.9375rem;
  --tblr-font-size-h5: 0.875rem;
  --tblr-font-size-h6: 0.8125rem;
  --tblr-font-sans-serif: 'InterVariable', 'Inter var', 'Inter', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* DISPLAY + MONO — the two faces the redesign adds alongside Inter.
     Archivo carries big headings and KPI numerals; JetBrains Mono the
     figures that are compared down a column. Applied through `.rr-display`
     and `.rr-mono` — do not name either family in a template. Both fall back
     to the sans stack, so a page that loads without the webfonts (they come
     from Google Fonts in the base templates) still sets in Inter rather than
     in a default serif. */
  --rr-font-display: 'Archivo', var(--tblr-font-sans-serif);
  --rr-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
    Consolas, monospace;
}

/* =============================================================================
   DERIVED TINTS — recomputed from the brand seeds where `color-mix()` exists.

   Gated on @supports rather than declared next to the literals in :root,
   because a custom property accepts any value at parse time: an unsupported
   `color-mix()` would be stored, then collapse to unset when `var()` resolved
   it, rather than falling back to the literal. This block is the only form
   that degrades cleanly — without it the tints stay at the default theme's
   values, which is a correct-looking page rather than a broken one.

   The seeds are overridden by a later