/* ============================================================= DOPAMI — Design tokens Source de verite unique. Chargee globalement par layout.njk, avant le pageCss de chaque page. Remplace les 28 blocs :root qui etaient dupliques dans src/assets/css/pages/*.css, ou les valeurs avaient deja diverge (--dop-primary valait #dd4b95 dans 27 fichiers et #c93684 dans un). ============================================================= */ :root { /* ---------- Marque ---------- Rose = accent unique: souligne trace, grands nombres, CTA primaire. Le degrade est reserve au seul mot "dopami" (wordmark, span du h1). Jamais sur un bouton, jamais sur un fond. */ --dop-primary: #dd4b95; --dop-secondary: #f379b6; --dop-primary-dark: #a8316f; --dop-primary-soft: rgba(221, 75, 149, 0.16); --dop-wordmark: linear-gradient(135deg, #dd4b95, #f379b6); /* Violet: uniquement en halo derriere Dopa et sur la tuile season-pass. */ --dop-purple: #8d67fb; --dop-purple-accent: #ef5aa5; --dop-purple-gradient: linear-gradient(135deg, #8d67fb, #ef5aa5); /* ---------- Sol ---------- Un seul sol pour toute la page. Les sections se separent par un filet et du blanc, pas par une alternance de fonds. */ --dop-bg: #1a1c28; --dop-bg-radial-in: #161824; --dop-bg-radial-out: #13151f; --dop-overlay: rgba(26, 28, 40, 0.85); /* Surfaces encore utilisees par les pages non refondues. Les seuls elements encore encadres sur la home sont le cadre du telephone, les boutons de store et les tuiles avatar. */ --dop-bg-2: #1a1c28; --dop-bg-3: #1d2130; --dop-card: #181c28; --dop-card-2: #1f2333; /* ---------- Encre ---------- Toute la hierarchie de texte passe par cette echelle. --dop-ink-3 est a 50% et non 45% comme le brief: a 45% le contraste tombe a 4,37:1 sur --dop-bg, sous le seuil AA de 4,5. A 50% il vaut 4,8:1 et passe. */ --dop-ink-1: #ffffff; --dop-ink-2: rgba(255, 255, 255, 0.72); --dop-ink-3: rgba(255, 255, 255, 0.50); --dop-rule: rgba(255, 255, 255, 0.16); --dop-watermark: rgba(255, 255, 255, 0.08); /* Alias historiques du texte, encore lus par les pages non refondues. */ --dop-text: #f5eef3; --dop-text-muted: rgba(255, 255, 255, 0.50); --dop-text-on-pink: #ffffff; /* ---------- Bordures ---------- */ --dop-border: rgba(221, 75, 149, 0.18); --dop-border-soft: rgba(255, 255, 255, 0.06); --dop-border-strong: rgba(255, 255, 255, 0.12); /* ---------- Raretes ---------- Les cosmetiques vont du commun au legendaire. Ces quatre teintes doivent rester identiques dans l'app, sur le site et dans les visuels generes, sinon la rarete ne se lit plus. */ --dop-common: #9aa2b5; --dop-rare: #6ab4f0; --dop-epic: #bd8ae8; --dop-legendary: #e8579f; /* ---------- Accents semantiques ---------- */ --dop-success: #6ad36b; --dop-warning: #ffcf5c; --dop-energy-low: #6ad36b; --dop-energy-mid: #ffcf5c; --dop-energy-high: #ef5aa5; /* ---------- Ombres ---------- */ --dop-shadow-pink: 0 14px 28px rgba(221, 75, 149, 0.24); --dop-shadow-pink-lg: 0 16px 34px rgba(221, 75, 149, 0.30); --dop-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.28); --dop-shadow-phone: 0 24px 56px rgba(0, 0, 0, 0.45); --dop-glow-mascot: drop-shadow(0 16px 24px rgba(221, 75, 149, 0.28)); /* ---------- Rayons ---------- */ --dop-radius-xs: 8px; --dop-radius-sm: 12px; --dop-radius-md: 14px; --dop-radius-lg: 18px; --dop-radius-xl: 22px; --dop-radius-2xl: 30px; /* cadre telephone */ --dop-radius-pill: 999px; /* ---------- Espacements (base 4pt) ---------- */ --dop-space-1: 4px; --dop-space-2: 8px; --dop-space-3: 12px; --dop-space-4: 16px; --dop-space-5: 20px; --dop-space-6: 24px; --dop-space-8: 32px; --dop-space-10: 40px; --dop-space-12: 48px; --dop-space-16: 64px; --dop-space-20: 80px; --dop-space-24: 96px; /* ---------- Familles ---------- Sora : titres. DM Sans : corps, eyebrows, wordmark du pied de page. Caveat : annotations manuscrites uniquement, une par section. Nunito : wordmark de la nav, et les pages pas encore refondues. */ --dop-font-display: 'Sora', system-ui, sans-serif; --dop-font-body: 'DM Sans', system-ui, sans-serif; --dop-font-hand: 'Caveat', ui-rounded, cursive; --dop-font-brand: 'Nunito', system-ui, sans-serif; /* ---------- Echelle typographique ---------- Titres en Sora 800 a tracking negatif. */ --dop-fs-hero: clamp(38px, 5.2vw, 76px); --dop-fs-section: clamp(34px, 5vw, 72px); --dop-fs-number: clamp(96px, 13vw, 200px); --dop-fs-display: 48px; --dop-fs-h1: 42px; --dop-fs-h2: 30px; --dop-fs-h3: 22px; --dop-fs-h4: 18px; --dop-fs-lead: 20px; --dop-fs-body-lg: 18px; --dop-fs-body: 16px; --dop-fs-sm: 14px; --dop-fs-xs: 13px; --dop-fs-2xs: 12px; --dop-fs-3xs: 10px; --dop-fs-hand: clamp(24px, 2.4vw, 32px); --dop-lh-tight: 1.02; --dop-lh-snug: 1.12; --dop-lh-normal: 1.45; --dop-lh-relaxed: 1.7; --dop-tracking-hero: -0.028em; --dop-tracking-section: -0.024em; --dop-tracking-number: -0.04em; --dop-tracking-tight: -0.02em; --dop-tracking-eyebrow: 0.24em; /* ---------- Mouvement ---------- */ --dop-ease: ease; --dop-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dop-dur-fast: .15s; --dop-dur: .25s; --dop-dur-slow: .6s; /* ---------- Mise en page ---------- Valeur par defaut juste, pour que le premier rendu ne decale pas: main.js remesure ensuite la nav et reecrit --nav-height. */ --nav-height: 68px; /* ---------- Alias historiques ---------- Attendus par BUTTONS.md et par les pages pas encore refondues. */ --primary: var(--dop-primary); --secondary: var(--dop-secondary); --primary-dark: var(--dop-primary-dark); --primary-soft: var(--dop-primary-soft); --bg: var(--dop-bg); --bg2: var(--dop-bg-2); --bg3: var(--dop-bg-3); --card: var(--dop-card); --card2: var(--dop-card-2); --text: var(--dop-text); --muted: var(--dop-text-muted); --border: var(--dop-border); --gradient: var(--dop-primary); }