/* ========================================================= Sun Panel — Design Tokens System 2.0 ========================================================= */ :root { /* ============ COLOR PALETTE ============ */ /* Base Neutrals (Dark Theme) */ --color-base-0: #07060f; /* Darkest background */ --color-base-1: #0c0a1a; /* Dark background */ --color-base-2: #100c22; /* Medium background */ --color-base-3: #15111f; /* Light background */ --color-base-4: #1a1629; /* Surface base */ --color-base-5: #201a2f; /* Surface elevated */ --color-base-6: #2a2240; /* Surface hover */ --color-base-7: #3a3250; /* Border default */ /* Neutral Text Colors */ --color-text-0: #f4f2ff; /* Primary text */ --color-text-1: #e0dce8; /* Secondary text */ --color-text-2: #c9c3e0; /* Tertiary text */ --color-text-3: #a89fc4; /* Muted text */ --color-text-4: #8b85a8; /* Disabled text */ /* Brand Colors - Primary */ --color-purple: #8b5cf6; /* Main brand */ --color-purple-l: #a875f7; /* Light variant */ --color-purple-d: #6d28d9; /* Dark variant */ /* Brand Colors - Secondary */ --color-blue: #3b82f6; /* Secondary brand */ --color-blue-l: #60a5fa; /* Light variant */ --color-blue-d: #1d4ed8; /* Dark variant */ /* Accent Colors */ --color-cyan: #22d3ee; /* Accent bright */ --color-pink: #ec4899; /* Accent warm */ --color-indigo: #6366f1; /* Accent cool */ /* Semantic Colors */ --color-success: #22c55e; /* Success state */ --color-warning: #f59e0b; /* Warning state */ --color-danger: #ef4444; /* Error state */ --color-info: #06b6d4; /* Info state */ /* Glass & Overlay Colors */ --color-glass: rgba(255, 255, 255, 0.045); --color-glass-strong: rgba(255, 255, 255, 0.07); --color-glass-stronger: rgba(255, 255, 255, 0.1); --color-border: rgba(255, 255, 255, 0.09); --color-border-soft: rgba(139, 92, 246, 0.25); --color-border-accent: rgba(139, 92, 246, 0.4); /* ============ TYPOGRAPHY ============ */ --font-family-primary: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font Sizes (Persian-optimized baseline) */ --font-size-xs: 11px; /* 11px - small labels */ --font-size-sm: 13px; /* 13px - small text */ --font-size-base: 14px; /* 14px - body text */ --font-size-md: 15px; /* 15px - emphasized */ --font-size-lg: 16px; /* 16px - subheadings */ --font-size-xl: 18px; /* 18px - headings */ --font-size-2xl: 22px; /* 22px - large headings */ --font-size-3xl: 26px; /* 26px - major headings */ --font-size-4xl: 32px; /* 32px - hero text */ /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Line Heights (Persian text needs extra breathing room) */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --line-height-loose: 2; /* Letter Spacing (Persian-specific) */ --letter-spacing-tight: -0.25px; --letter-spacing-normal: 0; --letter-spacing-wide: 0.5px; --letter-spacing-wider: 1px; /* ============ SPACING ============ */ /* 4px baseline scale */ --spacing-0: 0; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --spacing-10: 40px; --spacing-12: 48px; --spacing-16: 64px; --spacing-20: 80px; --spacing-24: 96px; /* ============ BORDER RADIUS ============ */ --radius-xs: 4px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --radius-2xl: 32px; --radius-full: 999px; /* ============ SHADOWS ============ */ /* Glassmorphism Base Shadows */ --shadow-glow: 0 0 0 1px var(--color-border), 0 20px 60px -20px rgba(139, 92, 246, 0.35); --shadow-glow-accent: 0 0 0 1px var(--color-border-accent), 0 20px 60px -20px rgba(139, 92, 246, 0.5); /* Elevation Shadows */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.4); /* Soft Shadows (minimal depth) */ --shadow-soft-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-soft-md: 0 4px 16px rgba(0, 0, 0, 0.12); /* Glow Effects (for interactive elements) */ --shadow-glow-sm: 0 0 12px rgba(139, 92, 246, 0.15); --shadow-glow-md: 0 0 24px rgba(139, 92, 246, 0.25); --shadow-glow-lg: 0 0 40px rgba(139, 92, 246, 0.35); --shadow-glow-xl: 0 0 60px rgba(139, 92, 246, 0.45); /* ============ DEPTH (Z-Index System) ============ */ --z-hide: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 900; --z-modal: 910; --z-tooltip: 1000; --z-notification: 1010; --z-debug: 9999; /* ============ TRANSITIONS ============ */ --transition-fast: 150ms ease-in-out; --transition-normal: 250ms ease-in-out; --transition-slow: 400ms ease-in-out; --transition-slowest: 600ms ease-in-out; /* Cubic beziers for motion */ --ease-in-out: 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-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============ BREAKPOINTS ============ */ /* Stored as custom properties for responsive utilities */ --breakpoint-xs: 320px; --breakpoint-sm: 640px; --breakpoint-md: 1024px; --breakpoint-lg: 1280px; --breakpoint-xl: 1536px; /* ============ SIZES ============ */ /* Component Heights */ --height-input: 40px; --height-button: 40px; --height-button-sm: 32px; --height-button-lg: 48px; /* Component Widths */ --width-sidebar: 260px; --width-sidebar-sm: 80px; --width-topbar: 100%; /* ============ ANIMATION KEYFRAMES ============ */ /* (These are typically defined in motion.css, but documented here) */ } /* ============ LIGHT THEME OVERRIDES ============ */ @media (prefers-color-scheme: light) { :root { /* Base Neutrals (Light Theme) */ --color-base-0: #ffffff; --color-base-1: #f9f8ff; --color-base-2: #f0ecf8; --color-base-3: #e8e4f0; --color-base-4: #e0dce8; --color-base-5: #d8d4e0; --color-base-6: #d0ccd8; --color-base-7: #c8c4d0; /* Neutral Text Colors */ --color-text-0: #1a1629; --color-text-1: #3a3250; --color-text-2: #6a6280; --color-text-3: #8b85a8; --color-text-4: #a89fc4; /* Glass & Overlay Colors */ --color-glass: rgba(139, 92, 246, 0.05); --color-glass-strong: rgba(139, 92, 246, 0.08); --color-glass-stronger: rgba(139, 92, 246, 0.12); --color-border: rgba(139, 92, 246, 0.15); --color-border-soft: rgba(139, 92, 246, 0.2); --color-border-accent: rgba(139, 92, 246, 0.3); /* Adjust shadows for light theme */ --shadow-glow: 0 0 0 1px var(--color-border), 0 20px 60px -20px rgba(139, 92, 246, 0.15); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); } } /* ============ CUSTOM ACCENT COLOR ============ */ /* Allow accent color customization per user */ :root[data-accent="purple"] { --color-accent: #8b5cf6; --color-accent-l: #a875f7; --color-accent-d: #6d28d9; } :root[data-accent="blue"] { --color-accent: #3b82f6; --color-accent-l: #60a5fa; --color-accent-d: #1d4ed8; } :root[data-accent="cyan"] { --color-accent: #22d3ee; --color-accent-l: #67e8f9; --color-accent-d: #0891b2; } :root[data-accent="indigo"] { --color-accent: #6366f1; --color-accent-l: #818cf8; --color-accent-d: #4f46e5; } :root[data-accent="pink"] { --color-accent: #ec4899; --color-accent-l: #f472b6; --color-accent-d: #be185d; } /* ============ REDUCED MOTION SUPPORT ============ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --transition-slowest: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============ SEMANTIC SHORTCUTS ============ */ :root { /* For convenience in components */ --color-primary: var(--color-purple); --color-secondary: var(--color-blue); --color-accent: var(--color-purple); /* Default, can be overridden */ /* Composite tokens */ --surface-base: var(--color-base-4); --surface-elevated: var(--color-base-5); --surface-hover: var(--color-base-6); } /* ============ UTILITY TOKENS FOR COMPONENTS ============ */ :root { /* Input/Button Focus */ --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.2); --focus-ring-accent: 0 0 0 3px rgba(139, 92, 246, 0.35); /* Disabled State */ --opacity-disabled: 0.5; /* Backdrop Blur Values */ --blur-sm: 8px; --blur-md: 12px; --blur-lg: 18px; --blur-xl: 24px; } /* ============ CSS CUSTOM PROPERTY REFERENCE ============ USAGE IN COMPONENTS: Color: - Backgrounds: var(--color-base-X) - Text: var(--color-text-X) - Accents: var(--color-primary), var(--color-secondary) - Semantic: var(--color-success), var(--color-warning), var(--color-danger) Typography: - Heading: font-family: var(--font-family-primary); font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); - Body: font-family: var(--font-family-primary); font-size: var(--font-size-base); line-height: var(--line-height-normal); - Code: font-family: var(--font-family-mono); font-size: var(--font-size-sm); Spacing: - Padding: padding: var(--spacing-4); /* Corresponds to 16px */ - Margin: margin: var(--spacing-6); - Gap: gap: var(--spacing-3); Radius: - Card/Large: border-radius: var(--radius-lg); - Input: border-radius: var(--radius-md); - Small: border-radius: var(--radius-sm); - Button: border-radius: var(--radius-sm); - Avatar: border-radius: var(--radius-full); Shadows: - Glow: box-shadow: var(--shadow-glow); - Elevated: box-shadow: var(--shadow-lg); - Soft: box-shadow: var(--shadow-soft-md); Transitions: - Property: transition: all var(--transition-normal); - Color: transition: color var(--transition-fast); - Transform: transition: transform var(--transition-fast); Focus: - Ring: outline: none; box-shadow: var(--focus-ring); - Accent Ring: outline: none; box-shadow: var(--focus-ring-accent); Z-Index: - Modal: z-index: var(--z-modal); - Dropdown: z-index: var(--z-dropdown); - Tooltip: z-index: var(--z-tooltip); ========================================================== */