/* ============================================================
Bizspaces — Agence web créative
Brand Stylesheet (tokens + utility classes)
----------------------------------------------------------
Add to HTML :
============================================================ */
:root {
/* PRIMARY */
--brand-primary: #0A0A0A;
--brand-primary-soft: #1A1A1A;
--brand-primary-deep: #000000;
/* ACCENT — Teal Atelier */
--brand-accent: #006D6D;
--brand-accent-light: #009999;
--brand-accent-deep: #004D4D;
--brand-accent-tint: rgba(0, 109, 109, 0.08);
/* NEUTRALS */
--brand-neutral-0: #FFFFFF;
--brand-neutral-50: #FAFAFA;
--brand-neutral-100: #F5F5F5;
--brand-neutral-300: #D4D4D4;
--brand-neutral-500: #737373;
--brand-neutral-700: #404040;
--brand-neutral-900: #0A0A0A;
/* SEMANTIC */
--brand-success: #15803D;
--brand-warning: #D97706;
--brand-danger: #DC2626;
/* TYPOGRAPHY — Inter everywhere (load via @import or @font-face) */
--brand-font-display: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--brand-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--brand-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
/* ============================================================
Typography utilities
============================================================ */
.bz-text-display { font: 700 4.5rem/1.05 var(--brand-font-display); letter-spacing: -0.02em; }
.bz-h1 { font: 700 3rem/1.1 var(--brand-font-display); letter-spacing: -0.015em; }
.bz-h2 { font: 600 2.25rem/1.2 var(--brand-font-display); }
.bz-h3 { font: 600 1.5rem/1.3 var(--brand-font-display); }
.bz-body { font: 400 1rem/1.65 var(--brand-font-body); }
.bz-small { font: 500 0.875rem/1.5 var(--brand-font-body); }
.bz-overline { font: 600 0.75rem/1 var(--brand-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
/* ============================================================
Surface + color utilities
============================================================ */
.bz-bg-primary { background: var(--brand-primary); color: var(--brand-neutral-0); }
.bz-bg-accent { background: var(--brand-accent); color: var(--brand-neutral-0); }
.bz-text-accent { color: var(--brand-accent); }
.bz-text-muted { color: var(--brand-neutral-500); }
/* ============================================================
Logo lockups
============================================================ */
.bz-logo { min-width: 120px; min-height: 40px; padding: 0.5rem; }
.bz-logo--icon { width: 40px; height: 40px; }
/* ============================================================
Button system
============================================================ */
.bz-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
border-radius: 6px;
font: 600 1rem/1 var(--brand-font-body);
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, background .2s ease;
}
.bz-btn--primary {
background: var(--brand-accent);
color: #fff;
border: 1px solid var(--brand-accent);
}
.bz-btn--primary:hover {
background: var(--brand-accent-deep);
border-color: var(--brand-accent-deep);
transform: translateY(-1px);
}
.bz-btn--ghost {
background: transparent;
color: var(--brand-neutral-0);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.bz-btn--ghost:hover {
border-color: var(--brand-neutral-0);
}
/* Focus ring */
.bz-btn:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 3px;
}