/* ============================================================ HiddenFlirt UI ยท hf-tokens.css Design tokens. Tutto il kit legge SOLO da queste variabili: per personalizzare/estendere si ridefiniscono qui o in un override caricato dopo (o inline su [data-hf-theme]). ============================================================ */ :root { /* Brand */ --hf-primary: #BC2627; --hf-primary-hover: #E53935; --hf-primary-soft: #FF5252; --hf-primary-tint: #FDECEC; --hf-primary-tint-border: #F7D4D4; --hf-glow: rgba(188, 38, 39, .15); /* Neutri */ --hf-bg: #FFFFFF; --hf-surface: #F8F8F8; --hf-canvas: #F1F1F1; --hf-border: #E5E5E5; --hf-border-soft: #EDEDED; --hf-ink: #1A1A1A; --hf-muted: #666666; --hf-faint: #8C8C8C; --hf-disabled: #B0B0B0; /* Semantici */ --hf-online: #22C55E; --hf-online-tint: #EAFBF1; --hf-online-border: #BFEBD2; --hf-online-ink: #15803D; --hf-danger: #B91C1C; --hf-warning: #B8860B; --hf-warning-tint: #FFF6E8; /* Dark chip (foto, veil, momenti soglia) */ --hf-dark: #1A1A1A; --hf-dark-2: #0F0F0F; --hf-on-dark: #FFFFFF; --hf-on-dark-muted: rgba(255,255,255,.6); /* Tipografia */ --hf-font: 'Manrope', system-ui, -apple-system, sans-serif; --hf-font-display: 'Instrument Serif', Georgia, serif; --hf-font-mono: 'JetBrains Mono', ui-monospace, monospace; --hf-text-xs: 10.5px; --hf-text-sm: 12px; --hf-text-md: 13.5px; --hf-text-lg: 15px; --hf-text-xl: 22px; --hf-text-display: 30px; /* Spazio (base 4) */ --hf-s1: 4px; --hf-s2: 8px; --hf-s3: 12px; --hf-s4: 16px; --hf-s5: 20px; --hf-s6: 24px; --hf-s8: 32px; --hf-s12: 48px; /* Raggi */ --hf-r-sm: 8px; --hf-r-md: 14px; --hf-r-lg: 20px; --hf-r-xl: 28px; --hf-r-full: 999px; /* Ombre */ --hf-shadow-card: 0 1px 3px rgba(0,0,0,.08); --hf-shadow-sheet: 0 8px 24px -6px rgba(0,0,0,.16); --hf-shadow-pop: 0 16px 40px -12px rgba(0,0,0,.22); --hf-shadow-glow: 0 8px 20px -6px rgba(188,38,39,.45); /* Motion */ --hf-ease: cubic-bezier(.22,1,.36,1); --hf-t-tap: 120ms; --hf-t-ui: 220ms; --hf-t-reveal: 420ms; --hf-t-ritual: 900ms; /* Layer */ --hf-z-nav: 40; --hf-z-sheet: 60; --hf-z-modal: 80; --hf-z-toast: 100; /* Componenti */ --hf-control-h: 46px; /* altezza bottoni/input */ --hf-touch-min: 44px; /* target minimo */ --hf-nav-h: 64px; --hf-veil-blur: 26px; } /* Tema scuro opzionale: */ [data-hf-theme="dark"] { --hf-bg: #141114; --hf-surface: #1D1920; --hf-canvas: #0F0D10; --hf-border: #2A2530; --hf-border-soft: #241F28; --hf-ink: #F5F2F4; --hf-muted: #A29AA0; --hf-faint: #8B8289; --hf-disabled: #5C5762; --hf-primary-tint: rgba(188,38,39,.16); --hf-primary-tint-border: rgba(188,38,39,.35); --hf-online-tint: rgba(34,197,94,.14); --hf-online-border: rgba(34,197,94,.35); --hf-online-ink: #7BE3A8; --hf-warning-tint: rgba(184,134,11,.14); --hf-shadow-card: 0 1px 3px rgba(0,0,0,.4); --hf-shadow-sheet: 0 8px 24px -6px rgba(0,0,0,.55); --hf-shadow-pop: 0 16px 40px -12px rgba(0,0,0,.65); } @media (prefers-reduced-motion: reduce) { :root { --hf-t-tap: 0ms; --hf-t-ui: 0ms; --hf-t-reveal: 0ms; --hf-t-ritual: 0ms; } .hf-anim, .hf-pulse::after, .hf-shimmer { animation: none !important; } }