/* ========================================================================== TOKENS — thème unique "Noir". Voir DESIGN.md. Noir/gris + un seul accent rouge. Zéro dégradé. Cœurs rouge/blanc. Les anciens noms de variables restent comme ALIAS (bas du fichier) pour ne pas réécrire les 8 CSS de vues d'un coup. ========================================================================== */ :root { color-scheme: dark; /* ---- surfaces : noir d'encre + 3 niveaux de gris VRAIMENT distincts ---- Avant : #14/#1c/#26 se ressemblaient trop, "surface" lisait comme du bruit plat. Fond plus profond -> l'encre et le rouge lèvent ; les trois gris sont plus espacés -> une surface posée se voit ; le filet est un poil plus clair -> les listes lisent enfin comme des filets. */ --bg: #0a0a0b; --surface-1: #151518; /* posé : sheets, tab bar, mini-player, champs */ --surface-2: #1f1f23; /* pressé / chips / hover discret */ --surface-3: #2b2b30; /* actif */ --hairline: #ffffff20; /* filet 1px (blanc ~12%) */ --hairline-2: #ffffff33; /* ---- verre dépoli ("Liquid Glass", façon iOS 26) : chrome translucide + flou d'arrière-plan. Chaque surface pose `backdrop-filter: var(--glass-blur)` à côté de son `background: var(--glass-N)`. Fallback opaque plus bas. ---- */ --glass-1: rgba(20, 20, 24, 0.52); /* sheets, tab bar, mini-player, header */ --glass-2: rgba(38, 38, 44, 0.46); /* chips, boutons d'action */ --glass-3: rgba(56, 56, 64, 0.58); /* pressé / actif */ --glass-blur: saturate(180%) blur(26px); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* liseré haut lumineux */ /* ---- encre (contrastes tenus : dim ~9:1, faint ~5,7:1 sur le fond) ---- */ --ink: #f4f4f5; --ink-dim: #a7a7b0; /* #74747d donnait 4,2:1 — sous AA 4,5:1 alors que ce ton porte des textes de 10-13px (onglets, badges, temps). #8a8a93 monte à ~5,7:1. */ --ink-faint: #8a8a93; /* ---- accent UNIQUE : rouge ---- */ --red: #ff2d35; --red-press: #e0242b; --on-red: #ffffff; /* ---- typo ---- Corps : sans système (SF sur iPhone, Roboto sur le S24) — le bon choix pour une app de téléphone. Affichage : Fraunces (self-hosted, cf. css/fonts.css) — vraie police à empattements, axe optique, chaleur "composée à la main" ; fait écho au "I" sérif du logo "I ❤ Zena" et rend la MÊME chose sur iOS et Android. Fallbacks système ("New York"…) si le woff2 n'a pas chargé. */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif; --font-display: "Fraunces", "New York", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif; --t-display: 34px; --t-title: 18px; --t-body: 15px; --t-meta: 13px; --t-micro: 11px; --w-regular: 400; --w-medium: 530; --w-bold: 680; --lh-tight: 1.15; --lh-body: 1.45; /* ---- espace : base 4, jeu restreint ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* ---- rayons : serrés ---- */ --r-1: 8px; --r-2: 12px; --r-3: 16px; --r-round: 999px; /* ---- élévation : une ombre douce, rare ---- */ --shadow-1: 0 1px 2px rgba(0, 0, 0, .45); --shadow-2: 0 12px 40px rgba(0, 0, 0, .55); /* ---- motion : 2 durées, 1 easing ---- */ --ease: cubic-bezier(.2, .6, .2, 1); --fast: 130ms; --slow: 260ms; /* ==================================================================== ALIAS rétro-compat (anciens noms -> nouveaux). Ne pas ajouter de nouvelles règles ici : utiliser les tokens ci-dessus. ==================================================================== */ --bg-soft: var(--surface-1); --bg2: var(--surface-1); --card: var(--surface-1); --card-press: var(--surface-2); --bar: var(--surface-2); --line: var(--hairline); --text: var(--ink); --text-soft: var(--ink-dim); --dim: var(--ink-dim); --faint: var(--ink-faint); --c1: var(--red); --c2: var(--red); --accent: var(--red); --accent-ink: var(--on-red); --gold: #ffffff; /* ligne de paroles "chantée" = blanc franc */ --np-bg: #0c0c0d; --lyrics-bg-a: #101012; --lyrics-bg-b: #0d0d0f; --lyrics-bg-c: #090909; --good: #f4f4f5; --warn: #e0a020; --bad: var(--red); --danger: var(--red); --scrim: rgba(0, 0, 0, .66); --sheet-shadow: 0 -1px 0 var(--hairline), 0 -24px 60px rgba(0, 0, 0, .6); --fs-hero: var(--t-display); --fs-title: var(--t-title); --fs-body: var(--t-body); --fs-small: var(--t-meta); --fs-mini: var(--t-micro); --sp-1: var(--s1); --sp-2: var(--s2); --sp-3: var(--s3); --sp-4: var(--s4); --sp-5: var(--s5); --sp-6: var(--s6); --r-sm: var(--r-1); --r-md: var(--r-2); --r-lg: var(--r-2); --r-xl: var(--r-3); --r-pill: var(--r-round); --z-mini: 10; --z-tabs: 12; --z-sheet: 20; --z-ctx: 30; --z-onboard: 40; --z-toast: 50; --ease-out: var(--ease); --dur-1: var(--fast); --dur-2: var(--slow); --dur-3: var(--slow); } /* Un seul thème : on neutralise tout ancien sélecteur [data-theme]. */ :root[data-theme] { /* hérite de :root, rien à faire */ } /* ---------- "dégradés" signature -> APLATS (règle dure #1) ---------- */ .grad-text { color: var(--red); background: none; -webkit-text-fill-color: currentColor; } .grad-bg { background: var(--surface-2); } .grad-btn { background: var(--red); color: var(--on-red); border: none; } /* ---------- verre dépoli : classe utilitaire (voir DESIGN.md #5) ---------- */ .glass { background: var(--glass-1); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge); } /* backdrop-filter absent -> surfaces opaques (double @supports : plus fiable que `not (A or B)` sur les vieux moteurs) */ @supports not (backdrop-filter: blur(1px)) { @supports not (-webkit-backdrop-filter: blur(1px)) { :root { --glass-1: var(--surface-1); --glass-2: var(--surface-2); --glass-3: var(--surface-3); } } } /* transparence réduite demandée par l'OS -> opaque + pas de flou */ @media (prefers-reduced-transparency: reduce) { :root { --glass-1: var(--surface-1); --glass-2: var(--surface-2); --glass-3: var(--surface-3); } .glass, .brand, .tabbar, .miniplayer, .sheet, .ctx-menu, .search-sticky, .offline-banner, .toast, .action-pill, .filter-row .chip { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } }