/* =========================================================
PixHome — Design Tokens & Base Styles
Drop this file into app/assets/stylesheets/pixhome.css
Requires: pixhome_components.css for UI components
Fonts (Google + Fontshare) — add to layout :
========================================================= */
:root {
/* ===== Brand primary (bleu trust) ===== */
--px-primary-50: #EEF3FF;
--px-primary-100: #D7E2FF;
--px-primary-200: #AFC4FF;
--px-primary-300: #7F9EFF;
--px-primary-400: #4F78FF;
--px-primary-500: #2F6BFF; /* accent / CTA */
--px-primary-600: #1B3A8A; /* dominante / brand */
--px-primary-700: #142B6A;
--px-primary-800: #0E1F4C;
--px-primary-900: #08132F;
/* ===== Neutrals (warm off-white) ===== */
--px-ink-900: #0A0F1C;
--px-ink-800: #141A2B;
--px-ink-700: #2A3142;
--px-ink-600: #3F4759;
--px-ink-500: #646B7E;
--px-ink-400: #8A90A2;
--px-ink-300: #B5B9C6;
--px-ink-200: #DADDE4;
--px-ink-100: #ECEEF2;
--px-ink-50: #F5F6F8;
--px-paper: #FAFAF7;
--px-white: #FFFFFF;
/* ===== Semantic ===== */
--px-success: #0E8F5E;
--px-warn: #D48A00;
--px-danger: #D0342C;
--px-info: var(--px-primary-500);
/* ===== Typography ===== */
--px-font-display: "General Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
--px-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--px-font-mono: "JetBrains Mono", ui-monospace, monospace;
--px-text-xs: 12px;
--px-text-sm: 14px;
--px-text-base: 16px;
--px-text-lg: 18px;
--px-text-xl: 20px;
--px-text-2xl: 24px;
--px-text-3xl: 30px;
--px-text-4xl: 38px;
--px-text-5xl: 48px;
--px-text-6xl: 64px;
/* ===== Spacing (4px base) ===== */
--px-s-1: 4px; --px-s-2: 8px; --px-s-3: 12px;
--px-s-4: 16px; --px-s-5: 20px; --px-s-6: 24px;
--px-s-8: 32px; --px-s-10: 40px; --px-s-12: 48px;
--px-s-16: 64px; --px-s-20: 80px; --px-s-24: 96px; --px-s-32: 128px;
/* ===== Radius ===== */
--px-r-sm: 6px; --px-r-md: 10px; --px-r-lg: 14px;
--px-r-xl: 20px; --px-r-2xl: 28px; --px-r-full: 9999px;
/* ===== Shadow ===== */
--px-shadow-xs: 0 1px 2px rgba(10,15,28,.06);
--px-shadow-sm: 0 2px 4px rgba(10,15,28,.06), 0 1px 2px rgba(10,15,28,.04);
--px-shadow-md: 0 8px 20px -4px rgba(10,15,28,.10), 0 2px 4px rgba(10,15,28,.05);
--px-shadow-lg: 0 20px 40px -8px rgba(10,15,28,.14), 0 4px 8px rgba(10,15,28,.06);
--px-shadow-xl: 0 32px 64px -12px rgba(10,15,28,.22);
--px-shadow-brand: 0 18px 40px -10px rgba(27,58,138,.35);
/* ===== Motion ===== */
--px-ease: cubic-bezier(.2,.7,.2,1);
--px-dur-fast: 140ms;
--px-dur: 240ms;
--px-dur-slow: 480ms;
/* ===== Layout ===== */
--px-container: 1200px;
--px-gutter: 24px;
}
/* ===== Bootstrap variable overrides ===== */
:root {
--bs-primary: var(--px-primary-600);
--bs-primary-rgb: 27, 58, 138;
--bs-link-color: var(--px-primary-600);
--bs-link-hover-color: var(--px-primary-700);
--bs-body-font-family: var(--px-font-sans);
--bs-body-font-size: var(--px-text-base);
--bs-body-color: var(--px-ink-900);
--bs-body-bg: var(--px-paper);
--bs-border-color: var(--px-ink-200);
--bs-border-radius: var(--px-r-md);
--bs-border-radius-sm: var(--px-r-sm);
--bs-border-radius-lg: var(--px-r-lg);
--bs-border-radius-xl: var(--px-r-xl);
--bs-box-shadow: var(--px-shadow-md);
--bs-box-shadow-sm: var(--px-shadow-sm);
--bs-box-shadow-lg: var(--px-shadow-lg);
--bs-font-sans-serif: var(--px-font-sans);
--bs-spacer: var(--px-s-4);
}
/* ===== Base reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--px-font-sans);
font-size: var(--px-text-base);
color: var(--px-ink-900);
background: var(--px-paper);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--px-primary-500); outline-offset: 2px; border-radius: 4px; }
/* ===== Layout utilities ===== */
.px-container {
width: 100%;
max-width: var(--px-container);
margin: 0 auto;
padding-left: var(--px-gutter);
padding-right: var(--px-gutter);
}
/* ===== Typography classes ===== */
.px-display { font-family: var(--px-font-display); font-weight: 600; font-size: var(--px-text-6xl); line-height: 1.02; letter-spacing: -0.028em; }
.px-h1 { font-family: var(--px-font-display); font-weight: 600; font-size: var(--px-text-5xl); line-height: 1.05; letter-spacing: -0.024em; }
.px-h2 { font-family: var(--px-font-display); font-weight: 600; font-size: var(--px-text-4xl); line-height: 1.1; letter-spacing: -0.02em; }
.px-h3 { font-family: var(--px-font-display); font-weight: 600; font-size: var(--px-text-3xl); line-height: 1.15; letter-spacing: -0.015em; }
.px-h4 { font-family: var(--px-font-display); font-weight: 600; font-size: var(--px-text-2xl); line-height: 1.25; letter-spacing: -0.01em; }
.px-lead { font-size: var(--px-text-xl); line-height: 1.5; color: var(--px-ink-600); }
.px-body { font-size: var(--px-text-base); line-height: 1.6; color: var(--px-ink-700); }
.px-small { font-size: var(--px-text-sm); line-height: 1.5; color: var(--px-ink-500); }
.px-eyebrow { font-size: var(--px-text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--px-primary-600); }
.px-mono { font-family: var(--px-font-mono); font-size: var(--px-text-sm); letter-spacing: -0.01em; }
/* Responsive type */
@media (max-width: 768px) {
.px-display { font-size: 40px; }
.px-h1 { font-size: 32px; }
.px-h2 { font-size: 26px; }
.px-h3 { font-size: 22px; }
.px-lead { font-size: 17px; }
}