/* ============================================================
Hopla AI - Design System Foundations
colors_and_type.css
Fonts: Urbanist (headings, 700) + Inter (body, 400/500).
Loaded via Google Fonts. Add this to :
============================================================ */
:root {
/* ---- Brand color (Hopla's own purple - keep exact) ---- */
--purple: #7C3AED; /* primary buttons, brand accents, links */
--purple-hover: #6D28D9; /* hover/press on primary */
--lavender: #A78BFA; /* secondary accent, decorative */
--tint-strong: #F4EEFA; /* purple-tinted section backgrounds */
--tint-soft: #F7F5FF; /* the softest purple wash */
/* ---- Final CTA gradient (the one allowed purple-heavy moment) ---- */
--cta-grad: linear-gradient(165deg, #F4EEFA 0%, #E9DDFB 45%, #D8C5F8 100%);
/* ---- Neutrals ---- */
--white: #FFFFFF;
--ink: #15131A; /* primary text / headings (near-black, warm) */
--fg1: #15131A; /* alias: strongest text */
--fg2: #4A4458; /* secondary text, subdued body */
--fg3: #837D90; /* muted text, captions, placeholders */
--line: #ECE9F1; /* hairline borders, dividers */
--line-2: #E2DEEA; /* slightly stronger border */
--bg: #FFFFFF; /* page background */
--bg-alt: #FBFAFD; /* near-white alt section background */
/* ---- Semantic ---- */
--bientot-bg: #F4EEFA; /* "Bientôt" badge background */
--bientot-fg: #7C3AED; /* "Bientôt" badge text */
--positive: #16A34A; /* "Avec Hopla" check marks */
--negative: #B6B0C0; /* "Sans Hopla" muted cross marks */
/* ---- Typography families ---- */
--font-head: 'Urbanist', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
/* ---- Type scale (clamps = responsive, mobile-first) ---- */
--t-display: clamp(2.5rem, 1.6rem + 4.5vw, 4rem); /* hero H1 ~40–64px */
--t-h1: clamp(2rem, 1.4rem + 3vw, 3rem); /* section H ~32–48px */
--t-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* ~24–32px */
--t-h3: 1.25rem; /* 20px card titles */
--t-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); /* hero subline 18–22px */
--t-body: 1.0625rem; /* 17px body */
--t-small: 0.9375rem; /* 15px */
--t-micro: 0.8125rem; /* 13px badges/labels */
/* ---- Weights (max 3 in any composition) ---- */
--w-body: 400;
--w-medium: 500;
--w-bold: 700;
/* ---- Spacing - 4px base grid ---- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
--s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
--s-32: 128px;
/* ---- Radii ---- */
--r-sm: 10px; /* small chips, inputs */
--r-md: 16px; /* cards */
--r-lg: 24px; /* large panels, phone screen content */
--r-xl: 32px; /* hero feature panels */
--r-pill: 100px; /* primary buttons + pill badges */
/* ---- Elevation - soft, multi-layer, colored low-opacity shadows ---- */
--sh-sm: 0 1px 2px rgba(109,125,166,0.06), 0 2px 6px rgba(109,125,166,0.08);
--sh-md: 0 1px 2px rgba(109,125,166,0.05), 0 6px 16px rgba(109,125,166,0.10),
0 0 0 1px rgba(255,255,255,0.6) inset;
--sh-lg: 0 2px 4px rgba(109,125,166,0.06), 0 12px 32px rgba(109,125,166,0.14);
--sh-purple: 0 4px 14px rgba(124,58,237,0.30), 0 1px 3px rgba(124,58,237,0.20);
/* ---- Motion ---- */
--ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out */
--dur: 220ms;
}
/* ============================================================
Semantic element styles - opt in with .ds-scope on a wrapper,
or copy these rules directly into your build.
============================================================ */
.ds-scope {
font-family: var(--font-body);
font-weight: var(--w-body);
font-size: var(--t-body);
line-height: 1.6;
color: var(--fg1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.ds-scope h1, .ds-scope .h-display {
font-family: var(--font-head);
font-weight: var(--w-bold);
font-size: var(--t-display);
line-height: 1.04;
letter-spacing: -0.03em; /* negative tracking on big headings */
color: var(--ink);
text-wrap: balance;
}
.ds-scope h2, .ds-scope .h1 {
font-family: var(--font-head);
font-weight: var(--w-bold);
font-size: var(--t-h1);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: balance;
}
.ds-scope h3, .ds-scope .h2 {
font-family: var(--font-head);
font-weight: var(--w-bold);
font-size: var(--t-h2);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
}
.ds-scope h4, .ds-scope .h3 {
font-family: var(--font-head);
font-weight: var(--w-bold);
font-size: var(--t-h3);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
}
.ds-scope .lead {
font-size: var(--t-lead);
font-weight: var(--w-body);
line-height: 1.5;
color: var(--fg2);
text-wrap: pretty;
}
.ds-scope p { color: var(--fg2); text-wrap: pretty; }
.ds-scope .small { font-size: var(--t-small); }
.ds-scope .micro { font-size: var(--t-micro); }
.ds-scope a { color: var(--purple); text-decoration: none; }
/* ---- Eyebrow / label ---- */
.ds-scope .eyebrow {
font-family: var(--font-body);
font-weight: var(--w-medium);
font-size: var(--t-micro);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--purple);
}