/* ============================================================
Recursivitum_DS — CSS Custom Properties (v1.0.0)
Drop-in tokens for any web asset. Import the fonts, then use
var(--rx-*) everywhere. Mirrors tokens.json 1:1.
Fonts (add to ):
============================================================ */
:root {
/* — Brand — */
--rx-ink: #242A56; /* primary navy */
--rx-steel: #223F61; /* steel blue */
--rx-sky: #69ABC1; /* accent teal */
/* — Sky/blue scale — */
--rx-sky-50: #EFF2FF;
--rx-sky-100: #E4E9F4;
--rx-sky-200: #D9E2F2;
--rx-sky-300: #C6CFE2;
--rx-sky-400: #BFD1FF;
/* — Text — */
--rx-text: #242A56;
--rx-text-2: #4A5578;
--rx-text-3: #555F82;
--rx-text-quiet: #9AA3BF;
--rx-on-dark: #FFFFFF;
--rx-on-dark-2: #C9D2EA;
--rx-on-dark-3: #8FA0CC;
--rx-accent: #3A7A99;
--rx-link: #223F61;
--rx-link-hover: #3A7A99;
/* — Surfaces — */
--rx-surface: #FFFFFF;
--rx-surface-subtle: #EFF2FF;
--rx-surface-inverse:#242A56;
--rx-surface-inverse-2:#223F61;
/* — Borders — */
--rx-border: #E4E9F4;
--rx-border-strong: #D9E2F2;
--rx-border-stronger:#C6CFE2;
--rx-border-on-dark: #3E4A7E;
/* — Feedback — */
--rx-danger: #A8323E;
--rx-danger-bg: #FBEDED;
--rx-danger-border: #EFC7C7;
--rx-success: #2E7D5B;
--rx-success-bg: #E9F5EF;
--rx-success-border: #BFE0CF;
/* — Gradients — */
--rx-grad-hero: linear-gradient(180deg, #FFFFFF 0%, #EFF2FF 100%);
--rx-grad-sky: linear-gradient(135deg, #69ABC1 0%, #223F61 100%);
/* — Type — */
--rx-font-display: 'Sora', system-ui, sans-serif;
--rx-font-text: 'Manrope', system-ui, -apple-system, sans-serif;
--rx-size-display: clamp(38px, 5.6vw, 68px);
--rx-size-h2: clamp(28px, 3.6vw, 44px);
--rx-size-h3: clamp(22px, 2.6vw, 30px);
--rx-size-h4: clamp(20px, 2vw, 24px);
--rx-size-lead: clamp(18px, 2vw, 21px);
--rx-size-body: 18px;
--rx-size-small: 16px;
--rx-size-caption: 14.5px;
--rx-size-micro: 13px;
--rx-lh-tight: 1.08;
--rx-lh-heading: 1.15;
--rx-lh-body: 1.65;
--rx-lh-snug: 1.6;
--rx-ls-display: -0.02em;
--rx-ls-heading: -0.015em;
--rx-ls-eyebrow: 0.14em;
--rx-ls-tag: 0.1em;
/* — Radius — */
--rx-radius-sm: 8px;
--rx-radius-md: 10px;
--rx-radius-lg: 12px;
--rx-radius-xl: 14px;
--rx-radius-2xl: 16px;
--rx-radius-3xl: 18px;
--rx-radius-pill: 99px;
/* — Shadow — */
--rx-shadow-sm: 0 4px 20px rgba(36, 42, 86, 0.06);
--rx-shadow-cta: 0 8px 24px rgba(34, 63, 97, 0.22);
--rx-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.25);
/* — Layout — */
--rx-container: 1160px;
--rx-gutter: clamp(20px, 5vw, 48px);
--rx-measure: 62ch;
--rx-section-y: clamp(64px, 8vw, 120px);
--rx-hero-y: clamp(72px, 9vw, 130px);
/* — Motion — */
--rx-ease: cubic-bezier(0.4, 0, 0.2, 1);
--rx-dur-fast: 150ms;
--rx-dur: 220ms;
}
/* ---------- Base reset / opinionated defaults ---------- */
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--rx-surface);
color: var(--rx-text);
font-family: var(--rx-font-text);
font-size: var(--rx-size-body);
line-height: var(--rx-lh-body);
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--rx-sky); color: #FFFFFF; }
a { color: var(--rx-link); text-decoration: none; transition: color var(--rx-dur-fast) var(--rx-ease); }
a:hover { color: var(--rx-link-hover); }
input, select, button, textarea { font-family: inherit; }
/* ---------- Utility classes (optional convenience) ---------- */
.rx-container { max-width: var(--rx-container); margin-inline: auto; padding-inline: var(--rx-gutter); }
.rx-section { padding-block: var(--rx-section-y); }
.rx-eyebrow {
font-size: var(--rx-size-caption); font-weight: 700;
letter-spacing: var(--rx-ls-eyebrow); text-transform: uppercase;
color: var(--rx-accent); margin: 0 0 18px;
}
.rx-display { font-family: var(--rx-font-display); font-weight: 700; font-size: var(--rx-size-display);
line-height: var(--rx-lh-tight); letter-spacing: var(--rx-ls-display); color: var(--rx-ink); margin: 0; }
.rx-h2 { font-family: var(--rx-font-display); font-weight: 700; font-size: var(--rx-size-h2);
line-height: var(--rx-lh-heading); letter-spacing: var(--rx-ls-heading); color: var(--rx-ink); margin: 0; }
.rx-h3 { font-family: var(--rx-font-display); font-weight: 700; font-size: var(--rx-size-h3);
line-height: var(--rx-lh-heading); color: var(--rx-ink); margin: 0; }
.rx-lead { font-size: var(--rx-size-lead); line-height: var(--rx-lh-snug); color: var(--rx-text-2); max-width: 56ch; }
/* Buttons */
.rx-btn { display: inline-block; font-weight: 700; font-size: 15.5px; padding: 16px 28px;
border-radius: var(--rx-radius-md); cursor: pointer; border: none;
transition: background var(--rx-dur-fast) var(--rx-ease), color var(--rx-dur-fast) var(--rx-ease); }
.rx-btn--primary { background: var(--rx-steel); color: #FFFFFF; box-shadow: var(--rx-shadow-cta); }
.rx-btn--primary:hover { background: var(--rx-sky); color: #FFFFFF; }
.rx-btn--ghost { background: transparent; color: var(--rx-steel); border: 2px solid var(--rx-steel); padding: 14px 28px; }
.rx-btn--ghost:hover { background: var(--rx-steel); color: #FFFFFF; }
/* Cards */
.rx-card { background: var(--rx-surface); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-xl); padding: 26px; box-shadow: var(--rx-shadow-sm); }
.rx-card--tint { background: var(--rx-surface-subtle); border-color: transparent; box-shadow: none; }
.rx-card--dark { background: var(--rx-surface-inverse); border: none; color: var(--rx-on-dark); }
/* Tag / pill */
.rx-tag { display: inline-block; font-size: var(--rx-size-micro); font-weight: 700;
letter-spacing: var(--rx-ls-tag); text-transform: uppercase; color: var(--rx-steel);
border: 1px solid var(--rx-border-stronger); border-radius: var(--rx-radius-pill); padding: 4px 10px; }