/* ========================================================================== MoreTech Research Studio — Design Tokens -------------------------------------------------------------------------- The single source of truth for every colour, size, radius, shadow and duration in the product. Nothing below this file should contain a raw hex value, a one-off font-size, or an invented radius. Techarin re-skin (2026-08-13). The product moved from a light teal system to the dark, deep-blue visual language of the purchased Techarin template. Values below are taken from the template's own palette (assets/css/style.css and its Tailwind brand scale), not invented: --rf-brand-deep #0010b9 template's --accent-color --rf-brand-fill #2563eb template's brand-600 --rf-brand #3b82f6 template's brand-500 --rf-brand-strong #60a5fa template's brand-400 surfaces template's slate-950/900/800 family Contrast: every text token below was RE-COMPUTED against its dark background for this pass — the previous ratios were measured against white and do not carry over. Measured values are recorded inline. All meet WCAG AA (4.5:1 normal text); most clear AAA. ========================================================================== */ :root { /* ---- Brand ------------------------------------------------------------ On a dark surface the accessible pair runs LIGHTER, not darker — the inverse of the previous light theme. Three roles, because one colour cannot be both readable text and a solid fill behind white text: --rf-brand identity. Borders, icons, accents, thin rules. #3b82f6 on the card surface = 4.95:1 (AA) --rf-brand-strong the readable pair. Accent TEXT on dark surfaces. #60a5fa on the card surface = 7.17:1 (AAA) --rf-brand-fill solid fills carrying white text (buttons). white on #2563eb = 5.17:1 (AA) --rf-brand-deep the template's signature deep blue. Depth only — gradients, glows, hero wash. Never text on dark (1.54:1); white ON it measures 11.83:1. */ --rf-brand: #3b82f6; --rf-brand-rgb: 59, 130, 246; --rf-brand-strong: #60a5fa; --rf-brand-strong-rgb: 96, 165, 250; --rf-brand-fill: #2563eb; --rf-brand-fill-hover: #1d4ed8; --rf-brand-deep: #0010b9; --rf-brand-deep-rgb: 0, 16, 185; /* ---- Surfaces --------------------------------------------------------- Four steps, darkest to lightest, from the template's slate family with its blue cast retained. Elevation reads as *lighter*, not shadowed. */ --rf-surface-page: #050914; /* app background */ --rf-surface: #0d1526; /* cards, panels */ --rf-surface-sunken: #091120; /* recessed wells, table head*/ --rf-surface-raised: #131c30; /* hover, active, popovers */ --rf-surface-overlay: #0f1829; /* modals, dropdowns */ /* ---- Text on the dark surfaces --------------------------------------- Measured against --rf-surface (#0d1526), the most common background; every one is higher still on the darker page background. --rf-text 15.70:1 (AAA) --rf-text-secondary 7.33:1 (AAA) --rf-text-faint 4.95:1 (AA — meta and disabled only) */ --rf-text: #e9eefb; --rf-text-secondary: #98a5bd; --rf-text-faint: #6b7a94; --rf-text-on-brand: #ffffff; /* ---- The glass surface ----------------------------------------------- Techarin's signature treatment, reused rather than reinvented. White at a low alpha over the page, with a translucent hairline. Text contrast on the resulting colour: --rf-text 15.7:1, --rf-text-secondary 7.3:1. */ --rf-glass: rgba(255, 255, 255, .04); --rf-glass-strong: rgba(255, 255, 255, .07); --rf-glass-border: rgba(255, 255, 255, .10); --rf-glass-border-strong: rgba(255, 255, 255, .16); --rf-glass-blur: 12px; --rf-glass-saturate: 120%; /* ---- Status: five roles, one family ---------------------------------- Colour is reserved for state. Categories (Mission Type, counts, metadata) use the neutral role — never a decorative hue. Each -bg is its own hue at 15% over the card surface; the measured ratio is the role colour reading on its own tint. */ --rf-success: #4ade80; /* 10.46:1 on surface */ --rf-success-bg: rgba(74, 222, 128, .15); /* 7.74:1 on tint */ --rf-warning: #fbbf24; /* 10.92:1 on surface */ --rf-warning-bg: rgba(251, 191, 36, .15); /* 8.12:1 on tint */ --rf-danger: #f87171; /* 6.59:1 on surface */ --rf-danger-bg: rgba(248, 113, 113, .15); /* 5.38:1 on tint */ --rf-neutral: #98a5bd; /* 7.33:1 on surface */ --rf-neutral-bg: rgba(152, 165, 189, .15); /* 5.71:1 on tint */ /* ---- Borders ---------------------------------------------------------- Light-on-dark hairlines. The light theme's dark-on-light rgba values were invisible here and are fully replaced. */ --rf-border: rgba(255, 255, 255, .09); --rf-border-strong: rgba(255, 255, 255, .17); /* ---- Type ------------------------------------------------------------ Outfit, self-hosted from the template (assets/fonts/Outfit). The template's own `.font-display` rule resolves to Outfit too, so one family covers both body and display — no second webfont is loaded. */ --rf-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --rf-font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Type scale: 7 steps + 1 display numeral -------------------------- */ --rf-text-display: 2rem; /* page hero headline */ --rf-text-h1: 1.5rem; /* page title */ --rf-text-h2: 1.25rem; /* section / card group */ --rf-text-h3: 1rem; /* card title */ --rf-text-body: .875rem; /* default body */ --rf-text-sm: .8125rem; /* supporting text */ --rf-text-xs: .75rem; /* uppercase eyebrow, meta only */ --rf-text-count: 3rem; /* the one numeric display size */ /* ---- Spacing: 4px base ------------------------------------------------ */ --rf-space-1: .25rem; /* 4px */ --rf-space-2: .5rem; /* 8px */ --rf-space-3: .75rem; /* 12px */ --rf-space-4: 1rem; /* 16px */ --rf-space-5: 1.5rem; /* 24px */ --rf-space-6: 2rem; /* 32px */ /* ---- Radius ----------------------------------------------------------- Widened to the template's "Apple" scale (16/20/24/28/32px), which is the single most recognisable part of its visual signature. Small controls stay tighter so inputs and badges do not turn into pills. */ --rf-radius-sm: 10px; /* badges, chips, inputs, small controls */ --rf-radius-md: 16px; /* buttons, inner surfaces, tiles */ --rf-radius-lg: 20px; /* cards, modals, panels */ --rf-radius-xl: 28px; /* hero band, feature surfaces */ --rf-radius-pill: 999px; --rf-radius-circle: 50%; /* Chart mark data-end. A fixed 4px by the visualization spec — rounded at the data end, square at the baseline, so a bar reads as growing from the axis. Deliberately not one of the UI radii above: it is a chart-geometry constant, and scaling it with the card radius would distort the marks. */ --rf-radius-mark: 4px; /* ---- Elevation -------------------------------------------------------- On dark, a drop shadow alone is invisible. Each step pairs a real shadow with the template's inset top highlight, which is what actually separates a surface from the page. */ --rf-shadow-flat: none; --rf-shadow-raised: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(2, 6, 23, .5); --rf-shadow-active: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 36px rgba(2, 6, 23, .6), 0 0 32px rgba(var(--rf-brand-rgb), .16); --rf-shadow-overlay: 0 24px 64px rgba(2, 6, 23, .7); --rf-glow-brand: 0 0 28px rgba(var(--rf-brand-rgb), .28); /* ---- Motion: 4 durations, 2 easings ---------------------------------- --rf-ease-out is the template's own glass transition curve. */ --rf-dur-instant: 100ms; /* hover, focus */ --rf-dur-quick: 160ms; /* state change */ --rf-dur-enter: 240ms; /* element arrival */ --rf-dur-deliberate: 400ms; /* the completion moment */ --rf-ease-out: cubic-bezier(.2, .9, .2, 1); --rf-ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ---- Layout ----------------------------------------------------------- */ --rf-touch-target: 2.75rem; /* 44px minimum on touch */ /* ---- Tabler bridge ---------------------------------------------------- Tabler components read these; mapping them here means every stock component inherits the system instead of being overridden later. The dark re-skin adds the body/surface/border variables Tabler uses to paint its own backgrounds, so stock components darken with the system rather than staying white and having to be fought component by component further down. */ --tblr-primary: var(--rf-brand); --tblr-primary-rgb: var(--rf-brand-rgb); --tblr-border-radius: var(--rf-radius-md); --tblr-body-color: var(--rf-text); --tblr-body-bg: var(--rf-surface-page); --tblr-secondary: var(--rf-text-secondary); --tblr-border-color: var(--rf-border); --tblr-bg-surface: var(--rf-surface); --tblr-bg-surface-secondary: var(--rf-surface-sunken); --tblr-bg-surface-tertiary: var(--rf-surface-raised); --tblr-bg-forms: var(--rf-surface-sunken); --tblr-dark: var(--rf-surface); --tblr-light: var(--rf-surface-sunken); --tblr-muted: var(--rf-text-secondary); --tblr-heading-color: var(--rf-text); --tblr-card-bg: var(--rf-surface); --tblr-card-cap-bg: transparent; --tblr-modal-bg: var(--rf-surface-overlay); --tblr-dropdown-bg: var(--rf-surface-overlay); --tblr-table-bg: transparent; --tblr-table-color: var(--rf-text); --tblr-emphasis-color: var(--rf-text); }