/* ============================================================================ Chickengo — Design tokens DA « façade » : reprend l'établissement d'Issy-les-Moulineaux. - Gris anthracite dominant (bandeau de façade, comptoir) : surfaces, header, cartes. - Fond tirant vert émeraude foncé (carrelage zellige derrière le comptoir). - Jaune de l'enseigne rétroéclairée (« CHICKENGO », badge rond) : actions, prix, accents — halo doux, jamais criard. Typo : Jost (géométrique type Futura, C/G/O circulaires comme l'enseigne). ========================================================================== */ :root { /* ========== PALETTE SOURCE (prélevée sur les photos client) ========== */ --cg-yellow: #F1C441; --cg-yellow-rgb: 241, 196, 65; /* lettres enseigne */ --cg-yellow-deep: #F9B831; /* fond du badge rond */ --cg-cream: #EFD37B; --cg-cream-rgb: 239, 211, 123; /* traits clairs du badge*/ --cg-anthracite: #343A3D; /* surfaces relevées (cartes, comptoir) */ --cg-anthracite-2: #3C4245; /* variante hover */ --cg-anthracite-3: #24282B; /* header / footer, plus profond */ --cg-bg: #2B302E; /* FOND DE PAGE : anthracite clair, à peine teinté */ --cg-emerald-bg: #0E211B; /* émeraude profond (héros, halos, touches de fond) */ --cg-emerald: #123A2E; /* carreau zellige de base */ --cg-emerald-2: #1B5343; /* carreau clair / reflets */ --cg-emerald-line: #0A1F19; /* joints du carrelage */ --cg-emerald-ui: #6FBFA0; /* émeraude lisible (liens info, badges) */ --cg-neon: #4BE38A; --cg-neon-rgb: 75, 227, 138; /* néon vert ORDER/PICK-UP */ --cg-text: #F2F0E8; --cg-muted: #A9B0A8; /* ========== BRAND ========== */ --primary: var(--cg-yellow); --primary-rgb: var(--cg-yellow-rgb); --accent: var(--cg-cream); --accent-rgb: var(--cg-cream-rgb); --purple: var(--cg-emerald-2); --purple-rgb: 27, 83, 67; --bg-dark: var(--cg-bg); --bg-card: var(--cg-anthracite); --text-main: var(--cg-text); --text-muted: var(--cg-muted); --border-color: rgba(255, 255, 255, 0.07); /* ========== COLORS ========== */ --color-primary: var(--primary); --color-primary-hover: var(--cg-yellow-deep); --color-primary-light: rgba(var(--cg-yellow-rgb), 0.16); --color-secondary: rgba(255, 255, 255, 0.06); --color-secondary-hover: rgba(255, 255, 255, 0.11); --color-accent: var(--accent); --color-accent-hover: #F6DE96; --color-bg: var(--cg-bg); --color-bg-alt: var(--cg-anthracite); --color-bg-dark: var(--cg-bg); --color-text: var(--cg-text); --color-text-light: var(--cg-muted); --color-text-inverse: #15181A; --color-border: var(--border-color); --color-success: #2FA97C; --color-warning: #E8A13C; --color-error: #E4574D; --color-info: var(--cg-emerald-ui); /* Alias hérités, utilisés en dur par certaines pages (checkout, suivi…). */ --bg: var(--cg-bg); --color-text-main: var(--cg-text); --color-text-muted: var(--cg-muted); --color-primary-blue: var(--cg-emerald-ui); --radius-card: 0.9rem; /* ========== TYPOGRAPHY ========== Titrage : Josefin Sans — géométrique Art déco, capitales fines et hautes, l'esprit de l'enseigne (le wordmark exact est un SVG sur-mesure, cf. templates_blank/_wordmark.html). Labeur : Jost, géométrique lisible. */ --font-family: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif; --font-family-heading: 'Josefin Sans', 'Jost', 'Century Gothic', system-ui, sans-serif; --font-family-accent: 'Josefin Sans', 'Jost', 'Century Gothic', system-ui, sans-serif; --font-family-ui: 'Josefin Sans', 'Jost', 'Century Gothic', system-ui, sans-serif; --font-family-price: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif; --font-family-display: 'Josefin Sans', 'Jost', 'Century Gothic', system-ui, sans-serif; --font-family-mono: ui-monospace, SFMono-Regular, Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --font-size-4xl: 2.5rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ========== HALO ENSEIGNE (rétroéclairage doux — jamais flashy) ========== */ --neon-primary: 0 0 14px rgba(var(--cg-yellow-rgb), 0.35), 0 0 34px rgba(var(--cg-yellow-rgb), 0.16); --neon-primary-soft: 0 0 10px rgba(var(--cg-yellow-rgb), 0.22); --neon-accent: 0 0 10px rgba(var(--cg-cream-rgb), 0.20); --glow-box-primary: 0 6px 22px -6px rgba(var(--cg-yellow-rgb), 0.30); --glow-box-primary-strong: 0 10px 30px -8px rgba(var(--cg-yellow-rgb), 0.42); --glow-box-accent: 0 6px 20px -6px rgba(var(--cg-cream-rgb), 0.25); /* ========== SPACING ========== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ========== BORDERS & RADIUS ========== */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1.1rem; --radius-full: 9999px; --border-width: 1px; --border-width-thick: 2px; /* ========== SHADOWS ========== */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.35); --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.40); --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.45); /* ========== TRANSITIONS ========== */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; /* ========== LAYOUT ========== */ --container-max-width: 1200px; --container-padding: var(--space-4); --header-height: 72px; --footer-height: auto; --grid-gap: var(--space-6); --products-grid-columns: repeat(auto-fill, minmax(280px, 1fr)); --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; }