/* 
   SINAPSIX BRAND TOKENS 
   Systemic visual definitions for the Synapse Identity
*/

:root {
    /* PRIMARY PALETTE */
    --sx-teal: #00b8a9;
    --sx-teal-dark: #007d74;
    --sx-teal-glow: rgba(0, 184, 169, 0.4);
    --sx-teal-ultra: #00e5d4;
    
    /* NEUTRAL PALETTE */
    --sx-bg: #0a1418;
    --sx-bg-soft: #0f1c21;
    --sx-bg-alt: #12242b;
    --sx-text: #f0f4f5;
    --sx-text-muted: #a0b8c0;
    --sx-border: rgba(255, 255, 255, 0.1);
    
    /* GRADIENTS */
    --sx-grad-main: linear-gradient(135deg, var(--sx-teal), #00e5d4);
    --sx-grad-dark: linear-gradient(155deg, var(--sx-bg) 0%, var(--sx-bg-soft) 100%);
    
    /* TYPOGRAPHY */
    --sx-font-head: 'Outfit', sans-serif;
    --sx-font-body: 'Inter', sans-serif;
    
    /* EFFECTS */
    --sx-shadow-glow: 0 0 20px var(--sx-teal-glow);
    --sx-glass: blur(14px);
}

/* REUSABLE BRAND CLASSES */
.sx-glow { filter: drop-shadow(0 0 8px var(--sx-teal-glow)); }
.sx-text-gradient {
    background: var(--sx-grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sx-hexagon-mask {
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}