/** * Unstoppable Restaurant Design System * * A comprehensive design token system using CSS custom properties. * These variables provide the foundation for all plugin styling. * * Override these in your theme to customize the appearance: * :root { --ur-color-primary: #your-color; } */:root { /* ========================================================================== COLOR SYSTEM ========================================================================== */ /* Brand Colors */ --ur-color-primary: #2563eb; --ur-color-primary-hover: #1d4ed8; --ur-color-primary-light: #dbeafe; --ur-color-primary-dark: #1e40af; --ur-color-accent: #059669; --ur-color-accent-hover: #047857; --ur-color-accent-light: #d1fae5; /* Neutral Colors */ --ur-color-white: #ffffff; --ur-color-black: #000000; --ur-color-gray-50: #f9fafb; --ur-color-gray-100: #f3f4f6; --ur-color-gray-200: #e5e7eb; --ur-color-gray-300: #d1d5db; --ur-color-gray-400: #9ca3af; --ur-color-gray-500: #6b7280; --ur-color-gray-600: #4b5563; --ur-color-gray-700: #374151; --ur-color-gray-800: #1f2937; --ur-color-gray-900: #111827; /* Semantic Colors */ --ur-color-success: #059669; --ur-color-success-light: #d1fae5; --ur-color-warning: #d97706; --ur-color-warning-light: #fef3c7; --ur-color-error: #dc2626; --ur-color-error-light: #fee2e2; --ur-color-info: #2563eb; --ur-color-info-light: #dbeafe; /* Text Colors */ --ur-color-text-primary: #1f2937; --ur-color-text-secondary: #4b5563; --ur-color-text-tertiary: #6b7280; --ur-color-text-muted: #9ca3af; --ur-color-text-inverse: #ffffff; /* Background Colors */ --ur-color-bg-primary: #ffffff; --ur-color-bg-secondary: #f9fafb; --ur-color-bg-tertiary: #f3f4f6; --ur-color-bg-overlay: rgba(0, 0, 0, 0.5); /* Border Colors */ --ur-color-border: #e5e7eb; --ur-color-border-hover: #d1d5db; --ur-color-border-focus: #2563eb; /* ========================================================================== TYPOGRAPHY ========================================================================== */ /* Font Families */ --ur-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ur-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font Sizes */ --ur-font-size-xs: 0.75rem; /* 12px */ --ur-font-size-sm: 0.875rem; /* 14px */ --ur-font-size-base: 1rem; /* 16px */ --ur-font-size-lg: 1.125rem; /* 18px */ --ur-font-size-xl: 1.25rem; /* 20px */ --ur-font-size-2xl: 1.5rem; /* 24px */ --ur-font-size-3xl: 1.875rem; /* 30px */ --ur-font-size-4xl: 2.25rem; /* 36px */ /* Font Weights */ --ur-font-weight-normal: 400; --ur-font-weight-medium: 500; --ur-font-weight-semibold: 600; --ur-font-weight-bold: 700; /* Line Heights */ --ur-line-height-tight: 1.25; --ur-line-height-normal: 1.5; --ur-line-height-relaxed: 1.625; /* Letter Spacing */ --ur-letter-spacing-tight: -0.025em; --ur-letter-spacing-normal: 0; --ur-letter-spacing-wide: 0.025em; /* ========================================================================== SPACING ========================================================================== */ --ur-space-0: 0; --ur-space-1: 0.25rem; /* 4px */ --ur-space-2: 0.5rem; /* 8px */ --ur-space-3: 0.75rem; /* 12px */ --ur-space-4: 1rem; /* 16px */ --ur-space-5: 1.25rem; /* 20px */ --ur-space-6: 1.5rem; /* 24px */ --ur-space-8: 2rem; /* 32px */ --ur-space-10: 2.5rem; /* 40px */ --ur-space-12: 3rem; /* 48px */ --ur-space-16: 4rem; /* 64px */ --ur-space-20: 5rem; /* 80px */ /* ========================================================================== BORDERS & RADIUS ========================================================================== */ --ur-border-width: 1px; --ur-border-width-2: 2px; --ur-radius-sm: 0.25rem; /* 4px */ --ur-radius-md: 0.375rem; /* 6px */ --ur-radius-lg: 0.5rem; /* 8px */ --ur-radius-xl: 0.75rem; /* 12px */ --ur-radius-2xl: 1rem; /* 16px */ --ur-radius-full: 9999px; /* ========================================================================== SHADOWS ========================================================================== */ --ur-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --ur-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --ur-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --ur-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --ur-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ========================================================================== TRANSITIONS ========================================================================== */ --ur-transition-fast: 150ms ease; --ur-transition-normal: 200ms ease; --ur-transition-slow: 300ms ease; --ur-ease-in: cubic-bezier(0.4, 0, 1, 1); --ur-ease-out: cubic-bezier(0, 0, 0.2, 1); --ur-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --ur-z-dropdown: 100; --ur-z-sticky: 200; --ur-z-modal-backdrop: 400; --ur-z-modal: 500; --ur-z-drawer: 600; --ur-z-toast: 700; /* ========================================================================== COMPONENT TOKENS ========================================================================== */ /* Buttons */ --ur-btn-height: 2.75rem; /* 44px - touch-friendly */ --ur-btn-height-sm: 2.25rem; /* 36px */ --ur-btn-height-lg: 3.25rem; /* 52px */ --ur-btn-padding-x: var(--ur-space-5); --ur-btn-font-size: var(--ur-font-size-base); --ur-btn-font-weight: var(--ur-font-weight-medium); --ur-btn-radius: var(--ur-radius-lg); /* Cards */ --ur-card-padding: var(--ur-space-4); --ur-card-radius: var(--ur-radius-xl); --ur-card-shadow: var(--ur-shadow-sm); --ur-card-border: var(--ur-border-width) solid var(--ur-color-border); /* Inputs */ --ur-input-height: 2.75rem; --ur-input-padding-x: var(--ur-space-4); --ur-input-font-size: var(--ur-font-size-base); --ur-input-radius: var(--ur-radius-md); --ur-input-border: var(--ur-border-width) solid var(--ur-color-border); /* Modal */ --ur-modal-width: 32rem; /* 512px */ --ur-modal-width-lg: 48rem; /* 768px */ --ur-modal-padding: var(--ur-space-6); --ur-modal-radius: var(--ur-radius-2xl); /* Drawer */ --ur-drawer-width: 24rem; /* 384px */ --ur-drawer-width-lg: 28rem; /* 448px */ --ur-drawer-padding: var(--ur-space-5); /* Product Card */ --ur-product-card-gap: var(--ur-space-4); --ur-product-card-padding: var(--ur-space-4); --ur-product-card-radius: var(--ur-radius-xl); --ur-product-image-radius: var(--ur-radius-lg); --ur-product-image-aspect: 4 / 3; /* Category Section */ --ur-category-gap: var(--ur-space-8); --ur-category-title-size: var(--ur-font-size-2xl); --ur-category-title-weight: var(--ur-font-weight-bold); /* Navigation Tabs */ --ur-tab-height: 3rem; --ur-tab-padding-x: var(--ur-space-4); --ur-tab-gap: var(--ur-space-2); --ur-tab-font-size: var(--ur-font-size-sm); --ur-tab-font-weight: var(--ur-font-weight-medium); /* Skeleton Loader */ --ur-skeleton-color: var(--ur-color-gray-200); --ur-skeleton-shine: var(--ur-color-gray-100);}/* ========================================================================== DARK MODE SUPPORT (Optional - for future) ========================================================================== */@media (prefers-color-scheme: dark) { :root.ur-auto-dark { --ur-color-bg-primary: #111827; --ur-color-bg-secondary: #1f2937; --ur-color-bg-tertiary: #374151; --ur-color-text-primary: #f9fafb; --ur-color-text-secondary: #e5e7eb; --ur-color-text-tertiary: #d1d5db; --ur-color-border: #374151; --ur-color-border-hover: #4b5563; }}/* ========================================================================== BASE RESETS (Scoped to plugin) ========================================================================== */.ur-wrap,.ur-wrap *,.ur-wrap *::before,.ur-wrap *::after { box-sizing: border-box;}.ur-wrap { font-family: var(--ur-font-family-sans); font-size: var(--ur-font-size-base); line-height: var(--ur-line-height-normal); color: var(--ur-color-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/* ========================================================================== UTILITY CLASSES ========================================================================== *//* Visually Hidden (for screen readers) */.ur-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}/* Focus Ring */.ur-focus-ring:focus { outline: none; box-shadow: 0 0 0 3px var(--ur-color-primary-light);}.ur-focus-ring:focus:not(:focus-visible) { box-shadow: none;}.ur-focus-ring:focus-visible { box-shadow: 0 0 0 3px var(--ur-color-primary-light);}/* Skeleton Animation */@keyframes ur-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; }}@keyframes ur-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; }}.ur-skeleton { background: linear-gradient( 90deg, var(--ur-skeleton-color) 25%, var(--ur-skeleton-shine) 50%, var(--ur-skeleton-color) 75% ); background-size: 200% 100%; animation: ur-skeleton-shimmer 1.5s infinite; border-radius: var(--ur-radius-md);}/* Truncate Text */.ur-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.ur-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}.ur-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}