/** * ChegôSJK - Design System Variables * * Este arquivo contém TODAS as variáveis CSS do tema. * Importar PRIMEIRO em qualquer outro arquivo CSS. * * Cor Primária: #9b6f50 (Coffee Bronze) * * @package monsitheme * @version 2.0.0 */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ======================================== PRIMARY PALETTE - Coffee Bronze Base: #9b6f50 ======================================== */ --color-primary-50: #faf7f5; --color-primary-100: #f3ebe4; --color-primary-200: #e5d4c5; --color-primary-300: #d4b89f; --color-primary-400: #c19578; --color-primary-500: #9b6f50; --color-primary-600: #8a5f42; --color-primary-700: #734d36; --color-primary-800: #5f4030; --color-primary-900: #4e352a; --color-primary-950: #2a1b15; /* ======================================== SECONDARY PALETTE - Warm Gold ======================================== */ --color-secondary-50: #fdfbf3; --color-secondary-100: #faf5e1; --color-secondary-200: #f4e9c3; --color-secondary-300: #ecd89c; --color-secondary-400: #e2c06d; --color-secondary-500: #d4a84a; --color-secondary-600: #c08d3b; --color-secondary-700: #a07032; --color-secondary-800: #82592e; --color-secondary-900: #6b4a29; --color-secondary-950: #3d2714; /* ======================================== NEUTRAL PALETTE - Coffee Grays ======================================== */ --color-neutral-0: #ffffff; --color-neutral-50: #fdfcfb; --color-neutral-100: #f8f6f4; --color-neutral-200: #f0ebe6; --color-neutral-300: #e4dbd2; --color-neutral-400: #c9baa8; --color-neutral-500: #a89580; --color-neutral-600: #8a7560; --color-neutral-700: #6e5c4a; --color-neutral-800: #5a4a3c; --color-neutral-900: #4a3d32; --color-neutral-950: #2a211a; /* ======================================== SEMANTIC COLORS ======================================== */ /* Success */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-500: #10b981; --color-success-600: #059669; --color-success-700: #047857; /* Warning */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; /* Error */ --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-500: #ef4444; --color-error-600: #dc2626; --color-error-700: #b91c1c; /* Info */ --color-info-50: #eff6ff; --color-info-100: #dbeafe; --color-info-500: #3b82f6; --color-info-600: #2563eb; --color-info-700: #1d4ed8; /* ======================================== SEMANTIC ALIASES ======================================== */ /* Text Colors */ --color-text-primary: var(--color-neutral-950); --color-text-secondary: var(--color-neutral-700); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-neutral-0); --color-text-link: var(--color-primary-600); --color-text-link-hover: var(--color-primary-700); /* Background Colors */ --color-bg-primary: var(--color-neutral-0); --color-bg-secondary: var(--color-neutral-50); --color-bg-tertiary: var(--color-neutral-100); --color-bg-dark: var(--color-neutral-950); --color-bg-accent: var(--color-primary-50); /* Border Colors */ --color-border-light: var(--color-neutral-200); --color-border-default: var(--color-neutral-300); --color-border-dark: var(--color-neutral-400); --color-border-focus: var(--color-primary-500); /* ======================================== LEGACY ALIASES (para compatibilidade) Migrar gradualmente para novos nomes ======================================== */ --coffee-dark: var(--color-neutral-950); --coffee-brown: var(--color-neutral-800); --coffee-medium: var(--color-neutral-700); --coffee-light: var(--color-primary-500); --coffee-tan: var(--color-primary-400); --coffee-cream: var(--color-neutral-200); --coffee-beige: var(--color-neutral-100); --coffee-milk: var(--color-neutral-50); --coffee-white: var(--color-neutral-0); --coffee-gold: var(--color-secondary-500); --gold: var(--color-secondary-500); --success: var(--color-success-500); --error: var(--color-error-500); --black: var(--color-neutral-950); --blue-color: var(--color-info-500); /* ======================================== GRADIENTS ======================================== */ --gradient-primary: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%); --gradient-secondary: linear-gradient(135deg, var(--color-secondary-400) 0%, var(--color-secondary-600) 100%); --gradient-dark: linear-gradient(135deg, var(--color-neutral-900) 0%, var(--color-neutral-950) 100%); --gradient-warm: linear-gradient(135deg, var(--color-primary-950) 0%, var(--color-primary-800) 50%, var(--color-primary-700) 100%); --gradient-gold: linear-gradient(135deg, var(--color-secondary-500) 0%, var(--color-primary-400) 100%); --gradient-cream: linear-gradient(135deg, var(--color-neutral-100) 0%, var(--color-neutral-0) 100%); /* ======================================== FONT FAMILIES ======================================== */ --font-display: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Legacy aliases */ --theme-font: var(--font-display); --secundary-font: var(--font-body); /* ======================================== FONT SIZES - Scale 1.25 (Major Third) ======================================== */ --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 */ --text-7xl: 4.5rem; /* 72px */ /* ======================================== LINE HEIGHTS ======================================== */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ======================================== FONT WEIGHTS ======================================== */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ======================================== 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 - Base 4px ======================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --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-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ --space-40: 10rem; /* 160px */ /* ======================================== CONTAINER SIZES ======================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1440px; --container-max: 1200px; /* ======================================== 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; /* ======================================== BOX SHADOWS ======================================== */ --shadow-xs: 0 1px 2px 0 rgba(42, 27, 21, 0.05); --shadow-sm: 0 1px 3px 0 rgba(42, 27, 21, 0.1), 0 1px 2px -1px rgba(42, 27, 21, 0.1); --shadow-md: 0 4px 6px -1px rgba(42, 27, 21, 0.1), 0 2px 4px -2px rgba(42, 27, 21, 0.1); --shadow-lg: 0 10px 15px -3px rgba(42, 27, 21, 0.1), 0 4px 6px -4px rgba(42, 27, 21, 0.1); --shadow-xl: 0 20px 25px -5px rgba(42, 27, 21, 0.1), 0 8px 10px -6px rgba(42, 27, 21, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(42, 27, 21, 0.25); /* Colored Shadows */ --shadow-primary: 0 10px 40px -10px rgba(155, 111, 80, 0.4); --shadow-warm: 0 10px 40px -10px rgba(212, 168, 74, 0.3); --shadow-soft: 0 4px 20px rgba(42, 27, 21, 0.08); --shadow-medium: 0 8px 40px rgba(42, 27, 21, 0.12); --shadow-strong: 0 16px 60px rgba(42, 27, 21, 0.16); /* ======================================== TRANSITIONS ======================================== */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; --ease-linear: linear; --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.68, -0.55, 0.265, 1.55); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Legacy alias */ --transition-smooth: var(--ease-smooth); /* ======================================== Z-INDEX SCALE ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-toast: 1080; /* ======================================== BREAKPOINTS (para referência JS) ======================================== */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; /* ======================================== ASPECT RATIOS ======================================== */ --aspect-square: 1 / 1; --aspect-video: 16 / 9; --aspect-4-3: 4 / 3; --aspect-3-2: 3 / 2; --aspect-2-1: 2 / 1; --aspect-product: 1 / 1; --aspect-hero: 16 / 9; --aspect-card: 4 / 3; } /* ======================================== DARK MODE (opcional, para futuro) ======================================== */ @media (prefers-color-scheme: dark) { :root.auto-dark { --color-text-primary: var(--color-neutral-100); --color-text-secondary: var(--color-neutral-300); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-neutral-950); --color-bg-primary: var(--color-neutral-950); --color-bg-secondary: var(--color-neutral-900); --color-bg-tertiary: var(--color-neutral-800); --color-bg-dark: var(--color-neutral-0); --color-border-light: var(--color-neutral-800); --color-border-default: var(--color-neutral-700); --color-border-dark: var(--color-neutral-600); } } /* ======================================== REDUCED MOTION ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }