/* ============================================================ 🎨 DESIGN SYSTEM VARIABLES - Complete Style Dictionary ============================================================ 📌 INTRODUCTION: ============================================================ This file contains ALL design tokens as CSS Custom Properties (CSS Variables). Everything is centralized here so you can customize the entire design system by changing only these variables - no need to touch any component CSS files! 🎯 HOW TO USE: ============================================================ 1. NEVER use hardcoded values (colors, spacing, fonts, etc.) directly in your components. ALWAYS use these variables. 2. To customize the theme, simply override these variables in your own CSS file or use JavaScript to change them dynamically. 3. Dark mode is built-in! Just add class="dark" to and all variables will switch automatically. 4. RTL support is built-in! Just add dir="rtl" to and all layout variables will flip automatically. 5. Component-specific variables are NOT defined here. They are in tokens.css which references these base tokens. This keeps the system clean, maintainable, and DRY. 📋 COMPLETE VARIABLES INDEX: ============================================================ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 1: BRAND COLOR PALETTE (Fixed - Never Change) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --persian-white --persian-off-white --persian-gray-50, --persian-gray-100, --persian-gray-200, --persian-gray-300, --persian-gray-400, --persian-gray-500, --persian-gray-600, --persian-gray-700, --persian-gray-800, --persian-gray-900 --persian-black --persian-blue, --persian-medium-blue, --persian-deep-blue --persian-indigo --persian-purple, --persian-purple-deep, --persian-purple-soft, --persian-purple-light --persian-green, --persian-green-light, --persian-green-deep, --persian-green-leaf, --persian-green-leaf-deep --persian-turquoise --persian-teal, --persian-teal-deep, --persian-teal-soft, --persian-teal-light --persian-red, --persian-red-light --persian-pink, --persian-rose, --persian-plum --persian-orange, --persian-orange-light --persian-gold, --persian-saffron, --persian-peper, --persian-ochre ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 2: SEMANTIC COLORS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --color-primary, --color-primary-hover, --color-primary-active, --color-primary-focus, --color-primary-disabled, --color-primary-soft --color-secondary, --color-secondary-hover, --color-secondary-active, --color-secondary-focus, --color-secondary-disabled, --color-secondary-soft --color-success, --color-success-hover, --color-success-active, --color-success-focus, --color-success-disabled, --color-success-soft --color-danger, --color-danger-hover, --color-danger-active, --color-danger-focus, --color-danger-disabled, --color-danger-soft --color-warn, --color-warn-hover, --color-warn-active, --color-warn-focus, --color-warn-disabled, --color-warn-soft --color-accent, --color-accent-hover, --color-accent-active, --color-accent-focus, --color-accent-disabled, --color-accent-soft --color-info, --color-info-hover, --color-info-active, --color-info-focus, --color-info-disabled, --color-info-soft ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 3: SURFACE & BACKGROUND COLORS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --color-bg-body --color-bg-body-secondary --color-bg-card, --color-bg-card-hover, --color-bg-card-active --color-bg-soft, --color-bg-soft-hover --color-bg-input, --color-bg-input-hover, --color-bg-input-focus --color-bg-muted, --color-bg-muted-hover --color-bg-overlay, --color-bg-overlay-light, --color-bg-overlay-dark ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 4: TEXT COLORS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --color-text-body --color-text-body-secondary --color-text-muted, --color-text-muted-light --color-text-inverse, --color-text-inverse-light --color-text-disabled --color-text-placeholder --color-text-link, --color-text-link-hover --color-text-selection ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 5: BORDER COLORS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --color-border --color-border-light --color-border-dark --color-border-focus --color-border-error --color-border-success --color-border-warning ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 6: SHADOWS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --color-shadow-xs, --color-shadow-sm, --color-shadow-base, --color-shadow-md, --color-shadow-lg, --color-shadow-xl, --color-shadow-2xl, --color-shadow-3xl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 7: RADIUS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --radius-none, --radius-sm, --radius-base, --radius-md, --radius-lg, --radius-xl, --radius-2xl, --radius-3xl, --radius-4xl, --radius-full, --radius-circle ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 8: SPACING SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --spacing-0 --spacing-px --spacing-q, --spacing-xs, --spacing-sm, --spacing-base, --spacing-md, --spacing-lg, --spacing-xl, --spacing-2xl through --spacing-24xl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 9: GRID SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --container-max-width, --container-padding-x, --container-padding-y --grid-gap, --grid-gap-sm, --grid-gap-lg, --grid-gap-xl --grid-cols-1 through --grid-cols-12 --grid-col-span-1 through --grid-col-span-12 --grid-auto-fit, --grid-auto-fill ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 10: LINE HEIGHTS & LETTER SPACING ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --line-height-none, --line-height-tight, --line-height-snug, --line-height-normal, --line-height-relaxed, --line-height-loose --letter-spacing-tight, --letter-spacing-normal, --letter-spacing-wide, --letter-spacing-wider, --letter-spacing-widest ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 11: FONT SYSTEM ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --font-family-sans, --font-family-serif, --font-family-mono, --font-family-display, --font-family-body, --font-family-heading --font-xs, --font-sm, --font-base, --font-lg, --font-xl, --font-2xl through --font-10xl ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 12: TRANSITIONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --transition-duration-fast, --transition-duration-base, --transition-duration-slow, --transition-duration-slower --transition-timing-ease, --transition-timing-ease-in, --transition-timing-ease-out, --transition-timing-ease-in-out, --transition-timing-bounce, --transition-timing-spring --transition-fast, --transition-base, --transition-slow, --transition-slower, --transition-slide, --transition-bounce ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 13: Z-INDEX LAYERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --z-0, --z-10, --z-20, --z-30, --z-40, --z-50, --z-auto --z-dropdown, --z-sticky, --z-fixed, --z-modal-backdrop, --z-modal, --z-popover, --z-tooltip, --z-toast ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 14: OPACITY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --opacity-0, --opacity-5, --opacity-10, --opacity-20, --opacity-25, --opacity-30, --opacity-40, --opacity-50, --opacity-60, --opacity-70, --opacity-75, --opacity-80, --opacity-90, --opacity-100 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 15: RTL & LTR SPECIFIC ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --direction-ltr, --direction-rtl --text-align-start, --text-align-end --margin-start, --margin-end --padding-start, --padding-end --border-start, --border-end --border-radius-start, --border-radius-end --float-start, --float-end --transform-origin-start, --transform-origin-end ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 16: ANIMATION TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --animation-pulse-duration, --animation-pulse-timing, --animation-pulse-scale --animation-glow-duration, --animation-glow-timing, --animation-glow-intensity-start, --animation-glow-intensity-end --animation-bounce-duration, --animation-bounce-timing, --animation-bounce-distance --animation-shake-duration, --animation-shake-timing, --animation-shake-angle --animation-blink-duration, --animation-blink-timing, --animation-blink-opacity --animation-live-duration, --animation-live-timing, --animation-live-scale --animation-spin-duration, --animation-spin-timing --animation-ping-duration, --animation-ping-timing, --animation-ping-scale ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION 17: RESPONSIVE BREAKPOINTS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --breakpoint-xs, --breakpoint-sm, --breakpoint-md, --breakpoint-lg, --breakpoint-xl, --breakpoint-2xl --container-padding, --container-padding-sm, --container-padding-lg --container-max-width-sm, --container-max-width-md, --container-max-width-lg, --container-max-width-xl, --container-max-width-2xl ============================================================ */ :root { /* ============================================================ SECTION 1: BRAND COLOR PALETTE (Fixed - Never Change) ============================================================ */ /* Neutrals */ --persian-white: #ffffff; --persian-off-white: #f8fafc; --persian-gray-50: #f1f5f9; --persian-gray-100: #e2e8f0; --persian-gray-200: #cbd5e1; --persian-gray-300: #94a3b8; --persian-gray-400: #64748b; --persian-gray-500: #475569; --persian-gray-600: #334155; --persian-gray-700: #1e293b; --persian-gray-800: #0f172a; --persian-gray-900: #0a0f1a; --persian-black: #000000; /* Blues */ --persian-blue: #15a9d6; --persian-medium-blue: #0aa8cf; --persian-deep-blue: #0a7a9e; --persian-indigo: #32127A; --persian-purple: #A403FA; --persian-purple-deep: #8A03D1; --persian-purple-soft: #b84dfa; --persian-purple-light: #d9a3fc; /* Greens */ --persian-green: #00A693; --persian-green-light: #88C30F; --persian-green-deep: #70A30C; --persian-green-leaf: #abff02; --persian-green-leaf-deep: #c8ff02; --persian-turquoise: #40E0D0; --persian-teal: #00BABA; --persian-teal-deep: #009999; --persian-teal-soft: #4dd4d4; --persian-teal-light: #99e6e6; /* Reds & Oranges */ --persian-red: #C81D11; --persian-red-light: #e84337; --persian-pink: #F77FBE; --persian-rose: #dd0a73; --persian-plum: #940303; --persian-orange: #D99058; --persian-orange-light: #e8ad7a; --persian-gold: #D4AF37; --persian-saffron: #F4A261; --persian-peper: #f39200; --persian-ochre: #C98B4D; /* ============================================================ SECTION 2: SEMANTIC COLORS (Light Mode - Green Theme) ============================================================ */ /* Primary - Green based */ --color-primary: var(--persian-teal); --color-primary-hover: var(--persian-teal-deep); --color-primary-active: var(--persian-teal-deep); --color-primary-focus: var(--persian-teal); --color-primary-disabled: color-mix(in srgb, var(--persian-teal) 50%, var(--persian-gray-300)); --color-primary-soft: color-mix(in srgb, var(--persian-teal) 15%, transparent); /* Secondary - Blue based */ --color-secondary: var(--persian-medium-blue); --color-secondary-hover: var(--persian-blue); --color-secondary-active: var(--persian-deep-blue); --color-secondary-focus: var(--persian-medium-blue); --color-secondary-disabled: color-mix(in srgb, var(--persian-medium-blue) 50%, var(--persian-gray-300)); --color-secondary-soft: color-mix(in srgb, var(--persian-medium-blue) 15%, transparent); /* Success - Green based */ --color-success: var(--persian-green-light); --color-success-hover: var(--persian-green-deep); --color-success-active: var(--persian-green-deep); --color-success-focus: var(--persian-green-light); --color-success-disabled: color-mix(in srgb, var(--persian-green-light) 50%, var(--persian-gray-300)); --color-success-soft: color-mix(in srgb, var(--persian-green-light) 15%, transparent); /* Danger - Red based */ --color-danger: var(--persian-red); --color-danger-hover: var(--persian-plum); --color-danger-active: var(--persian-plum); --color-danger-focus: var(--persian-red); --color-danger-disabled: color-mix(in srgb, var(--persian-red) 50%, var(--persian-gray-300)); --color-danger-soft: color-mix(in srgb, var(--persian-red) 15%, transparent); /* Warning - Orange based */ --color-warn: var(--persian-orange); --color-warn-hover: var(--persian-peper); --color-warn-active: var(--persian-peper); --color-warn-focus: var(--persian-orange); --color-warn-disabled: color-mix(in srgb, var(--persian-orange) 50%, var(--persian-gray-300)); --color-warn-soft: color-mix(in srgb, var(--persian-orange) 15%, transparent); /* Accent - Green based */ --color-accent: var(--persian-green); --color-accent-hover: var(--persian-green-deep); --color-accent-active: var(--persian-green-deep); --color-accent-focus: var(--persian-green); --color-accent-disabled: color-mix(in srgb, var(--persian-green) 50%, var(--persian-gray-300)); --color-accent-soft: color-mix(in srgb, var(--persian-green) 15%, transparent); /* Info - Blue based */ --color-info: var(--persian-blue); --color-info-hover: var(--persian-medium-blue); --color-info-active: var(--persian-deep-blue); --color-info-focus: var(--persian-blue); --color-info-disabled: color-mix(in srgb, var(--persian-blue) 50%, var(--persian-gray-300)); --color-info-soft: color-mix(in srgb, var(--persian-blue) 15%, transparent); /* ============================================================ SECTION 3: SURFACE & BACKGROUND COLORS (Light Mode) ============================================================ */ --color-bg-body: var(--persian-off-white); --color-bg-body-secondary: var(--persian-gray-50); --color-bg-card: var(--persian-white); --color-bg-card-hover: var(--persian-gray-50); --color-bg-card-active: var(--persian-gray-100); --color-bg-soft: var(--persian-gray-50); --color-bg-soft-hover: var(--persian-gray-100); --color-bg-input: var(--persian-gray-50); --color-bg-input-hover: var(--persian-gray-100); --color-bg-input-focus: var(--persian-white); --color-bg-muted: var(--persian-gray-300); --color-bg-muted-hover: var(--persian-gray-400); --color-bg-overlay: color-mix(in srgb, var(--persian-black) 50%, transparent); --color-bg-overlay-light: color-mix(in srgb, var(--persian-black) 20%, transparent); --color-bg-overlay-dark: color-mix(in srgb, var(--persian-black) 70%, transparent); /* ============================================================ SECTION 4: TEXT COLORS (Light Mode) ============================================================ */ --color-text-body: var(--persian-gray-700); --color-text-body-secondary: var(--persian-gray-600); --color-text-muted: var(--persian-gray-400); --color-text-muted-light: var(--persian-gray-300); --color-text-inverse: var(--persian-white); --color-text-inverse-light: var(--persian-gray-100); --color-text-disabled: var(--persian-gray-400); --color-text-placeholder: var(--persian-gray-400); --color-text-link: var(--color-primary); --color-text-link-hover: var(--color-primary-hover); --color-text-selection: var(--color-primary); /* ============================================================ SECTION 5: BORDER COLORS (Light Mode) ============================================================ */ --color-border: var(--persian-gray-200); --color-border-light: var(--persian-gray-100); --color-border-dark: var(--persian-gray-300); --color-border-focus: var(--color-primary); --color-border-error: var(--color-danger); --color-border-success: var(--color-success); --color-border-warning: var(--color-warn); /* ============================================================ SECTION 6: SHADOWS ============================================================ */ --color-shadow-xs: 0 1px 2px color-mix(in srgb, var(--persian-black) 4%, transparent); --color-shadow-sm: 0 2px 4px color-mix(in srgb, var(--persian-black) 6%, transparent); --color-shadow-base: 0 4px 12px color-mix(in srgb, var(--persian-black) 4%, transparent); --color-shadow-md: 0 6px 16px color-mix(in srgb, var(--persian-black) 8%, transparent); --color-shadow-lg: 0 8px 24px color-mix(in srgb, var(--persian-black) 12%, transparent); --color-shadow-xl: 0 12px 32px color-mix(in srgb, var(--persian-black) 16%, transparent); --color-shadow-2xl: 0 16px 48px color-mix(in srgb, var(--persian-black) 20%, transparent); --color-shadow-3xl: 0 20px 64px color-mix(in srgb, var(--persian-black) 25%, transparent); --color-shadow-card: var(--color-shadow-base); --color-shadow-card-hover: var(--color-shadow-md); --color-shadow-btn: var(--color-shadow-md); --color-shadow-btn-hover: var(--color-shadow-lg); --color-shadow-btn-active: var(--color-shadow-sm); --color-shadow-dropdown: var(--color-shadow-lg); --color-shadow-modal: var(--color-shadow-2xl); --color-shadow-popover: var(--color-shadow-lg); --color-shadow-tooltip: var(--color-shadow-sm); --color-shadow-glass: 0 4px 20px color-mix(in srgb, var(--persian-black) 8%, transparent); /* ============================================================ SECTION 7: RADIUS ============================================================ */ --radius-none: 0; --radius-sm: 4px; --radius-base: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 50px; --radius-circle: 50%; /* ============================================================ SECTION 8: SPACING SYSTEM ============================================================ */ /* Base spacing tokens */ --spacing-0: 0; --spacing-px: 1px; /* Semantic spacing tokens */ --spacing-q: 0.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-base: 1rem; --spacing-md: 1rem; --spacing-lg: 1.25rem; --spacing-xl: 1.5rem; --spacing-2xl: 2rem; --spacing-3xl: 3rem; --spacing-4xl: 4rem; --spacing-5xl: 5rem; --spacing-6xl: 6rem; --spacing-7xl: 7rem; --spacing-8xl: 8rem; --spacing-9xl: 9rem; --spacing-10xl: 10rem; --spacing-11xl: 11rem; --spacing-12xl: 12rem; --spacing-13xl: 13rem; --spacing-14xl: 14rem; --spacing-15xl: 15rem; --spacing-16xl: 16rem; --spacing-17xl: 17rem; --spacing-18xl: 18rem; --spacing-19xl: 19rem; --spacing-20xl: 20rem; --spacing-21xl: 21rem; --spacing-22xl: 22rem; --spacing-23xl: 23rem; --spacing-24xl: 24rem; /* ============================================================ SECTION 9: GRID SYSTEM (12-Column Responsive) ============================================================ */ /* Container */ --container-max-width: 1280px; --container-padding-x: var(--spacing-base); --container-padding-y: 0; /* Grid Gaps */ --grid-gap: var(--spacing-base); --grid-gap-sm: var(--spacing-sm); --grid-gap-lg: var(--spacing-xl); --grid-gap-xl: var(--spacing-2xl); /* Grid Columns (12-Column System) */ --grid-cols-1: repeat(1, 1fr); --grid-cols-2: repeat(2, 1fr); --grid-cols-3: repeat(3, 1fr); --grid-cols-4: repeat(4, 1fr); --grid-cols-5: repeat(5, 1fr); --grid-cols-6: repeat(6, 1fr); --grid-cols-7: repeat(7, 1fr); --grid-cols-8: repeat(8, 1fr); --grid-cols-9: repeat(9, 1fr); --grid-cols-10: repeat(10, 1fr); --grid-cols-11: repeat(11, 1fr); --grid-cols-12: repeat(12, 1fr); /* Grid Column Spans */ --grid-col-span-1: span 1; --grid-col-span-2: span 2; --grid-col-span-3: span 3; --grid-col-span-4: span 4; --grid-col-span-5: span 5; --grid-col-span-6: span 6; --grid-col-span-7: span 7; --grid-col-span-8: span 8; --grid-col-span-9: span 9; --grid-col-span-10: span 10; --grid-col-span-11: span 11; --grid-col-span-12: span 12; /* Grid Auto (for responsive auto-fit/fill) */ --grid-auto-fit: repeat(auto-fit, minmax(250px, 1fr)); --grid-auto-fill: repeat(auto-fill, minmax(250px, 1fr)); /* ============================================================ SECTION 10: LINE HEIGHTS & LETTER SPACING ============================================================ */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --line-height-heading: var(--line-height-tight); --line-height-body: var(--line-height-normal); --letter-spacing-tight: -0.05em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; --letter-spacing-widest: 0.2em; --letter-spacing-heading: var(--letter-spacing-tight); /* ============================================================ SECTION 11: FONT FAMILIES (Defined once, used everywhere) ============================================================ */ /* اینجا باید فونت فیس تعریف میکردی حداقل دو تا با مسیر پیش فرض ../fonts/Vazirmatn-Regular.*, ../fonts/webpeyda.* */ --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-serif: Georgia, "Times New Roman", serif; --font-family-mono: "Courier New", monospace; --font-family-display: var(--font-family-sans); --font-family-body: var(--font-family-sans); --font-family-heading: var(--font-family-sans); /* font-size */ --font-xs: 0.7rem; --font-sm: 0.8rem; --font-base: 0.95rem; --font-lg: 1.1rem; --font-xl: 1.3rem; --font-2xl: 1.8rem; --font-3xl: 2.0rem; --font-4xl: 2.3rem; --font-5xl: 2.6rem; --font-6xl: 3.0rem; --font-7xl: 3.5rem; --font-8xl: 4.0rem; --font-9xl: 4.5rem; --font-10xl: 5.0rem; /* ============================================================ SECTION 12: TRANSITIONS ============================================================ */ --transition-duration-fast: 0.15s; --transition-duration-base: 0.25s; --transition-duration-slow: 0.35s; --transition-duration-slower: 0.5s; --transition-timing-ease: ease; --transition-timing-ease-in: ease-in; --transition-timing-ease-out: ease-out; --transition-timing-ease-in-out: ease-in-out; --transition-timing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-timing-spring: cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: all var(--transition-duration-fast) var(--transition-timing-ease); --transition-base: all var(--transition-duration-base) var(--transition-timing-ease); --transition-slow: all var(--transition-duration-slow) var(--transition-timing-bounce); --transition-slower: all var(--transition-duration-slower) var(--transition-timing-spring); --transition-slide: all var(--transition-duration-base) var(--transition-timing-spring); --transition-bounce: all var(--transition-duration-slow) var(--transition-timing-bounce); /* ============================================================ SECTION 13: Z-INDEX LAYERS ============================================================ */ --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-auto: auto; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ============================================================ SECTION 14: OPACITY ============================================================ */ --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-25: 0.25; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-75: 0.75; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; /* ============================================================ SECTION 15: RTL & LTR SPECIFIC ============================================================ */ --direction-ltr: ltr; --direction-rtl: rtl; --text-align-start: left; --text-align-end: right; --margin-start: margin-left; --margin-end: margin-right; --padding-start: padding-left; --padding-end: padding-right; --border-start: border-left; --border-end: border-right; --border-radius-start: border-top-left-radius; --border-radius-end: border-top-right-radius; --float-start: left; --float-end: right; --transform-origin-start: left; --transform-origin-end: right; /* ============================================================ SECTION 16: ANIMATION TOKENS ============================================================ */ --animation-pulse-duration: 1.5s; --animation-pulse-timing: ease-in-out; --animation-pulse-scale: 1.05; --animation-glow-duration: 2s; --animation-glow-timing: ease-in-out; --animation-glow-intensity-start: 30%; --animation-glow-intensity-end: 60%; --animation-bounce-duration: 1s; --animation-bounce-timing: ease-in-out; --animation-bounce-distance: -5px; --animation-shake-duration: 0.5s; --animation-shake-timing: ease-in-out; --animation-shake-angle: 5deg; --animation-blink-duration: 1s; --animation-blink-timing: ease-in-out; --animation-blink-opacity: 0.3; --animation-live-duration: 1.5s; --animation-live-timing: ease-in-out; --animation-live-scale: 0.95; --animation-spin-duration: 1s; --animation-spin-timing: linear; --animation-ping-duration: 1s; --animation-ping-timing: cubic-bezier(0, 0, 0.2, 1); --animation-ping-scale: 2; /* ============================================================ SECTION 17: RESPONSIVE BREAKPOINTS ============================================================ */ --breakpoint-xs: 0px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; --container-padding: var(--spacing-base); --container-padding-sm: var(--spacing-xl); --container-padding-lg: var(--spacing-2xl); --container-max-width-sm: 640px; --container-max-width-md: 768px; --container-max-width-lg: 1024px; --container-max-width-xl: 1280px; --container-max-width-2xl: 1536px; } /* ============================================================ DARK MODE ============================================================ */ body.dark { /* ============================================================ SECTION 18: SEMANTIC COLORS (Dark Mode) ============================================================ */ /* Primary - Purple based */ --color-primary: var(--persian-purple); --color-primary-hover: var(--persian-purple-deep); --color-primary-active: var(--persian-purple-deep); --color-primary-focus: var(--persian-purple); --color-primary-disabled: color-mix(in srgb, var(--persian-purple) 50%, var(--persian-gray-500)); --color-primary-soft: color-mix(in srgb, var(--persian-purple) 20%, transparent); /* Secondary - Blue based */ --color-secondary: var(--persian-medium-blue); --color-secondary-hover: var(--persian-blue); --color-secondary-active: var(--persian-deep-blue); --color-secondary-focus: var(--persian-medium-blue); --color-secondary-disabled: color-mix(in srgb, var(--persian-medium-blue) 50%, var(--persian-gray-500)); --color-secondary-soft: color-mix(in srgb, var(--persian-medium-blue) 15%, transparent); /* Success - Green based */ --color-success: var(--persian-green); --color-success-hover: var(--persian-green-deep); --color-success-active: var(--persian-green-deep); --color-success-focus: var(--persian-green); --color-success-disabled: color-mix(in srgb, var(--persian-green) 50%, var(--persian-gray-500)); --color-success-soft: color-mix(in srgb, var(--persian-green) 15%, transparent); /* Danger - Rose based (softer in dark) */ --color-danger: var(--persian-rose); --color-danger-hover: var(--persian-red); --color-danger-active: var(--persian-red); --color-danger-focus: var(--persian-rose); --color-danger-disabled: color-mix(in srgb, var(--persian-rose) 50%, var(--persian-gray-500)); --color-danger-soft: color-mix(in srgb, var(--persian-rose) 20%, transparent); /* Warning - Saffron based */ --color-warn: var(--persian-saffron); --color-warn-hover: var(--persian-peper); --color-warn-active: var(--persian-peper); --color-warn-focus: var(--persian-saffron); --color-warn-disabled: color-mix(in srgb, var(--persian-saffron) 50%, var(--persian-gray-500)); --color-warn-soft: color-mix(in srgb, var(--persian-saffron) 15%, transparent); /* Accent - Teal based */ --color-accent: var(--persian-teal); --color-accent-hover: var(--persian-teal-deep); --color-accent-active: var(--persian-teal-deep); --color-accent-focus: var(--persian-teal); --color-accent-disabled: color-mix(in srgb, var(--persian-teal) 50%, var(--persian-gray-500)); --color-accent-soft: color-mix(in srgb, var(--persian-teal) 15%, transparent); /* Info - Blue based */ --color-info: var(--persian-blue); --color-info-hover: var(--persian-medium-blue); --color-info-active: var(--persian-deep-blue); --color-info-focus: var(--persian-blue); --color-info-disabled: color-mix(in srgb, var(--persian-blue) 50%, var(--persian-gray-500)); --color-info-soft: color-mix(in srgb, var(--persian-blue) 15%, transparent); /* ============================================================ SECTION 19: SURFACE & BACKGROUND COLORS (Dark Mode) ============================================================ */ --color-bg-body: var(--persian-gray-800); --color-bg-body-secondary: var(--persian-gray-700); --color-bg-card: var(--persian-gray-700); --color-bg-card-hover: var(--persian-gray-600); --color-bg-card-active: var(--persian-gray-500); --color-bg-soft: var(--persian-gray-600); --color-bg-soft-hover: var(--persian-gray-500); --color-bg-input: var(--persian-gray-700); --color-bg-input-hover: var(--persian-gray-600); --color-bg-input-focus: var(--persian-gray-700); --color-bg-muted: var(--persian-gray-500); --color-bg-muted-hover: var(--persian-gray-400); --color-bg-overlay: color-mix(in srgb, var(--persian-black) 70%, transparent); --color-bg-overlay-light: color-mix(in srgb, var(--persian-black) 40%, transparent); --color-bg-overlay-dark: color-mix(in srgb, var(--persian-black) 90%, transparent); /* ============================================================ SECTION 20: TEXT COLORS (Dark Mode) ============================================================ */ --color-text-body: var(--persian-gray-100); --color-text-body-secondary: var(--persian-gray-200); --color-text-muted: var(--persian-gray-300); --color-text-muted-light: var(--persian-gray-400); --color-text-inverse: var(--persian-white); --color-text-inverse-light: var(--persian-gray-100); --color-text-disabled: var(--persian-gray-500); --color-text-placeholder: var(--persian-gray-500); --color-text-link: var(--color-primary); --color-text-link-hover: var(--color-primary-hover); --color-text-selection: var(--color-primary); /* ============================================================ SECTION 21: BORDER COLORS (Dark Mode) ============================================================ */ --color-border: var(--persian-gray-600); --color-border-light: var(--persian-gray-700); --color-border-dark: var(--persian-gray-500); --color-border-focus: var(--color-primary); --color-border-error: var(--color-danger); --color-border-success: var(--color-success); --color-border-warning: var(--color-warn); /* ============================================================ SECTION 22: SHADOWS (Dark Mode) ============================================================ */ --color-shadow-xs: 0 1px 2px color-mix(in srgb, var(--persian-black) 40%, transparent); --color-shadow-sm: 0 2px 4px color-mix(in srgb, var(--persian-black) 40%, transparent); --color-shadow-base: 0 4px 12px color-mix(in srgb, var(--persian-black) 40%, transparent); --color-shadow-md: 0 6px 16px color-mix(in srgb, var(--persian-black) 50%, transparent); --color-shadow-lg: 0 8px 24px color-mix(in srgb, var(--persian-black) 50%, transparent); --color-shadow-xl: 0 12px 32px color-mix(in srgb, var(--persian-black) 60%, transparent); --color-shadow-2xl: 0 16px 48px color-mix(in srgb, var(--persian-black) 70%, transparent); --color-shadow-3xl: 0 20px 64px color-mix(in srgb, var(--persian-black) 80%, transparent); --color-shadow-card: var(--color-shadow-base); --color-shadow-card-hover: var(--color-shadow-md); --color-shadow-btn: var(--color-shadow-md); --color-shadow-btn-hover: var(--color-shadow-lg); --color-shadow-btn-active: var(--color-shadow-sm); --color-shadow-dropdown: var(--color-shadow-lg); --color-shadow-modal: var(--color-shadow-2xl); --color-shadow-popover: var(--color-shadow-lg); --color-shadow-tooltip: var(--color-shadow-sm); --color-shadow-glass: 0 4px 20px color-mix(in srgb, var(--persian-black) 30%, transparent); /* ============================================================ SECTION 23: COMPONENT TOKENS (Dark Mode Overrides) ============================================================ */ /* Tooltip */ --tooltip-bg: var(--color-bg-card); --tooltip-color: var(--color-text-body); /* Dropdown */ --dropdown-bg: var(--color-bg-card); --dropdown-color-border: var(--color-border); --dropdown-item-hover-bg: var(--color-bg-soft); --dropdown-item-active-bg: var(--color-primary-soft); --dropdown-item-color: var(--color-text-body); --dropdown-item-hover-color: var(--color-text-body); --dropdown-item-active-color: var(--color-primary); --dropdown-divider-color: var(--color-border); /* Table */ --table-color-border: var(--color-border); --table-header-bg: var(--color-bg-soft); --table-header-color: var(--color-text-muted); --table-row-hover-bg: var(--color-bg-soft); --table-row-active-bg: var(--color-primary-soft); --table-row-stripe-bg: color-mix(in srgb, var(--color-bg-soft) 30%, transparent); /* Avatar */ --avatar-color-border: var(--color-bg-card); --avatar-bg: var(--color-bg-soft); --avatar-color: var(--color-text-muted); /* Progress */ --progress-bg: var(--color-bg-soft); /* Tabs */ --tabs-color: var(--color-text-muted); --tabs-color-hover: var(--color-text-body); --tabs-color-active: var(--color-primary); --tabs-color-border: var(--color-border); --tabs-bg: var(--color-bg-soft); --tabs-bg-hover: var(--color-bg-soft-hover); --tabs-bg-active: var(--color-bg-card); /* Accordion */ --accordion-color-border: var(--color-border); --accordion-header-color: var(--color-text-body); --accordion-header-color-hover: var(--color-primary); --accordion-content-color: var(--color-text-body-secondary); --accordion-icon-color: var(--color-text-muted); --accordion-icon-color-active: var(--color-primary); /* Pagination */ --pagination-color: var(--color-text-body); --pagination-color-hover: var(--color-primary); --pagination-color-active: var(--color-text-inverse); --pagination-bg: transparent; --pagination-bg-hover: var(--color-bg-soft); --pagination-bg-active: var(--color-primary); --pagination-color-border: var(--color-border); /* Navbar */ --navbar-bg: var(--color-bg-card); --navbar-color-border: var(--color-border); --navbar-link-color: var(--color-text-body); --navbar-link-color-hover: var(--color-primary); --navbar-link-color-active: var(--color-primary); /* Footer */ --footer-bg: var(--color-bg-card); --footer-color-border: var(--color-border); --footer-color: var(--color-text-muted); --footer-color-hover: var(--color-text-body); --footer-link-color: var(--color-text-muted); --footer-link-color-hover: var(--color-primary); /* Sidebar */ --sidebar-bg: var(--color-bg-card); --sidebar-color-border: var(--color-border); --sidebar-link-color: var(--color-text-body); --sidebar-link-color-hover: var(--color-primary); --sidebar-link-color-active: var(--color-primary); --sidebar-link-bg-hover: var(--color-bg-soft); --sidebar-link-bg-active: var(--color-primary-soft); /* Breadcrumb */ --breadcrumb-color: var(--color-text-muted); --breadcrumb-color-hover: var(--color-primary); --breadcrumb-color-active: var(--color-text-body); --breadcrumb-separator-color: var(--color-text-muted); /* Divider */ --divider-color: var(--color-border); --divider-text-color: var(--color-text-muted); --divider-text-bg: var(--color-bg-card); } /* ============================================================ RTL SUPPORT ============================================================ */ [dir="rtl"] { --direction: rtl; --text-align-start: right; --text-align-end: left; --margin-start: margin-right; --margin-end: margin-left; --padding-start: padding-right; --padding-end: padding-left; --border-start: border-right; --border-end: border-left; --border-radius-start: border-top-right-radius; --border-radius-end: border-top-left-radius; --float-start: right; --float-end: left; --transform-origin-start: right; --transform-origin-end: left; } /* ============================================================ LTR SUPPORT (Default) ============================================================ */ [dir="ltr"] { --direction: ltr; --text-align-start: left; --text-align-end: right; --margin-start: margin-left; --margin-end: margin-right; --padding-start: padding-left; --padding-end: padding-right; --border-start: border-left; --border-end: border-right; --border-radius-start: border-top-left-radius; --border-radius-end: border-top-right-radius; --float-start: left; --float-end: right; --transform-origin-start: left; --transform-origin-end: right; }