/* ────────────────────────────────────────────────────────────────── SmartCORE Cloud Engineering — Design Tokens Extracted from Figma source file "SmartCORE Landing.fig" ────────────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap"); :root { /* ─── BRAND COLORS ─────────────────────────────────── */ --sc-brand-blue: rgb(0, 128, 255); /* Primary brand blue — buttons, accents, links */ --sc-brand-blue-deep: rgb(15, 81, 168); /* Hover / pressed */ --sc-brand-blue-mid: rgb(28, 101, 197); --sc-brand-blue-1: rgb(14, 75, 203); /* CTA gradient mid */ --sc-brand-blue-2: rgb(23, 39, 169); /* CTA gradient end */ --sc-brand-blue-3: rgb(56, 85, 225); --sc-brand-violet: rgb(18, 57, 186); /* Hero glow secondary */ --sc-brand-cyan: rgb(60, 203, 244); /* Hero blur accent */ /* ─── BACKGROUND TINTS (soft pastel washes) ────────── */ --sc-bg-page: rgb(245, 248, 255); /* Default page bg */ --sc-bg-page-2: rgb(242, 242, 242); /* Off-canvas bg */ --sc-bg-blue-50: rgb(235, 245, 255); /* Icon chip — blue */ --sc-bg-blue-100: rgb(222, 240, 255); --sc-bg-blue-150: rgb(220, 238, 255); /* Integraciones section bg */ --sc-bg-cyan-50: rgb(208, 245, 255); /* Hero quarter-circle */ --sc-bg-cyan-100: rgb(227, 255, 255); /* Icon chip — cyan */ --sc-bg-orange-50: rgb(255, 247, 242); /* Icon chip — orange */ --sc-bg-green-50: rgb(242, 255, 239); /* Icon chip — green */ --sc-bg-purple-50: rgb(252, 248, 251); /* Icon chip — purple */ --sc-bg-yellow-50: rgb(255, 252, 244); /* Icon chip — yellow */ --sc-bg-neutral-50: rgb(249, 249, 249); --sc-bg-card-soft: rgb(245, 247, 250); /* Testimonial card layer */ --sc-bg-glass: rgba(255, 255, 255, 0.6); --sc-bg-glass-soft: rgba(255, 255, 255, 0.24); /* ─── ICON / MODULE ACCENTS ────────────────────────── */ --sc-accent-blue: rgb(0, 128, 255); --sc-accent-green: rgb(32, 122, 10); --sc-accent-orange: rgb(250, 100, 0); --sc-accent-cyan: rgb(0, 172, 172); --sc-accent-yellow: rgb(255, 194, 32); --sc-accent-purple: rgb(166, 80, 159); /* ─── TEXT COLORS ──────────────────────────────────── */ --sc-text-1: rgb(0, 0, 0); /* Display, eyebrow numbers */ --sc-text-2: rgb(17, 24, 39); /* H3 dark headings */ --sc-text-3: rgb(27, 31, 34); /* Names */ --sc-text-4: rgb(43, 45, 48); /* Card titles */ --sc-text-body: rgb(107, 109, 115); /* Body copy / muted */ --sc-text-muted: rgb(107, 114, 128); /* Footer fine print */ --sc-text-quote: rgb(89, 91, 96); /* Testimonial quote */ --sc-text-meta: rgb(78, 89, 96); /* Roles, secondary labels */ --sc-text-input: rgb(80, 82, 86); /* Input text */ --sc-text-eyebrow: rgb(137, 135, 161); /* Section eyebrows */ /* ─── BORDERS / DIVIDERS ───────────────────────────── */ --sc-border-1: rgb(228, 228, 229); --sc-border-soft: rgb(220, 238, 255); /* Footer divider */ --sc-border-card: rgb(222, 229, 237); /* Testimonial card */ --sc-border-pale-blue: rgb(191, 226, 255); /* Contact section divider */ /* ─── SHADOWS ──────────────────────────────────────── */ --sc-shadow-nav: 0 1px 4px rgba(0, 0, 0, 0.2); --sc-shadow-card: 0 1px 1px rgba(106,114,128,0.25), 0 4px 8px rgba(106,114,128,0.05), 0 6px 6px rgba(106,114,128,0.08), 0 12px 20px rgba(106,114,128,0.05); --sc-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04); /* ─── RADII ────────────────────────────────────────── */ --sc-radius-sm: 8px; --sc-radius-md: 12px; /* Standard card / chip */ --sc-radius-lg: 24px; /* Carousel card */ --sc-radius-pill: 999px; /* Pills, nav capsule */ /* ─── SPACING SCALE ────────────────────────────────── */ --sc-space-1: 4px; --sc-space-2: 8px; --sc-space-3: 12px; --sc-space-4: 16px; --sc-space-5: 20px; --sc-space-6: 24px; --sc-space-8: 32px; --sc-space-10: 40px; --sc-space-12: 48px; --sc-space-16: 64px; --sc-space-20: 80px; /* Section vertical padding */ /* ─── TYPOGRAPHY — FAMILIES ────────────────────────── */ --sc-font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; --sc-font-body: "Inter", system-ui, -apple-system, sans-serif; /* ─── TYPOGRAPHY — SIZE / WEIGHT TOKENS ────────────── */ --sc-fs-display-lg: 60px; /* Hero, section openers */ --sc-fs-display-md: 48px; /* Section "Conoce nuestras…" */ --sc-fs-h2: 36px; /* Subsection headings */ --sc-fs-h3: 24px; /* Testimonial quote */ --sc-fs-h4: 20px; /* Card titles, eyebrow */ --sc-fs-h5: 18px; /* Footer column heads */ --sc-fs-body: 16px; --sc-fs-sm: 14px; /* Card body, footer */ --sc-fs-xs: 12px; --sc-fw-regular: 400; --sc-fw-medium: 500; --sc-fw-semibold: 600; --sc-fw-bold: 700; } /* ─── SEMANTIC ELEMENT DEFAULTS ─────────────────────────── */ .sc-h1, h1.sc { font-family: var(--sc-font-display); font-weight: var(--sc-fw-bold); font-size: var(--sc-fs-display-lg); line-height: 1.0; color: var(--sc-text-1); letter-spacing: -0.01em; } .sc-h2, h2.sc { font-family: var(--sc-font-display); font-weight: var(--sc-fw-bold); font-size: var(--sc-fs-h2); line-height: 1.05; color: var(--sc-text-1); } .sc-h3, h3.sc { font-family: var(--sc-font-display); font-weight: var(--sc-fw-bold); font-size: var(--sc-fs-h4); color: var(--sc-text-4); } .sc-eyebrow { font-family: var(--sc-font-body); font-size: var(--sc-fs-h4); color: var(--sc-text-eyebrow); line-height: 1.5; } .sc-body { font-family: var(--sc-font-body); font-size: var(--sc-fs-h4); line-height: 1.4; color: var(--sc-text-body); } .sc-body-sm { font-family: var(--sc-font-body); font-size: var(--sc-fs-sm); color: var(--sc-text-body); } .sc-button-label { font-family: var(--sc-font-display); font-weight: var(--sc-fw-medium); font-size: var(--sc-fs-sm); line-height: 1; }