109 lines
2.5 KiB
CSS
109 lines
2.5 KiB
CSS
|
/* Import Google Fonts */
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Prompt:wght@400;500;600;700&family=Sarabun:wght@400;500;600;700&display=swap');
|
||
|
|
|
||
|
|
@tailwind base;
|
||
|
|
@tailwind components;
|
||
|
|
@tailwind utilities;
|
||
|
|
|
||
|
|
/* CSS Variables for Design System */
|
||
|
|
:root {
|
||
|
|
/* Primary Colors */
|
||
|
|
--primary-50: #EFF6FF;
|
||
|
|
--primary-100: #DBEAFE;
|
||
|
|
--primary-200: #BFDBFE;
|
||
|
|
--primary-300: #93C5FD;
|
||
|
|
--primary-400: #60A5FA;
|
||
|
|
--primary-500: #3B82F6;
|
||
|
|
--primary-600: #2563EB;
|
||
|
|
--primary-700: #1D4ED8;
|
||
|
|
--primary-800: #1E40AF;
|
||
|
|
--primary-900: #1E3A8A;
|
||
|
|
|
||
|
|
/* Secondary Colors */
|
||
|
|
--secondary-500: #10B981;
|
||
|
|
--accent-500: #F59E0B;
|
||
|
|
--error-500: #EF4444;
|
||
|
|
|
||
|
|
/* Neutral Colors */
|
||
|
|
--gray-50: #F9FAFB;
|
||
|
|
--gray-100: #F3F4F6;
|
||
|
|
--gray-200: #E5E7EB;
|
||
|
|
--gray-300: #D1D5DB;
|
||
|
|
--gray-400: #9CA3AF;
|
||
|
|
--gray-500: #6B7280;
|
||
|
|
--gray-600: #4B5563;
|
||
|
|
--gray-700: #374151;
|
||
|
|
--gray-800: #1F2937;
|
||
|
|
--gray-900: #111827;
|
||
|
|
|
||
|
|
/* Dark Mode */
|
||
|
|
--dark-bg-primary: #0F172A;
|
||
|
|
--dark-bg-secondary: #1E293B;
|
||
|
|
--dark-bg-tertiary: #334155;
|
||
|
|
--dark-text-primary: #F1F5F9;
|
||
|
|
--dark-text-secondary: #CBD5E1;
|
||
|
|
|
||
|
|
/* Typography */
|
||
|
|
--text-xs: 0.75rem;
|
||
|
|
--text-sm: 0.875rem;
|
||
|
|
--text-base: 1rem;
|
||
|
|
--text-lg: 1.125rem;
|
||
|
|
--text-xl: 1.25rem;
|
||
|
|
--text-2xl: 1.5rem;
|
||
|
|
--text-3xl: 1.875rem;
|
||
|
|
--text-4xl: 2.25rem;
|
||
|
|
--text-5xl: 3rem;
|
||
|
|
|
||
|
|
/* Font Weights */
|
||
|
|
--font-normal: 400;
|
||
|
|
--font-medium: 500;
|
||
|
|
--font-semibold: 600;
|
||
|
|
--font-bold: 700;
|
||
|
|
|
||
|
|
/* Spacing (8px base unit) */
|
||
|
|
--space-1: 0.25rem;
|
||
|
|
--space-2: 0.5rem;
|
||
|
|
--space-3: 0.75rem;
|
||
|
|
--space-4: 1rem;
|
||
|
|
--space-5: 1.25rem;
|
||
|
|
--space-6: 1.5rem;
|
||
|
|
--space-8: 2rem;
|
||
|
|
--space-10: 2.5rem;
|
||
|
|
--space-12: 3rem;
|
||
|
|
--space-16: 4rem;
|
||
|
|
--space-20: 5rem;
|
||
|
|
|
||
|
|
/* Border Radius */
|
||
|
|
--radius-sm: 0.25rem;
|
||
|
|
--radius-md: 0.5rem;
|
||
|
|
--radius-lg: 0.75rem;
|
||
|
|
--radius-xl: 1rem;
|
||
|
|
--radius-2xl: 1.5rem;
|
||
|
|
--radius-full: 9999px;
|
||
|
|
|
||
|
|
/* Shadows */
|
||
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||
|
|
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Base Styles */
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Thai Language Support */
|
||
|
|
html[lang="th"] body {
|
||
|
|
font-family: 'Prompt', 'Sarabun', 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Custom Utilities */
|
||
|
|
@layer utilities {
|
||
|
|
.text-balance {
|
||
|
|
text-wrap: balance;
|
||
|
|
}
|
||
|
|
}
|