/* ============================================================================= SIGNALNEST — DESIGN TOKENS Namespace unique : --sn-* Ces variables sont la source de vérité unique pour la couleur, la typographie, l'espace, le rayon, l'élévation et le mouvement. Règle d'or : un composant ne code JAMAIS une valeur brute (hex, px) — il consomme un token. Si la valeur qu'il te faut n'existe pas, tu l'ajoutes ici, pas dans le composant. Parti pris de direction (voir README § Direction) : « Terminal quant pour particuliers » — palette neutre et disciplinée, la couleur n'est utilisée que pour porter un signal (direction de marché, priorité d'action, statut de palier). Les angles sont plafonnés à 6px : SignalNest ne prend pas la forme "pilule" des apps crypto grand public, elle a la précision d'un instrument. ============================================================================= */ :root { color-scheme: light; /* --------------------------------------------------------------------- 1. COULEUR — Neutres Gris véritablement neutres (pas de dérive chaude), 10 paliers. --------------------------------------------------------------------- */ --sn-color-white: #FFFFFF; --sn-color-neutral-50: #FAFAFA; --sn-color-neutral-100: #F3F3F4; --sn-color-neutral-150: #EAEAEC; --sn-color-neutral-200: #DEDEE1; --sn-color-neutral-300: #C7C7CC; --sn-color-neutral-400: #9C9CA4; --sn-color-neutral-500: #75757D; --sn-color-neutral-600: #55555C; --sn-color-neutral-700: #38383D; --sn-color-neutral-800: #222225; --sn-color-neutral-900: #141416; --sn-color-black: #0A0A0B; /* --------------------------------------------------------------------- 2. COULEUR — Marque Le vert « Signal » ne sert qu'aux confirmations / achats / gains. Le citron « Boost » est réservé à UNE seule fonction : l'action de conversion la plus prioritaire de l'écran (jamais décoratif). --------------------------------------------------------------------- */ --sn-color-signal-100: #DEF2E2; --sn-color-signal-500: #1C8A45; --sn-color-signal-600: #146B35; --sn-color-signal-700: #0F5227; --sn-color-boost-400: #DFF25E; --sn-color-boost-500: #CFE83E; --sn-color-boost-600: #AECB2A; /* --------------------------------------------------------------------- 3. COULEUR — Sémantique marché positive/negative pilotent tout gain/perte, haussier/baissier, achat/vente dans le système entier — jamais d'autre usage. --------------------------------------------------------------------- */ --sn-color-positive-100: #DEF2E2; --sn-color-positive-600: #146B35; --sn-color-negative-100: #FCE4EC; --sn-color-negative-600: #D41056; --sn-color-tier-100: #F8EFDC; --sn-color-tier-600: #92651C; /* --------------------------------------------------------------------- 4. COULEUR — Surfaces & texte (thème clair) --------------------------------------------------------------------- */ --sn-color-bg-canvas: var(--sn-color-white); --sn-color-bg-surface: var(--sn-color-neutral-100); --sn-color-bg-surface-raised: var(--sn-color-white); --sn-color-bg-inverse: var(--sn-color-black); --sn-color-bg-scrim: rgba(10, 10, 11, 0.48); --sn-color-border-subtle: var(--sn-color-neutral-150); --sn-color-border-strong: var(--sn-color-neutral-300); --sn-color-border-inverse: rgba(255, 255, 255, 0.14); --sn-color-text-primary: var(--sn-color-black); --sn-color-text-secondary: var(--sn-color-neutral-500); --sn-color-text-tertiary: var(--sn-color-neutral-400); --sn-color-text-disabled: var(--sn-color-neutral-300); --sn-color-text-inverse: var(--sn-color-white); --sn-color-text-inverse-secondary: var(--sn-color-neutral-400); --sn-color-text-on-signal: var(--sn-color-white); --sn-color-text-on-boost: var(--sn-color-neutral-900); --sn-color-focus-ring: #1C6EF2; /* --------------------------------------------------------------------- 5. TYPOGRAPHIE Base : grotesque géométrique — le registre « produit LLM ». Mono : toute donnée mesurée (prix, %, quantités, minuteurs, adresses). Les deux sont chargées en variable fonts quand disponible. --------------------------------------------------------------------- */ --sn-font-base: "Inter", "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; --sn-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --sn-text-2xs: 11px; --sn-text-xs: 12px; --sn-text-sm: 13px; --sn-text-base: 15px; --sn-text-md: 16px; --sn-text-lg: 19px; --sn-text-xl: 23px; --sn-text-2xl: 28px; --sn-text-3xl: 36px; --sn-weight-regular: 400; --sn-weight-medium: 500; --sn-weight-semibold: 600; --sn-weight-bold: 700; --sn-weight-extrabold: 800; --sn-leading-tight: 1.1; --sn-leading-snug: 1.28; --sn-leading-normal: 1.5; --sn-tracking-tight: -0.02em; --sn-tracking-normal: 0; --sn-tracking-wide: 0.04em; /* --------------------------------------------------------------------- 6. ESPACE — échelle base 4 --------------------------------------------------------------------- */ --sn-space-0: 0; --sn-space-1: 4px; --sn-space-2: 8px; --sn-space-3: 12px; --sn-space-4: 16px; --sn-space-5: 20px; --sn-space-6: 24px; --sn-space-7: 32px; --sn-space-8: 40px; --sn-space-9: 48px; --sn-space-10: 64px; /* --------------------------------------------------------------------- 7. RAYON — plafond de marque strict : 6px, jamais plus. Pas de "pill" / full-radius dans ce système : c'est un choix de marque assumé (voir README), pas un oubli. --------------------------------------------------------------------- */ --sn-radius-xs: 3px; --sn-radius-sm: 4px; --sn-radius-md: 6px; /* rayon maximum autorisé dans tout le système */ --sn-radius-circle: 50%; /* --------------------------------------------------------------------- 8. ÉLÉVATION --------------------------------------------------------------------- */ --sn-shadow-xs: 0 1px 2px rgba(10,10,11,0.05); --sn-shadow-sm: 0 2px 6px rgba(10,10,11,0.07); --sn-shadow-md: 0 8px 24px rgba(10,10,11,0.12); --sn-shadow-sheet: 0 -12px 32px rgba(10,10,11,0.18); --sn-shadow-focus: 0 0 0 3px rgba(28,110,242,0.35); /* --------------------------------------------------------------------- 9. MOUVEMENT --------------------------------------------------------------------- */ --sn-duration-fast: 120ms; --sn-duration-base: 200ms; --sn-duration-slow: 320ms; --sn-ease-standard: cubic-bezier(.4, 0, .2, 1); --sn-ease-decel: cubic-bezier(0, 0, .2, 1); --sn-ease-accel: cubic-bezier(.4, 0, 1, 1); /* --------------------------------------------------------------------- 10. MISE EN PAGE --------------------------------------------------------------------- */ --sn-viewport-max: 430px; --sn-navbar-height: 56px; --sn-tabbar-height: 64px; --sn-tap-target-min: 44px; --sn-z-navbar: 100; --sn-z-tabbar: 100; --sn-z-scrim: 290; --sn-z-sheet: 300; --sn-z-toast: 400; } /* --------------------------------------------------------------------- Thème sombre — utilisé par les organismes "hero" de détail de bot (voir sn-hero-dark). Activation : [data-sn-theme="dark"] sur un ancêtre (ex. ou un conteneur d'écran). --------------------------------------------------------------------- */ [data-sn-theme="dark"] { color-scheme: dark; --sn-color-bg-canvas: var(--sn-color-black); --sn-color-bg-surface: var(--sn-color-neutral-800); --sn-color-bg-surface-raised: var(--sn-color-neutral-900); --sn-color-border-subtle: var(--sn-color-neutral-700); --sn-color-border-strong: var(--sn-color-neutral-600); --sn-color-text-primary: var(--sn-color-white); --sn-color-text-secondary: var(--sn-color-neutral-400); --sn-color-text-tertiary: var(--sn-color-neutral-500); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }