/** * tokens.css – Alixco design tokens (single source for re-branding & dark mode). * Generated from design-tokens.json. Values reconciled with newlayout.css. * Load BEFORE newlayout.css and the redesign stylesheets; they consume var(--c-*). * Mirror note: when colors change, re-sync the CMS editor mirror in P2P-admin. */ :root{ /* Brand (real web2 values) */ --c-blue:#1C588E; /* .text-headline rgb(28,88,142) */ --c-blue-variant:#1A578E; /* .intro_headline / nav underline / button border */ --c-green:#01DF0D; /* .green CTA */ --c-green-hover:#76c776; /* .green:hover */ --c-green-alt:#19B934; /* .svg_green */ --c-green-text:#1f7a14; --c-btn-text:#463939; /* text on green CTA */ --c-orange:#FF9901; /* .svg icons, .faq_hr, focus outline */ /* Status (fill / large bold number; large-text 3:1) */ --c-success:#18A957; --c-danger:#D64545; --c-warning:#E1A100; /* Status text-safe (small colored text, >=4.5:1 on white) */ --c-success-text:#15803D; --c-danger-text:#C42B2B; /* Surfaces */ --c-bg:#FFFFFF; --c-bg-muted:#F4F7FA; --c-card:#FFFFFF; --c-card-2:#e9f1fa; --c-line:#E6ECF2; --c-chip:#eef3f8; --c-active:#D6EAF8; --c-headline-grey:#F5F5F5; --c-input-grey:#E8E8E8; /* Text */ --c-text:#15212e; --c-body:#333333; --c-muted:#6b7a89; /* Status soft */ --c-pos-bg:#e6f6ec; --c-neg-bg:#fdeaea; --c-warn-bg:#fdf3df; --c-warn-text:#a87900; /* Radius / elevation */ --r-card:12px; --r-chip:10px; --r-pill:50px; --r-btn:10px; --shadow:0 2px 6px rgba(18,40,66,.06),0 8px 24px rgba(18,40,66,.06); --shadow-hover:0 6px 14px rgba(18,40,66,.12),0 14px 36px rgba(18,40,66,.10); /* Spacing / layout */ --sp-xs:6px; --sp-sm:10px; --sp-md:14px; --sp-lg:18px; --sp-xl:26px; --container-max:1200px; /* Type */ --font-display:'Poppins', sans-serif; --font-body:'Source Sans Pro', sans-serif; --font-button:'Open Sans', sans-serif; /* Focus ring */ --focus-ring:0 0 0 3px rgba(28,88,142,.45); /* z-index scale (mode-independent; avoid arbitrary z-9999) */ --z-base:0; --z-dropdown:20; --z-bottombar:30; --z-drawer:40; --z-modal:50; --z-toast:60; /* Skeleton loader (reserve height, avoid content jumping) */ --skeleton-base:#E6ECF2; --skeleton-shine:#F4F7FA; } /* DARK: explicit via toggle (data-theme="dark" on ) */ :root[data-theme="dark"]{ --c-blue:#5B9BD8; --c-blue-variant:#4D8AC4; --c-green-hover:#3ad843; --c-green-alt:#36C46B; --c-green-text:#3ad843; --c-btn-text:#0c1a10; --c-orange:#FFA928; --c-success:#36C46B; --c-danger:#F0726F; --c-warning:#F0BE3C; --c-success-text:#36C46B; --c-danger-text:#F0726F; --c-bg:#0F1722; --c-bg-muted:#0F1722; --c-card:#16202E; --c-card-2:#1d2c3e; --c-line:#26323F; --c-chip:#1d2a38; --c-active:#21466d; --c-headline-grey:#1a2532; --c-input-grey:#243140; --c-text:#E7EDF3; --c-body:#C9D4DE; --c-muted:#90A0AF; --c-pos-bg:#11321f; --c-neg-bg:#3a1d1d; --c-warn-bg:#352b14; --c-warn-text:#f0be3c; --focus-ring:0 0 0 3px rgba(91,155,216,.55); --skeleton-base:#1B2533; --skeleton-shine:#26323F; --shadow:0 0 0 1px var(--c-line); --shadow-hover:0 0 0 1px #33424f,0 6px 18px rgba(0,0,0,.4); } /* DARK (system preference): DEFERRED. Auto-applying prefers-color-scheme now would render only the tokenized header dark while min.css/newlayout.css stay light. Re-enable this @media block once the whole site consumes tokens (after Step 5). Until then, dark mode activates only via the explicit data-theme="dark" toggle. */ /* DARK via system preference (re-enabled): applies unless an explicit light toggle is set. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --c-blue:#5B9BD8; --c-blue-variant:#4D8AC4; --c-green-hover:#3ad843; --c-green-alt:#36C46B; --c-green-text:#3ad843; --c-btn-text:#0c1a10; --c-orange:#FFA928; --c-success:#36C46B; --c-danger:#F0726F; --c-warning:#F0BE3C; --c-success-text:#36C46B; --c-danger-text:#F0726F; --c-bg:#0F1722; --c-bg-muted:#0F1722; --c-card:#16202E; --c-card-2:#1d2c3e; --c-line:#26323F; --c-chip:#1d2a38; --c-active:#21466d; --c-headline-grey:#1a2532; --c-input-grey:#243140; --c-text:#E7EDF3; --c-body:#C9D4DE; --c-muted:#90A0AF; --c-pos-bg:#11321f; --c-neg-bg:#3a1d1d; --c-warn-bg:#352b14; --c-warn-text:#f0be3c; --focus-ring:0 0 0 3px rgba(91,155,216,.55); --skeleton-base:#1B2533; --skeleton-shine:#26323F; --shadow:0 0 0 1px #26323F; --shadow-hover:0 0 0 1px #33424f,0 6px 18px rgba(0,0,0,.4); } }