/* ========================================================================== tokens.css — GENERATED FROM FIGMA. DO NOT HAND-EDIT. Source: file c4tmd4xZSBXk1vQEQpNUVW collections "WRC-Colors Variables", "WRC-Numbers", "WRC-Web-Type" Regenerate: see ARCHITECTURE.md § Sync — "Tokens changed" Last generated: 2026-08-25 ========================================================================== */ :root { /* ---------- brand ---------- */ --wrc-green: #00805f; --wrc-green-dark: #235d4e; --wrc-green-light: #d9ece7; --wrc-green-20: rgba(0, 128, 95, .20); --wrc-green-7: rgba(0, 128, 95, .07); --wrc-orange: #e55a33; --wrc-orange-light: #ffece6; --wrc-orange-20: rgba(229, 90, 51, .20); --wrc-orange-7: rgba(229, 90, 51, .07); --wrc-rackman: #275cd3; --wrc-rackman-dark: #102f72; --wrc-rackman-light: #dde7ff; --wrc-rackman-20: rgba(39, 92, 211, .20); --wrc-rackman-32: rgba(39, 92, 211, .32); --wrc-rackman-7: rgba(39, 92, 211, .07); /* ---------- ink ---------- */ --text-dark: #101828; --text-medium: #364153; --text-light: #656772; --dark-strong: #2c2c35; /* ---------- surfaces ---------- */ --white: #ffffff; --grey-light: #f8f8f8; /* page background — never white */ --grey-medium: #f0f0f0; --grey-medium-blue: #e5e7eb; --grey-strong: #d9d9d9; /* ---------- scrims ---------- */ --black-7: rgba(0, 0, 0, .07); /* hairline rules, card borders */ --black-15: rgba(0, 0, 0, .15); /* input borders */ --black-25: rgba(0, 0, 0, .25); /* placeholder / disabled ink */ --black-35: rgba(0, 0, 0, .35); --white-7: rgba(255, 255, 255, .07); --white-35: rgba(255, 255, 255, .35); --white-75: rgba(255, 255, 255, .75); /* ---------- status ---------- */ --status-blue: #275cd3; --status-blue-tint: rgba(39, 92, 211, .12); --status-green: #00805f; --status-green-tint: rgba(0, 128, 95, .12); --status-orange: #f2702a; --status-orange-tint: rgba(242, 112, 42, .12); --status-red: #e90206; --status-red-tint: rgba(233, 2, 6, .12); --status-gold: #e49a00; --status-gold-tint: rgba(228, 154, 0, .12); --status-cyan: #11a4a9; --status-cyan-tint: rgba(17, 164, 169, .12); --status-purple: #7518bc; --status-purple-tint: rgba(117, 24, 188, .12); --status-plum: #1821bc; --status-plum-tint: rgba(24, 33, 188, .12); --status-fuchsia: #c026d3; --status-fuchsia-tint: rgba(192, 38, 211, .12); --status-crimson: #ba0d61; --status-crimson-tint: rgba(186, 13, 97, .12); --status-lime: #4d7c0f; --status-lime-tint: rgba(77, 124, 15, .12); --status-olive: #829f00; --status-olive-tint: rgba(130, 159, 0, .12); --status-stale: #78716c; --status-stale-tint: rgba(120, 113, 108, .12); --medal-gold: #d4af37; --medal-silver: #a8a9ad; --medal-bronze: #cd7f32; /* ---------- radius ---------- */ --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 999px; /* ---------- spacing ---------- */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px; /* ---------- type family ---------- */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---------- APP ramp (Rackman) — fixed sizes, no device modes ---------- */ --app-title-xl: 18px; /* Title/XL Semi Bold */ --app-title-l: 16px; /* Title/L Semi Bold */ --app-title-m: 15px; /* Title/M Semi Bold */ --app-title-s: 14px; /* Title/S Semi Bold */ --app-body-xl: 14px; /* Body/XL */ --app-body-l: 13px; /* Body/L */ --app-body-m: 12.5px; /* Body/M */ --app-body-s: 12px; /* Body/S */ --app-caption: 11px; /* Caption/* */ --app-micro: 10px; /* Micro/* */ --app-label: 9.5px; /* Label/Field Medium, ls 5% */ --app-label-col: 10px; /* Label/Column Medium, ls 5% */ --app-label-sec: 10px; /* Label/Section Semi Bold, ls 5% */ --app-metric-l: 28px; /* Metric/L */ --app-metric-m: 22px; /* Metric/M */ --app-ls-label: .05em; /* the 5% tracking every micro-label carries */ /* ---------- WEB ramp — DESKTOP mode ---------- WRC-Web-Type has Desktop | Tablet | Mobile modes; the media queries below carry the Tablet and Mobile values. Keep the three in step. */ --web-display: 60px; --web-h1: 36px; --web-h2: 30px; --web-h3: 24px; --web-product-title: 28px; --web-group-heading: 24px; --web-price: 24px; --web-price-was: 20px; --web-hero-sub: 20px; --web-lede: 18px; --web-link: 18px; --web-title: 18px; --web-card-label: 18px; --web-body: 16px; --web-button: 16px; --web-label: 16px; --web-title-s: 15px; --web-meta: 14px; --web-nav: 14px; --web-caption: 13px; --web-micro: 12px; --web-badge: 10px; --web-section-label: 10px; --web-count: 8px; --web-lh: 1.28; /* 128% on every wrapping Web/* style */ /* ---------- elevation ---------- */ --shadow-card: 0 1px 2px rgba(16, 24, 40, .04); --shadow-pop: 0 8px 24px rgba(16, 24, 40, .12); --shadow-modal: 0 24px 64px rgba(16, 24, 40, .18); /* ---------- layout ---------- */ --app-sidebar-w: 200px; --app-panel-pad: 24px; --app-content-max: 1672px; /* the panel content width every screen uses */ --web-max: 1440px; --mobile-w: 390px; } /* WEB ramp — Tablet mode */ @media (max-width: 1024px) { :root { --web-display: 44px; --web-h1: 30px; --web-h2: 26px; --web-h3: 21px; --web-product-title: 24px; --web-group-heading: 21px; --web-price: 22px; --web-price-was: 18px; --web-hero-sub: 18px; --web-lede: 17px; --web-link: 17px; --web-title: 17px; --web-card-label: 17px; } } /* WEB ramp — Mobile mode */ @media (max-width: 767px) { :root { --web-display: 34px; --web-h1: 26px; --web-h2: 22px; --web-h3: 19px; --web-product-title: 21px; --web-group-heading: 19px; --web-price: 20px; --web-price-was: 16px; --web-hero-sub: 16px; --web-lede: 16px; --web-link: 16px; --web-title: 16px; --web-card-label: 16px; --web-body: 15px; --web-label: 15px; --web-button: 15px; } }