/* * Design tokens — transcription fidèle de la maquette (spec design §1, §2, §7). * Toute valeur hexadécimale vient de la maquette : ne pas la retoucher sans repasser par le design. */ :root { color-scheme: dark; /* Fonds — du plus profond (racine) au plus clair (survol de ligne). */ --rb-bg-base: #05080F; --rb-bg-sidebar: #070C16; --rb-bg-panel: #080D18; --rb-bg-surface: #0A101D; --rb-bg-surface-alt: #0B1220; --rb-bg-inset: #0C1424; --rb-bg-hover: #0D1626; /* Bordures — graduées de la plus discrète (séparateur de ligne) à la plus marquée. */ --rb-border-row: #101A2B; --rb-border-subtle: #131E31; --rb-border-default: #16233A; --rb-border-strong: #1A2740; --rb-border-input: #1C2B45; --rb-border-chip: #1F2E49; --rb-border-muted: #24334D; --rb-border-accent-purple: #2A2140; /* Textes — du plus contrasté au plus effacé. */ --rb-text-primary: #E6EDF7; --rb-text-heading: #DCE7F5; --rb-text-secondary-light: #CFE0F2; --rb-text-secondary: #A8BBD3; --rb-text-muted: #9FB2CB; --rb-text-subdued: #7D90AC; --rb-text-label: #67799A; --rb-text-faint: #5C6E8C; --rb-text-ghost: #4E5F7C; /* Accents de marque et de signal marché. */ --rb-accent-cyan: #5FE3F5; --rb-accent-cyan-dark: #3FB6E8; --rb-accent-purple: #A98CFF; --rb-accent-purple-dark: #7B5CE8; --rb-accent-gold: #E8C37A; --rb-accent-green: #4ADE9B; --rb-accent-red: #FF6B6B; --rb-accent-orange: #FF9F6B; --rb-accent-gray: #6C7E9C; --rb-accent-silver: #CBD9EA; --rb-accent-bronze: #C9915C; /* Raretés — la couleur double toujours un libellé, jamais seule porteuse de sens. */ --rb-rarity-common: var(--rb-accent-gray); --rb-rarity-uncommon: var(--rb-accent-cyan); --rb-rarity-rare: var(--rb-accent-purple); --rb-rarity-legendary: var(--rb-accent-gold); --rb-rarity-champion: var(--rb-accent-orange); /* Recommandations — mêmes teintes que les accents, nommées par leur sens métier. */ --rb-reco-buy: var(--rb-accent-green); --rb-reco-sell: var(--rb-accent-red); --rb-reco-hold: var(--rb-accent-cyan); --rb-reco-watch: var(--rb-text-muted); --rb-reco-search: var(--rb-accent-purple); /* Opacités du badge de recommandation (fond / bordure), constantes pour les cinq variantes. */ --rb-badge-fill-opacity: 12%; --rb-badge-border-opacity: 33%; /* Piles de polices — Manrope pour l'interface, JetBrains Mono pour toute donnée chiffrée. */ --rb-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --rb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Densité — seul levier de la maquette : le padding vertical des lignes de tableau. */ --rb-row-padding-y: 14px; --rb-row-padding-x: 20px; /* Shell — trois nuances de la barre latérale sans équivalent dans la palette de base. */ --rb-nav-text-idle: #8FA3BE; --rb-nav-text-active: #EAF3FF; --rb-nav-bg-hover: #101B2C; /* Connexion — fond du hero, séparateur de colonnes et texte posé sur un aplat cyan. */ --rb-auth-hero-glow: #0E2A44; --rb-auth-hero-mid: #070E1C; --rb-auth-grid: #0E2036; --rb-auth-divider: #142034; --rb-text-on-accent: #04121A; /* Rayons et fond de piste des barres de score. */ --rb-radius-sm: 4px; --rb-radius-md: 8px; --rb-track-bg: #152136; } /* * Densité compacte. Hook CSS uniquement : poser `data-density="compact"` sur ou . * La persistance de la préférence est côté serveur, hors périmètre de cette feuille. */ [data-density="compact"] { --rb-row-padding-y: 9px; }