/* ============================================================ Gaina — Foundations Two-layer color system: mother palette + per-vertical accent. Switch verticals via [data-sector] on . ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap"); :root { /* ---------- Layer 1 — Mother palette (invariant) ---------- */ --ink: #1A1612; /* warm ink — primary text, dark surfaces */ --ink-90: #2A2520; --ink-70: #4A433D; --ink-50: #756D65; --ink-30: #A8A099; --ink-15: #D4CEC6; --ink-08: #E8E2D9; --paper: #FBF8F3; /* warm paper — primary background */ --paper-pure: #FFFEFB; /* lifted surface (cards on paper) */ --paper-deep: #F4EFE6; /* recessed surface (input bg, code) */ --paper-edge: #EAE3D6; /* hairline borders on paper */ /* Semantic neutrals (named by role, not value) */ --fg-1: var(--ink); --fg-2: var(--ink-70); --fg-3: var(--ink-50); --fg-mute: var(--ink-30); --fg-on-dark: var(--paper); --fg-on-dark-2: #C9C2B8; --bg: var(--paper); --surface: var(--paper-pure); --surface-sunk: var(--paper-deep); --border: var(--paper-edge); --border-strong: var(--ink-15); /* Status (kept warm, never bluish) */ --positive: #4F7A5C; --warn: #B97A2C; --danger: #A0392B; /* ---------- Layer 2 — Vertical accent (default = liberal) ---------- Overridden by [data-sector] selectors below. Components only ever reference --accent / --accent-ink / --accent-soft. */ --accent: #4A6E8A; /* default: liberal (ink blue) */ --accent-ink: #3A586F; /* deeper, for text on paper */ --accent-soft: #E5ECF2; /* tint background */ --accent-on: #FBF8F3; /* fg on accent surfaces */ /* ---------- Spacing scale ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 130px; /* Section padding — generous, fluid */ --section-py: clamp(70px, 9vw, 130px); --gutter: clamp(20px, 4vw, 48px); /* ---------- Radii ---------- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 18px; /* standard */ --r-5: 28px; /* cards */ --r-pill: 999px; /* ---------- Shadows — soft, warm, never blue ---------- */ --shadow-1: 0 1px 0 rgba(26, 22, 18, 0.04); --shadow-2: 0 1px 2px rgba(26, 22, 18, 0.05), 0 4px 12px rgba(26, 22, 18, 0.04); --shadow-3: 0 2px 4px rgba(26, 22, 18, 0.06), 0 12px 32px rgba(26, 22, 18, 0.06); --shadow-press: inset 0 1px 2px rgba(26, 22, 18, 0.10); /* Hairline */ --hairline: 1px solid var(--border); /* ---------- Type system ---------- */ --font-display: "Bricolage Grotesque", "Times New Roman", serif; --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Display weights */ --w-display: 600; --w-display-italic: 500; --w-body: 400; --w-body-strong: 500; /* Type scale — fluid where it matters */ --t-display-1: clamp(48px, 6.5vw, 88px); /* hero */ --t-display-2: clamp(36px, 4.6vw, 60px); /* section title */ --t-display-3: clamp(28px, 3vw, 40px); /* subsection */ --t-h1: 32px; --t-h2: 24px; --t-h3: 20px; --t-body-lg: 19px; --t-body: 17px; --t-body-sm: 15px; --t-meta: 13px; --t-mono: 13px; --t-mono-sm: 12px; --lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; } /* ============================================================ Vertical accent overrides ============================================================ */ [data-sector="auto-ecoles"] { --accent: #C45934; /* terracotta */ --accent-ink: #A14826; --accent-soft: #F6E7DF; } [data-sector="sante"] { --accent: #5A8C6E; /* sage */ --accent-ink: #426B53; --accent-soft: #E4ECE6; } [data-sector="btp"] { --accent: #C8842B; /* ochre */ --accent-ink: #9F671C; --accent-soft: #F5E9D4; } [data-sector="coiffure"] { --accent: #C47A8E; /* dusty pink */ --accent-ink: #9E5F71; --accent-soft: #F4E4E8; } [data-sector="liberal"] { --accent: #4A6E8A; /* ink blue */ --accent-ink: #3A586F; --accent-soft: #E5ECF2; } [data-sector="restauration"] { --accent: #9C4234; /* brick red */ --accent-ink: #7C3328; --accent-soft: #F1DCD7; } /* ============================================================ Base elements (semantic defaults) ============================================================ */ html, body { background: var(--bg); color: var(--fg-1); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-relaxed); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--w-display); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--fg-1); text-wrap: balance; } h1 { font-size: var(--t-display-1); } h2 { font-size: var(--t-display-2); } h3 { font-size: var(--t-display-3); } h4 { font-size: var(--t-h2); line-height: var(--lh-snug); } p { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; } em, i, .accent-italic { font-family: var(--font-display); font-style: italic; font-weight: var(--w-display-italic); color: var(--accent-ink); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0; } small, .meta { font-family: var(--font-mono); font-size: var(--t-meta); color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: lowercase; } a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--ink); } /* ============================================================ Paper-grain background (subtle dot pattern) Apply to or sections with .paper-grain ============================================================ */ .paper-grain { background-color: var(--paper); background-image: radial-gradient(rgba(26, 22, 18, 0.045) 1px, transparent 1px); background-size: 22px 22px; background-position: 0 0; } .paper-grain-dark { background-color: var(--ink); background-image: radial-gradient(rgba(251, 248, 243, 0.04) 1px, transparent 1px); background-size: 22px 22px; } /* ============================================================ Selection — uses accent so it stays sector-correct ============================================================ */ ::selection { background: var(--accent); color: var(--accent-on); }