@charset "UTF-8"; /* * Color tokens * ──────────── * * Three layers, in order: * * 1. Palette primitives — raw scales (brand, navy, rust, neutral). * Theme-invariant. Never reference these directly from feature CSS — * go through a semantic token instead. * * 2. Semantic tokens (light mode) — defined on `:root`. These are the * names feature CSS uses (`--color-bg`, `--color-text`, etc.). * * 3. Dark-mode overrides — defined on `:root[data-theme="dark"]`. The * primitives stay the same; only the semantic aliases flip. * * The pre-hydration script in the layout reads `localStorage.theme` and * sets `data-theme` on `` to "light" or "dark" before first * paint, so no FOUC. Default (no stored preference) is light. */ /* line 22, app/assets/stylesheets/_color_tokens.scss */ :root { color-scheme: light; /* ── Palette primitives (theme-invariant) ───────────────────────── */ /* Brand (Orange) — anchor retargeted to marketing's --brand-signal-orange (#EF5725). */ --color-brand-50: #fff0ea; --color-brand-100: #fedccf; --color-brand-200: #fcba9f; --color-brand-300: #f89570; --color-brand-400: #f47248; --color-brand-500: #ef5725; --color-brand-600: #cc441a; --color-brand-700: #a63612; --color-brand-800: #7f2a0d; --color-brand-900: #5b1f09; /* Navy — 900 retargeted to marketing's --brand-midnight-teal (#081634). */ --color-navy-50: #eef2f8; --color-navy-100: #d8e2f0; --color-navy-200: #b6c9e3; --color-navy-300: #91aed3; --color-navy-400: #6d94c3; --color-navy-500: #4f7bb0; --color-navy-600: #3e6494; --color-navy-700: #304d74; --color-navy-800: #132b55; --color-navy-900: #081634; /* Steel blue — marketing's --brand-steel-blue (primary-hover + secondary button fill). */ --color-steel-blue: #2462a2; /* Slate blue-gray — marketing's muted accent on dark surfaces. */ --color-slate-blue-gray: #7c8aad; /* Rust — destructive/negative state tone that harmonizes with brand orange. */ --color-rust-50: #fdecea; --color-rust-500: #c2362b; --color-rust-600: #9d2922; /* Neutrals — 50/200 retargeted cooler to match marketing section separators & card borders. */ --color-neutral-0: #ffffff; --color-neutral-50: #f5f7fa; --color-neutral-100: #f2f2f2; --color-neutral-200: #e5e8ef; --color-neutral-300: #dcdcdc; --color-neutral-400: #b0b7c3; --color-neutral-500: #6b7280; --color-neutral-600: #4b5563; --color-neutral-700: #3d4758; --color-neutral-800: #1f2937; --color-neutral-900: #111827; --color-black: #000000; --color-white: #ffffff; --color-yellow-highlight: #fff176; /* Overlays — kept as alpha-on-white for use over dark surfaces. */ --color-overlay-light-10: rgba(255, 255, 255, 0.1); --color-overlay-light-15: rgba(255, 255, 255, 0.15); --color-overlay-light-18: rgba(255, 255, 255, 0.18); --color-overlay-light-20: rgba(255, 255, 255, 0.2); --color-overlay-light-25: rgba(255, 255, 255, 0.25); --color-overlay-light-40: rgba(255, 255, 255, 0.4); --color-overlay-light-90: rgba(255, 255, 255, 0.9); --color-overlay-dark-10: rgba(0, 0, 0, 0.1); --color-overlay-dark-15: rgba(0, 0, 0, 0.15); --color-overlay-dark-25: rgba(0, 0, 0, 0.25); --color-overlay-dark-55: rgba(0, 0, 0, 0.55); /* Navy-tinted shadow bases — for brand-aligned elevation on light surfaces. */ --color-navy-shadow-weak: rgba(8, 22, 52, 0.08); --color-navy-shadow-medium: rgba(8, 22, 52, 0.12); --color-navy-shadow-strong: rgba(10, 30, 63, 0.24); /* ── Semantic tokens — LIGHT MODE DEFAULTS ───────────────────────── */ /* Surfaces */ --color-bg: var(--color-neutral-50); --color-bg-muted: var(--color-neutral-100); --color-surface: var(--color-neutral-0); --color-surface-muted: var(--color-neutral-200); --color-surface-inverse: var(--color-navy-900); --color-surface-inverse-muted: var(--color-navy-800); /* Text */ --color-text: var(--color-neutral-700); --color-text-strong: var(--color-neutral-900); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-white); --color-text-inverse-muted: var(--color-neutral-400); /* Borders */ --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-300); /* Brand / interaction */ --color-primary: var(--color-brand-500); --color-primary-hover: var(--color-steel-blue); --color-primary-active: var(--color-brand-700); --color-link: var(--color-brand-500); --color-link-hover: var(--color-navy-900); --color-focus: #2470dc; --color-highlight: var(--color-yellow-highlight); --color-midnight-teal: var(--color-navy-900); /* * Keyboard focus ring — one token family shared by every interactive * element so buttons, links, and form controls announce focus the * same way. Density-aware offset is tuned in _density.scss; dark * mode lifts the mix toward the primary color so the ring still pops * against the navy canvas. */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: color-mix(in srgb, var(--color-primary) 45%, transparent); /* Shell chrome — nav stays brand-navy in both themes. */ --color-nav-bg: var(--color-navy-900); --color-nav-text: var(--color-white); --color-tooltip-bg: var(--color-black); /* Sidebar rail — shown only when the sidebar is collapsed to a * narrow strip. In dark mode the expanded sidebar shares its navy * surface with the main panel, so the rail lifts one step in the * palette to stay legible. In light mode, main is a neutral canvas * so no lift is needed — rail matches the expanded sidebar. */ --color-nav-rail-bg: var(--color-nav-bg); /* App shell canvas / main panel — flip per theme. */ --color-app-canvas: var(--color-bg); --color-app-main-bg: var(--color-surface); --color-app-main-border: var(--color-border); /* Semantic state */ --color-success: var(--color-primary); --color-success-hover: var(--color-primary-hover); --color-success-active: var(--color-primary-active); --color-success-soft-bg: var(--color-brand-50); --color-success-soft-border: color-mix( in srgb, var(--color-success) 35%, transparent ); --color-danger: var(--color-rust-500); --color-danger-hover: var(--color-rust-600); --color-danger-soft-bg: var(--color-rust-50); --color-danger-soft-border: color-mix( in srgb, var(--color-danger) 35%, transparent ); /* Info + warning — navy and brand-orange tones so non-error states * stay on-palette without introducing new hue families. */ --color-info: var(--color-navy-700); --color-info-soft-bg: var(--color-navy-50); --color-info-soft-border: color-mix( in srgb, var(--color-info) 35%, transparent ); --color-warning: var(--color-brand-700); --color-warning-soft-bg: var(--color-brand-50); --color-warning-soft-border: color-mix( in srgb, var(--color-warning) 40%, transparent ); /* Scrim — dim overlay behind modal drawers and offcanvas sheets. */ --color-scrim: var(--color-overlay-dark-55); /* Shadow tokens — default (light mode) uses navy-tinted elevation. */ --color-shadow-weak: var(--color-overlay-dark-10); --color-shadow-border: var(--color-overlay-dark-15); --color-shadow-strong: var(--color-overlay-dark-25); --shadow-elevation-sm: 0 1px 2px var(--color-navy-shadow-medium); --shadow-elevation-md: 0 2px 6px var(--color-shadow-weak); --shadow-elevation-lg: 0 8px 24px var(--color-navy-shadow-weak); /* Typography * * Inter variable (rsms.me build) is loaded in the layout . The * `InterVariable` family name targets the variable build specifically; * fallbacks cover environments where it hasn't loaded yet. * * `--font-sans-features` exposes the OpenType features Inter ships with * optional stylistic sets — cv02 (double-story a→single-story), cv03 * (open 6/9), cv04 (open 4), cv11 (single-story l) — applied globally * on so the whole UI gets the custom feel without per-element * plumbing. */ --font-sans: 'InterVariable', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-sans-features: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01'; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; /* Fluid type scale — tightened to modern SaaS sizes. Display/H1/H2 still * scale with viewport but anchor lower on the low end so headings don't * feel shouty on dense admin screens. */ --fs-display: clamp(2.25rem, 3.5vw, 3.25rem); --fs-h1: clamp(1.75rem, 2.5vw, 2.125rem); --fs-h2: clamp(1.375rem, 2vw, 1.625rem); --fs-h3: 1.1875rem; --fs-h4: 1rem; --fs-body: 0.9375rem; --fs-small: 0.8125rem; --fs-eyebrow: 0.6875rem; /* Bootstrap bridges */ --bs-primary: var(--color-primary); --bs-primary-rgb: 239, 87, 37; --bs-link-color: var(--color-link); --bs-link-hover-color: var(--color-link-hover); --bs-body-font-family: var(--font-sans); --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); } /* ── Dark-mode semantic overrides ──────────────────────────────────── * * Applied when `data-theme="dark"` is present. Shell chrome (nav * background) stays navy-900 in both modes; only the main canvas, * surfaces, text, and elevation tokens flip. */ /* line 252, app/assets/stylesheets/_color_tokens.scss */ [data-theme='dark']:root { color-scheme: dark; --color-bg: var(--color-navy-900); --color-bg-muted: var(--color-navy-800); --color-surface: var(--color-navy-900); --color-surface-muted: var(--color-navy-700); --color-text: var(--color-neutral-100); --color-text-strong: var(--color-white); --color-text-muted: var(--color-neutral-300); --color-border: var(--color-overlay-light-15); --color-border-strong: var(--color-overlay-light-20); --bs-border-color: var(--color-overlay-light-10); --bs-body-color: var(--color-white); --bs-secondary-color: var(--color-navy-100); --bs-link-color-rgb: var(--color-brand-300); --bs-link-hover-color-rgb: var(--color-brand-50); --color-link-hover: var(--color-brand-300); /* Focus ring — lift the mix on dark so the translucent ring still * reads against navy without tipping into full-saturation orange. */ --focus-ring-color: color-mix(in srgb, var(--color-primary) 65%, transparent); /* App shell — dark canvas with a slightly lighter translucent main. */ --color-app-canvas: var(--color-navy-900); --color-app-main-bg: var(--color-navy-900); --color-app-main-border: var(--color-navy-900); /* Rail lifts one step above navy-900 so the collapsed edge reads * against main (which is also navy-900 in dark mode). */ --color-nav-rail-bg: var(--color-navy-800); /* Muted brand-soft backgrounds need to read on dark — pull them into * navy territory so they don't flash as cream patches. */ --color-success-soft-bg: var(--color-overlay-light-10); --color-danger-soft-bg: var(--color-overlay-light-10); --color-info-soft-bg: var(--color-overlay-light-10); --color-warning-soft-bg: var(--color-overlay-light-10); --color-info: var(--color-navy-200); --color-warning: var(--color-brand-300); /* Elevation — per dark-mode guidelines, soften shadows on dark. */ --color-shadow-weak: var(--color-overlay-dark-25); --color-shadow-border: var(--color-overlay-light-15); --color-shadow-strong: rgba(0, 0, 0, 0.5); --shadow-elevation-sm: none; --shadow-elevation-md: none; --shadow-elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); } /* * Shared foundation for layouts that don't load application.scss (e.g. Devise). * Keep this minimal: typography baseline, brand button, heading utilities, and * the auth-form overrides needed on the dark login hero. */ /* line 9, app/assets/stylesheets/theme_tokens.scss */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; color: var(--color-text); font-feature-settings: var(--font-sans-features); font-optical-sizing: auto; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* line 22, app/assets/stylesheets/theme_tokens.scss */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.018em; line-height: 1.2; text-wrap: balance; } /* line 41, app/assets/stylesheets/theme_tokens.scss */ .heading-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); font-feature-settings: 'ss01'; } /* line 52, app/assets/stylesheets/theme_tokens.scss */ .heading-display { font-family: var(--font-sans); font-weight: 650; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.028em; text-wrap: balance; } /* line 61, app/assets/stylesheets/theme_tokens.scss */ .heading-section { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } /* line 70, app/assets/stylesheets/theme_tokens.scss */ .btn-spark, .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); font-family: var(--font-sans); font-weight: 500; border-radius: 6px; box-shadow: var(--shadow-elevation-sm); } /* line 81, app/assets/stylesheets/theme_tokens.scss */ .btn-spark:hover, .btn-spark:focus, .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-inverse); } /* line 90, app/assets/stylesheets/theme_tokens.scss */ .btn-spark:active, .btn-primary:active { background-color: var(--color-primary-active); border-color: var(--color-primary-active); color: var(--color-text-inverse); } /* * Auth forms rendered inside the devise dark layout. The container background * is navy, but inputs are white — floating labels need dark text so they * remain readable when shrunk over the input. */ /* line 103, app/assets/stylesheets/theme_tokens.scss */ .auth-form .form-floating > label { color: var(--color-text); } /* line 107, app/assets/stylesheets/theme_tokens.scss */ .auth-form .form-floating > .form-control { color: var(--color-text-strong); background-color: var(--color-surface); } /* line 112, app/assets/stylesheets/theme_tokens.scss */ .auth-form a { color: var(--color-primary); } /* line 116, app/assets/stylesheets/theme_tokens.scss */ .auth-form a:hover { color: var(--color-primary-hover); }