/* ============================================================ RECATOOLS · Brand tokens Practical Tools. Trusted Intelligence. LIGHT theme is default. DARK is opt-in via `data-theme="dark"` on (or any wrapper). Toggle by writing/reading localStorage("rt-theme") = "light" | "dark" and reflecting it onto . ============================================================ */ :root { /* ---- Brand colors (theme-invariant) ---- */ --rt-brand-navy: #0D1B2A; --rt-brand-navy-2: #16273C; --rt-brand-orange: #E8622A; --rt-brand-paper: #F6F4EF; --rt-brand-paper-2: #ECE7DC; /* Status colors (same in both themes) */ --rt-success: #1F8A5B; --rt-link: #2A6FDB; /* ---- Semantic tokens · LIGHT theme (defaults) ---- */ --rt-bg: var(--rt-brand-paper); /* page background */ --rt-bg-inset: var(--rt-brand-paper-2); /* inset sections, code */ --rt-surface: #FFFFFF; /* cards on top of bg */ --rt-surface-2: #FAFAF7; /* meta bars inside cards */ --rt-ink: var(--rt-brand-navy); /* primary text */ --rt-ink-soft: #2A3340; /* body copy, slightly soft */ --rt-ink-muted: #6B7480; /* metadata, captions */ --rt-hairline: #E6E1D4; /* dividers, card borders */ --rt-tile-bg: var(--rt-brand-navy); /* logo tile in nav/footer */ --rt-tile-ink: var(--rt-brand-paper); /* R inside the tile */ /* Accent — same in both themes, one moment per surface */ --rt-accent: var(--rt-brand-orange); --rt-accent-soft: rgba(232, 98, 42, 0.10); /* tinted bg behind accent */ --rt-success-soft: rgba(31, 138, 91, 0.12); /* live-pill bg */ /* "Hero result" surface — the dark navy card with big orange number * * on tool subpages. In LIGHT theme this is INTENTIONALLY navy so it * * pops against the paper page. In DARK theme it stays navy but with a * * slightly darker variant to layer correctly. */ --rt-result-bg: var(--rt-brand-navy); --rt-result-ink: var(--rt-brand-paper); --rt-result-muted: #7E8B9C; /* Type */ --rt-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rt-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --rt-font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; /* Type scale (font-shorthand: weight size/line-height family) */ --rt-display: 700 56px/1.05 var(--rt-font-sans); --rt-h2: 600 36px/1.10 var(--rt-font-sans); --rt-h3: 600 22px/1.20 var(--rt-font-sans); --rt-body-lg: 400 17px/1.55 var(--rt-font-sans); --rt-body: 400 14px/1.60 var(--rt-font-sans); --rt-eyebrow: 500 11px/1.20 var(--rt-font-mono); /* + 0.18em + uppercase */ --rt-label: 500 12px/1.40 var(--rt-font-mono); /* Radii */ --rt-r-chip: 4px; --rt-r-card: 8px; --rt-r-button: 14px; --rt-r-tile: 20px; /* Spacing scale (4px base) */ --rt-s-1: 4px; --rt-s-2: 8px; --rt-s-3: 12px; --rt-s-4: 16px; --rt-s-6: 24px; --rt-s-8: 32px; --rt-s-12: 48px; --rt-s-16: 64px; --rt-s-24: 96px; /* Layout */ --rt-content-max: 1200px; --rt-gutter: 48px; /* Browser UI hint */ color-scheme: light; } /* ---- DARK theme overrides ---- Opt-in via [data-theme="dark"] on or a wrapper. ============================================================ */ [data-theme="dark"] { --rt-bg: var(--rt-brand-navy); --rt-bg-inset: var(--rt-brand-navy-2); --rt-surface: var(--rt-brand-navy-2); /* cards lift via lighter surface */ --rt-surface-2: #1B2F47; /* meta bars inside cards */ --rt-ink: var(--rt-brand-paper); --rt-ink-soft: #D4D9E0; --rt-ink-muted: #7E8B9C; --rt-hairline: rgba(255, 255, 255, 0.08); --rt-tile-bg: var(--rt-brand-paper); /* tile flips to paper on navy bg */ --rt-tile-ink: var(--rt-brand-navy); --rt-accent-soft: rgba(232, 98, 42, 0.16); --rt-success-soft: rgba(31, 138, 91, 0.18); /* Result card stays navy, but slightly darker than nav-2 to layer */ --rt-result-bg: #0A1521; --rt-result-ink: var(--rt-brand-paper); --rt-result-muted: #7E8B9C; color-scheme: dark; } /* Optional: system-preference fallback for users who haven't toggled. Uncomment if you want dark theme to follow OS preference by default. */ /* @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rt-bg: var(--rt-brand-navy); --rt-bg-inset: var(--rt-brand-navy-2); --rt-surface: var(--rt-brand-navy-2); --rt-surface-2: #1B2F47; --rt-ink: var(--rt-brand-paper); --rt-ink-soft: #D4D9E0; --rt-ink-muted: #7E8B9C; --rt-hairline: rgba(255, 255, 255, 0.08); --rt-tile-bg: var(--rt-brand-paper); --rt-tile-ink: var(--rt-brand-navy); --rt-accent-soft: rgba(232, 98, 42, 0.16); --rt-success-soft: rgba(31, 138, 91, 0.18); --rt-result-bg: #0A1521; color-scheme: dark; } } */ /* ============================================================ Utility classes (optional — convenience) ============================================================ */ .rt-eyebrow { font: var(--rt-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rt-ink-muted); } .rt-display { font: var(--rt-display); letter-spacing: -0.025em; color: var(--rt-ink); } .rt-h2 { font: var(--rt-h2); letter-spacing: -0.015em; color: var(--rt-ink); } .rt-h3 { font: var(--rt-h3); letter-spacing: -0.010em; color: var(--rt-ink); } .rt-mute { color: var(--rt-ink-muted); } .rt-accent { color: var(--rt-accent); }