/* ============================================================================= FALI LABS — DESIGN TOKENS Primitive → Semantic → Component Architecture: raw palette values never used directly in components. Always prefer semantic tokens; use primitives only here. ============================================================================= */ :root { /* =========================================================================== PRIMITIVE TOKENS — Raw palette values =========================================================================== */ /* -- Space Black (Brand Dark Foundation) ------------------------------------- */ --fali-palette-space-950: hsl(234, 30%, 3%); /* deepest bg */ --fali-palette-space-900: hsl(234, 26%, 5%); --fali-palette-space-800: hsl(234, 22%, 8%); /* card bg */ --fali-palette-space-700: hsl(234, 20%, 12%); /* card hover */ --fali-palette-space-600: hsl(234, 18%, 18%); --fali-palette-space-500: hsl(234, 15%, 27%); --fali-palette-space-400: hsl(234, 12%, 40%); --fali-palette-space-300: hsl(234, 10%, 56%); --fali-palette-space-200: hsl(234, 8%, 73%); --fali-palette-space-100: hsl(234, 6%, 87%); --fali-palette-space-50: hsl(234, 5%, 96%); /* -- Electric Blue (Brand Primary Accent) ------------------------------------ */ --fali-palette-blue-950: hsl(212, 100%, 10%); --fali-palette-blue-900: hsl(212, 100%, 16%); --fali-palette-blue-700: hsl(212, 100%, 30%); --fali-palette-blue-500: hsl(212, 100%, 54%); /* brand base */ --fali-palette-blue-400: hsl(212, 100%, 64%); --fali-palette-blue-300: hsl(212, 100%, 74%); --fali-palette-blue-100: hsl(212, 80%, 92%); /* -- Cosmic Violet (Brand Secondary Accent) ---------------------------------- */ --fali-palette-violet-900: hsl(260, 78%, 16%); --fali-palette-violet-700: hsl(260, 72%, 34%); --fali-palette-violet-500: hsl(260, 68%, 58%); /* brand base */ --fali-palette-violet-400: hsl(260, 70%, 68%); --fali-palette-violet-300: hsl(260, 66%, 78%); --fali-palette-violet-100: hsl(260, 50%, 93%); /* -- Cyan (Glow / Highlight Accent) ----------------------------------------- */ --fali-palette-cyan-500: hsl(187, 88%, 53%); --fali-palette-cyan-400: hsl(187, 86%, 63%); --fali-palette-cyan-300: hsl(187, 80%, 74%); --fali-palette-cyan-100: hsl(187, 60%, 93%); /* -- Neutral (Text, borders, utility) --------------------------------------- */ --fali-palette-neutral-950: hsl(0, 0%, 4%); --fali-palette-neutral-900: hsl(0, 0%, 10%); --fali-palette-neutral-800: hsl(0, 0%, 18%); --fali-palette-neutral-700: hsl(0, 0%, 28%); --fali-palette-neutral-600: hsl(0, 0%, 42%); --fali-palette-neutral-500: hsl(0, 0%, 58%); --fali-palette-neutral-400: hsl(0, 0%, 72%); --fali-palette-neutral-300: hsl(0, 0%, 84%); --fali-palette-neutral-200: hsl(0, 0%, 92%); --fali-palette-neutral-100: hsl(0, 0%, 97%); --fali-palette-neutral-0: hsl(0, 0%, 100%); /* -- Green (Success) -------------------------------------------------------- */ --fali-palette-green-700: hsl(152, 58%, 38%); --fali-palette-green-500: hsl(152, 52%, 52%); --fali-palette-green-50: hsl(152, 40%, 95%); /* -- Red (Error / Danger) --------------------------------------------------- */ --fali-palette-red-700: hsl(0, 72%, 44%); --fali-palette-red-500: hsl(0, 68%, 60%); --fali-palette-red-50: hsl(0, 55%, 97%); /* =========================================================================== SEMANTIC SURFACE TOKENS — Page backgrounds and surfaces =========================================================================== */ --fali-color-bg-page: var(--fali-palette-space-950); --fali-color-bg-section: var(--fali-palette-space-950); --fali-color-bg-section-alt: var(--fali-palette-space-900); --fali-color-bg-section-raised: var(--fali-palette-space-800); --fali-color-bg-card: var(--fali-palette-space-800); --fali-color-bg-card-hover: var(--fali-palette-space-700); --fali-color-bg-card-glass: hsla(234, 22%, 8%, 0.78); --fali-color-bg-overlay: hsla(234, 30%, 3%, 0.92); /* =========================================================================== SEMANTIC TEXT TOKENS =========================================================================== */ /* -- On dark backgrounds ---------------------------------------------------- */ --fali-color-text-heading: var(--fali-palette-neutral-0); --fali-color-text-body: var(--fali-palette-space-200); --fali-color-text-muted: var(--fali-palette-space-300); --fali-color-text-subtle: var(--fali-palette-space-400); --fali-color-text-accent: var(--fali-palette-blue-400); --fali-color-text-accent-alt: var(--fali-palette-violet-400); --fali-color-text-accent-glow:var(--fali-palette-cyan-400); --fali-color-text-link: var(--fali-palette-blue-400); --fali-color-text-link-hover: var(--fali-palette-cyan-400); /* =========================================================================== SEMANTIC BORDER TOKENS =========================================================================== */ --fali-color-border: hsla(234, 40%, 100%, 0.07); --fali-color-border-muted: hsla(234, 40%, 100%, 0.04); --fali-color-border-strong: hsla(234, 40%, 100%, 0.14); --fali-color-border-accent: var(--fali-palette-blue-500); --fali-color-border-accent-alt: var(--fali-palette-violet-500); --fali-color-border-glow: var(--fali-palette-cyan-500); /* =========================================================================== GRADIENT TOKENS =========================================================================== */ --fali-gradient-brand: linear-gradient(135deg, var(--fali-palette-blue-500) 0%, var(--fali-palette-violet-500) 100%); --fali-gradient-brand-alt: linear-gradient(135deg, var(--fali-palette-cyan-500) 0%, var(--fali-palette-blue-500) 100%); --fali-gradient-brand-hover: linear-gradient(135deg, var(--fali-palette-blue-400) 0%, var(--fali-palette-violet-400) 100%); --fali-gradient-text: linear-gradient(130deg, var(--fali-palette-blue-400) 0%, var(--fali-palette-violet-400) 60%, var(--fali-palette-cyan-400) 100%); --fali-gradient-text-alt: linear-gradient(130deg, var(--fali-palette-cyan-400) 0%, var(--fali-palette-blue-400) 100%); --fali-gradient-hero-fade: linear-gradient(to bottom, transparent 60%, var(--fali-palette-space-950) 100%); --fali-gradient-card-border: linear-gradient(145deg, hsla(212, 100%, 54%, 0.35), hsla(260, 68%, 58%, 0.15), transparent 70%); /* =========================================================================== COMPONENT TOKENS — Navigation =========================================================================== */ --fali-color-nav-bg: hsla(234, 30%, 3%, 0.75); --fali-color-nav-bg-scrolled: hsla(234, 30%, 3%, 0.96); --fali-color-nav-link: var(--fali-palette-space-300); --fali-color-nav-link-hover: var(--fali-palette-neutral-0); --fali-color-nav-link-active: var(--fali-palette-blue-400); --fali-color-nav-border: var(--fali-color-border); /* =========================================================================== COMPONENT TOKENS — Buttons =========================================================================== */ /* Primary — gradient brand */ --fali-color-btn-primary-bg: var(--fali-gradient-brand); --fali-color-btn-primary-bg-hover: var(--fali-gradient-brand-hover); --fali-color-btn-primary-text: var(--fali-palette-neutral-0); --fali-color-btn-primary-shadow: 0 0 28px hsla(212, 100%, 54%, 0.32); --fali-color-btn-primary-shadow-hover:0 0 40px hsla(212, 100%, 54%, 0.45); /* Secondary — outline blue */ --fali-color-btn-secondary-bg: transparent; --fali-color-btn-secondary-bg-hover: hsla(212, 100%, 54%, 0.10); --fali-color-btn-secondary-text: var(--fali-palette-blue-400); --fali-color-btn-secondary-text-hover: var(--fali-palette-neutral-0); --fali-color-btn-secondary-border: hsla(212, 100%, 54%, 0.38); --fali-color-btn-secondary-border-hover: var(--fali-palette-blue-400); /* Ghost — minimal */ --fali-color-btn-ghost-text: var(--fali-palette-space-300); --fali-color-btn-ghost-text-hover: var(--fali-palette-neutral-0); /* =========================================================================== COMPONENT TOKENS — Forms / Inputs =========================================================================== */ --fali-color-field-bg: var(--fali-palette-space-800); --fali-color-field-bg-focus: var(--fali-palette-space-700); --fali-color-field-border: var(--fali-color-border-strong); --fali-color-field-border-hover: hsla(212, 100%, 54%, 0.30); --fali-color-field-border-focus: var(--fali-palette-blue-500); --fali-color-field-border-error: var(--fali-palette-red-500); --fali-color-field-text: var(--fali-palette-neutral-0); --fali-color-field-placeholder: var(--fali-palette-space-400); --fali-color-field-label: var(--fali-palette-space-200); /* =========================================================================== COMPONENT TOKENS — Badges =========================================================================== */ --fali-color-badge-blue-bg: hsla(212, 100%, 54%, 0.12); --fali-color-badge-blue-text: var(--fali-palette-blue-300); --fali-color-badge-blue-border: hsla(212, 100%, 54%, 0.24); --fali-color-badge-violet-bg: hsla(260, 68%, 58%, 0.12); --fali-color-badge-violet-text: var(--fali-palette-violet-300); --fali-color-badge-violet-border: hsla(260, 68%, 58%, 0.24); --fali-color-badge-cyan-bg: hsla(187, 88%, 53%, 0.10); --fali-color-badge-cyan-text: var(--fali-palette-cyan-400); --fali-color-badge-cyan-border: hsla(187, 88%, 53%, 0.22); /* =========================================================================== COMPONENT TOKENS — Success / Error states =========================================================================== */ --fali-color-success-bg: hsla(152, 58%, 38%, 0.12); --fali-color-success-text: var(--fali-palette-green-500); --fali-color-error-bg: hsla(0, 72%, 44%, 0.12); --fali-color-error-text: var(--fali-palette-red-500); /* =========================================================================== SPACING SCALE =========================================================================== */ --fali-space-1: 0.25rem; --fali-space-2: 0.5rem; --fali-space-3: 0.75rem; --fali-space-4: 1rem; --fali-space-5: 1.25rem; --fali-space-6: 1.5rem; --fali-space-8: 2rem; --fali-space-10: 2.5rem; --fali-space-12: 3rem; --fali-space-14: 3.5rem; --fali-space-16: 4rem; --fali-space-20: 5rem; --fali-space-24: 6rem; --fali-space-28: 7rem; --fali-space-32: 8rem; --fali-space-40: 10rem; /* =========================================================================== TYPOGRAPHY =========================================================================== */ --fali-font-display: 'Syne', system-ui, sans-serif; --fali-font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif; --fali-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --fali-text-xs: 0.75rem; --fali-text-sm: 0.875rem; --fali-text-base: 1rem; --fali-text-lg: 1.125rem; --fali-text-xl: 1.25rem; --fali-text-2xl: 1.5rem; --fali-text-3xl: 1.875rem; --fali-text-4xl: 2.25rem; --fali-text-5xl: 3rem; --fali-text-6xl: 3.75rem; --fali-text-7xl: 4.5rem; --fali-text-8xl: 6rem; --fali-leading-tight: 1.15; --fali-leading-snug: 1.3; --fali-leading-normal: 1.65; --fali-leading-loose: 1.85; --fali-tracking-tightest: -0.04em; --fali-tracking-tight: -0.025em; --fali-tracking-snug: -0.01em; --fali-tracking-normal: 0; --fali-tracking-wide: 0.06em; --fali-tracking-wider: 0.12em; /* =========================================================================== BORDER RADIUS =========================================================================== */ --fali-radius-xs: 0.25rem; --fali-radius-sm: 0.5rem; --fali-radius-md: 0.75rem; --fali-radius-lg: 1rem; --fali-radius-xl: 1.5rem; --fali-radius-2xl: 2rem; --fali-radius-full: 9999px; /* =========================================================================== SHADOWS =========================================================================== */ --fali-shadow-sm: 0 1px 4px hsla(234, 30%, 0%, 0.55), 0 1px 2px hsla(234, 30%, 0%, 0.40); --fali-shadow-md: 0 4px 14px hsla(234, 30%, 0%, 0.60), 0 2px 6px hsla(234, 30%, 0%, 0.45); --fali-shadow-lg: 0 8px 32px hsla(234, 30%, 0%, 0.65), 0 4px 12px hsla(234, 30%, 0%, 0.50); --fali-shadow-xl: 0 16px 50px hsla(234, 30%, 0%, 0.70), 0 8px 20px hsla(234, 30%, 0%, 0.55); --fali-shadow-glow-blue: 0 0 32px hsla(212, 100%, 54%, 0.22), 0 0 64px hsla(212, 100%, 54%, 0.10); --fali-shadow-glow-violet: 0 0 30px hsla(260, 68%, 58%, 0.20), 0 0 60px hsla(260, 68%, 58%, 0.08); --fali-shadow-glow-cyan: 0 0 26px hsla(187, 88%, 53%, 0.24), 0 0 52px hsla(187, 88%, 53%, 0.10); --fali-shadow-card-hover: 0 10px 36px hsla(212, 100%, 54%, 0.18), 0 4px 10px hsla(234, 30%, 0%, 0.55); /* =========================================================================== TRANSITIONS =========================================================================== */ --fali-transition-fast: 100ms ease; --fali-transition-base: 230ms ease; --fali-transition-slow: 400ms ease; --fali-transition-bounce: 320ms cubic-bezier(0.34, 1.56, 0.64, 1); /* =========================================================================== Z-INDEX SCALE =========================================================================== */ --fali-z-below: -1; --fali-z-base: 0; --fali-z-raised: 10; --fali-z-overlay: 20; --fali-z-modal: 30; --fali-z-nav: 50; }