/* ========================================================== Project : Compro Doodle Module : Core Design System File : variables.css Version : 2.0.0 Author : Doodle Engineering ========================================================== */ /* ========================================================== ROOT ========================================================== */ :root{ /* ========================================================== BRAND ========================================================== */ --color-primary:#E64387; --color-primary-hover:#D63779; --color-primary-light:#FCE4EE; /* ========================================================== SURFACE ========================================================== */ --color-background:#FFFFFF; --color-surface:#FFFFFF; --color-surface-alt:#FAFAFA; --color-surface-hover:#F5F5F5; /* ========================================================== TEXT ========================================================== */ --color-text:#1F1F1F; --color-text-secondary:#666666; --color-text-muted:#999999; --color-text-white:#FFFFFF; /* ========================================================== BORDER ========================================================== */ --color-border:#E9E9E9; --color-border-light:#F1F1F1; --color-divider:#ECECEC; /* ========================================================== STATUS ========================================================== */ --color-success:#16A34A; --color-warning:#F59E0B; --color-danger:#DC2626; --color-info:#2563EB; /* ========================================================== SHADOW ========================================================== */ --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 4px 10px rgba(0,0,0,.05); --shadow-md: 0 8px 24px rgba(0,0,0,.06); --shadow-lg: 0 16px 40px rgba(0,0,0,.08); --shadow-xl: 0 24px 64px rgba(0,0,0,.10); /* ========================================================== RADIUS ========================================================== */ --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px; /* ========================================================== SPACING ========================================================== */ --space-0:0; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-56:56px; --space-64:64px; --space-72:72px; --space-80:80px; --space-96:96px; --space-120:120px; /* ========================================================== TYPOGRAPHY ========================================================== */ --font-family-primary: "Quicksand", sans-serif; --font-family-heading: "Quicksand", sans-serif; --font-family-mono: "SFMono-Regular", Consolas, monospace; /* ========================================================== FONT SIZE ========================================================== */ --font-xs:12px; --font-sm:14px; --font-md:16px; --font-lg:18px; --font-xl:20px; --font-2xl:24px; --font-3xl:32px; --font-4xl:40px; --font-5xl:48px; --font-6xl:56px; /* ========================================================== FONT WEIGHT ========================================================== */ --font-light:300; --font-regular:400; --font-medium:500; --font-semibold:600; --font-bold:700; --font-extrabold:800; /* ========================================================== LINE HEIGHT ========================================================== */ --line-tight:1.2; --line-normal:1.5; --line-relaxed:1.8; --line-loose:2; /* ========================================================== LETTER SPACING ========================================================== */ --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.03em; /* ========================================================== CONTAINER ========================================================== */ --container-sm:640px; --container-md:768px; --container-lg:1024px; --container-xl:1200px; --container-2xl:1280px; --container-full:1440px; /* ========================================================== HEADER ========================================================== */ --header-height:80px; --header-mobile-height:64px; /* ========================================================== SIDEBAR ========================================================== */ --sidebar-width:280px; --sidebar-collapsed-width:84px; /* ========================================================== BUTTON ========================================================== */ --button-height-sm:40px; --button-height-md:48px; --button-height-lg:56px; --button-height-xl:64px; /* ========================================================== INPUT ========================================================== */ --input-height-sm:40px; --input-height-md:48px; --input-height-lg:56px; /* ========================================================== ICON SIZE ========================================================== */ --icon-xs:14px; --icon-sm:18px; --icon-md:24px; --icon-lg:32px; --icon-xl:48px; /* ========================================================== TRANSITION ========================================================== */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* ========================================================== OPACITY ========================================================== */ --opacity-disabled:.5; --opacity-muted:.7; --opacity-overlay:.85; /* ========================================================== SECTION SPACING ========================================================== */ --section-space-xs:48px; --section-space-sm:64px; --section-space-md:96px; --section-space-lg:120px; --section-space-xl:160px; /* ========================================================== GRID ========================================================== */ --grid-gap-xs:8px; --grid-gap-sm:16px; --grid-gap-md:24px; --grid-gap-lg:32px; --grid-gap-xl:48px; /* ========================================================== BREAKPOINT ========================================================== */ --breakpoint-mobile:480px; --breakpoint-tablet:768px; --breakpoint-laptop:1024px; --breakpoint-desktop:1280px; --breakpoint-wide:1440px; /* ========================================================== Z INDEX ========================================================== */ --z-base:1; --z-dropdown:1000; --z-sticky:1010; --z-fixed:1020; --z-overlay:1030; --z-modal:1040; --z-popover:1050; --z-tooltip:1060; --z-toast:1070; --z-loader:1080; /* ========================================================== OVERLAY ========================================================== */ --overlay-light: rgba(255,255,255,.70); --overlay-dark: rgba(0,0,0,.55); --overlay-primary: rgba(230,67,135,.12); /* ========================================================== BACKDROP ========================================================== */ --backdrop-blur-sm:4px; --backdrop-blur-md:8px; --backdrop-blur-lg:16px; /* ========================================================== BORDER ========================================================== */ --border-width-thin:1px; --border-width-normal:2px; --border-width-thick:3px; /* ========================================================== SKELETON ========================================================== */ --skeleton-base:#EFEFEF; --skeleton-highlight:#F7F7F7; /* ========================================================== FOCUS ========================================================== */ --focus-ring: 0 0 0 4px rgba(230,67,135,.18); /* ========================================================== CARD ========================================================== */ --card-padding-sm:16px; --card-padding-md:24px; --card-padding-lg:32px; --card-padding-xl:40px; /* ========================================================== IMAGE ========================================================== */ --image-radius-sm:8px; --image-radius-md:16px; --image-radius-lg:24px; /* ========================================================== NAVBAR ========================================================== */ --navbar-height:84px; --navbar-shadow:var(--shadow-sm); /* ========================================================== FOOTER ========================================================== */ --footer-padding-top:80px; --footer-padding-bottom:48px; /* ========================================================== BADGE ========================================================== */ --badge-height:28px; --badge-radius:999px; --badge-padding-inline:12px; /* ========================================================== CHIP ========================================================== */ --chip-height:36px; --chip-radius:999px; --chip-padding-inline:16px; /* ========================================================== AVATAR ========================================================== */ --avatar-sm:32px; --avatar-md:40px; --avatar-lg:56px; --avatar-xl:72px; /* ========================================================== COMMERCE ========================================================== */ --product-card-radius:var(--radius-xl); --product-card-padding:var(--space-24); --product-card-gap:var(--space-24); --product-image-size:320px; --cart-image-size:140px; --checkout-summary-width:380px; --wishlist-image-size:120px; /* ========================================================== FORM ========================================================== */ --form-gap:var(--space-24); --form-label-margin:var(--space-8); --form-error-color:var(--color-danger); --form-success-color:var(--color-success); /* ========================================================== SCROLLBAR ========================================================== */ --scrollbar-width:8px; --scrollbar-radius:999px; --scrollbar-thumb:var(--color-primary); --scrollbar-track:var(--color-surface-hover); /* ========================================================== LOADER ========================================================== */ --loader-size-sm:24px; --loader-size-md:40px; --loader-size-lg:64px; /* ========================================================== EASING ========================================================== */ --ease-standard:cubic-bezier(.4,0,.2,1); --ease-decelerate:cubic-bezier(0,0,.2,1); --ease-accelerate:cubic-bezier(.4,0,1,1); /* ========================================================== MOTION ========================================================== */ --duration-fast:150ms; --duration-normal:300ms; --duration-slow:500ms; /* ========================================================== DARK MODE READY ========================================================== */ [data-theme="dark"]{ --color-background:#111111; --color-surface:#1B1B1B; --color-surface-alt:#232323; --color-surface-hover:#2A2A2A; --color-text:#F5F5F5; --color-text-secondary:#CFCFCF; --color-text-muted:#9D9D9D; --color-border:#333333; --color-border-light:#2A2A2A; --color-divider:#2D2D2D; --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 6px 14px rgba(0,0,0,.35); --shadow-md: 0 12px 28px rgba(0,0,0,.40); --shadow-lg: 0 20px 48px rgba(0,0,0,.45); --shadow-xl: 0 30px 72px rgba(0,0,0,.50); } /* ========================================================== ACCESSIBILITY ========================================================== */ :focus-visible{ outline:none; box-shadow:var(--focus-ring); } /* ========================================================== GLOBAL SELECTION ========================================================== */ ::selection{ background:var(--color-primary); color:var(--color-text-white); } /* ========================================================== ROOT END ========================================================== */ }