/* ========================================================================== AiNoted Design Tokens — variables.css Complete CSS custom property system for the AiNoted dark-theme UI. ========================================================================== */ :root { /* -------------------------------------------------------------------------- COLOR PALETTE — Background Layers Deep navy base with progressively lighter surface layers. -------------------------------------------------------------------------- */ --bg-deepest: #060a13; --bg-base: #0b1120; --bg-surface: #111827; --bg-elevated: #1a2236; --bg-overlay: #232d42; /* -------------------------------------------------------------------------- COLOR PALETTE — Primary (Electric Cyan) -------------------------------------------------------------------------- */ --primary-50: #e6f7ff; --primary-100: #b3e7ff; --primary-200: #80d7ff; --primary-300: #4dc7ff; --primary-400: #26bfff; --primary-500: #00b8ff; /* main accent */ --primary-600: #0098d4; --primary-700: #0078a8; --primary-800: #00587d; --primary-900: #003852; /* -------------------------------------------------------------------------- COLOR PALETTE — Secondary (Electric Indigo) -------------------------------------------------------------------------- */ --secondary-50: #eef0ff; --secondary-100: #d4d7fe; --secondary-200: #b0b4fd; --secondary-300: #8b8ffc; --secondary-400: #7578f9; --secondary-500: #6366f1; /* main accent */ --secondary-600: #5254cc; --secondary-700: #4143a6; --secondary-800: #313381; --secondary-900: #21235c; /* -------------------------------------------------------------------------- COLOR PALETTE — Tertiary (Vivid Violet) -------------------------------------------------------------------------- */ --tertiary-50: #f5edfe; --tertiary-100: #e4ccfd; --tertiary-200: #d0a5fc; --tertiary-300: #bc7ffb; --tertiary-400: #b268f9; --tertiary-500: #a855f7; /* main accent */ --tertiary-600: #8b46cd; --tertiary-700: #6e37a3; --tertiary-800: #52297a; --tertiary-900: #371b52; /* -------------------------------------------------------------------------- COLOR PALETTE — Text -------------------------------------------------------------------------- */ --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-tertiary: #64748b; --text-muted: #475569; --text-inverse: #0b1120; /* -------------------------------------------------------------------------- COLOR PALETTE — Semantic Colors -------------------------------------------------------------------------- */ --success-400: #4ade80; --success-500: #22c55e; --success-600: #16a34a; --warning-400: #facc15; --warning-500: #eab308; --warning-600: #ca8a04; --error-400: #f87171; --error-500: #ef4444; --error-600: #dc2626; --info-400: #60a5fa; --info-500: #3b82f6; --info-600: #2563eb; /* -------------------------------------------------------------------------- COLOR PALETTE — Borders -------------------------------------------------------------------------- */ --border-subtle: rgba(148, 163, 184, 0.08); --border-default: rgba(148, 163, 184, 0.15); --border-strong: rgba(148, 163, 184, 0.25); --border-focus: var(--primary-500); /* -------------------------------------------------------------------------- GRADIENTS -------------------------------------------------------------------------- */ --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--secondary-500)); --gradient-accent: linear-gradient(135deg, var(--secondary-500), var(--tertiary-500)); --gradient-surface: linear-gradient(180deg, var(--bg-surface), var(--bg-base)); --gradient-glow: linear-gradient(135deg, var(--primary-500), var(--tertiary-500)); --gradient-hero: linear-gradient(180deg, var(--bg-deepest) 0%, var(--bg-base) 100%); --gradient-text: linear-gradient(135deg, var(--primary-400), var(--secondary-400), var(--tertiary-400)); /* -------------------------------------------------------------------------- SHADOWS -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.35), 0 6px 10px rgba(0, 0, 0, 0.2); --shadow-glow: 0 0 20px rgba(0, 184, 255, 0.25), 0 0 40px rgba(0, 184, 255, 0.10); /* -------------------------------------------------------------------------- TYPOGRAPHY — Font Families -------------------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; /* -------------------------------------------------------------------------- TYPOGRAPHY — Modular Type Scale -------------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* -------------------------------------------------------------------------- TYPOGRAPHY — Font Weights -------------------------------------------------------------------------- */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* -------------------------------------------------------------------------- TYPOGRAPHY — Line Heights -------------------------------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* -------------------------------------------------------------------------- TYPOGRAPHY — Letter Spacing -------------------------------------------------------------------------- */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* -------------------------------------------------------------------------- SPACING SCALE (1–24 in rem) -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-13: 3.25rem; /* 52px */ --space-14: 3.5rem; /* 56px */ --space-15: 3.75rem; /* 60px */ --space-16: 4rem; /* 64px */ --space-17: 4.25rem; /* 68px */ --space-18: 4.5rem; /* 72px */ --space-19: 4.75rem; /* 76px */ --space-20: 5rem; /* 80px */ --space-21: 5.25rem; /* 84px */ --space-22: 5.5rem; /* 88px */ --space-23: 5.75rem; /* 92px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------------------------------- BORDER RADIUS -------------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* -------------------------------------------------------------------------- TRANSITIONS -------------------------------------------------------------------------- */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1); /* -------------------------------------------------------------------------- LAYOUT -------------------------------------------------------------------------- */ --sidebar-width: 260px; --sidebar-collapsed: 72px; --topbar-height: 64px; --max-content: 1200px; --max-marketing: 1400px; /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; --z-max: 9999; }