@font-face { font-family: "LINE Seed Sans TH"; src: url("../fonts/LINESeedSansTH_A_Rg.ttf") format("truetype"); font-display: swap; font-style: normal; font-weight: 400; } /** * Theme & Color Tokens (Design System) * Declares all base styling tokens, pastel palettes, and transitions. */ :root { /* Layout Sizes */ --sidebar-width: 265px; --sidebar-collapsed-width: 80px; --topbar-height: 70px; /* Layout Backgrounds */ --app-bg: #f8fafc; /* Soft light grey-blue */ --app-surface: #ffffff; /* Pure white card surface */ --app-border: #e2e8f0; /* Subdued border color */ /* Typography Colors */ --app-text: #1e293b; /* Dark slate */ --app-muted: #64748b; /* Muted blue-grey */ /* Brand & Feedback Colors - Pastel theme */ --app-primary: #2563eb; /* Blue primary (Modern Royal Blue) */ --app-primary-bg: #dbeafe; /* Pastel blue bg */ --app-primary-hover: #1d4ed8; --app-success: #10b981; /* Green success */ --app-success-bg: #dcfce7; /* Pastel green bg */ --app-success-hover: #059669; --app-warning: #f59e0b; /* Amber warning */ --app-warning-bg: #fef3c7; /* Pastel amber bg */ --app-warning-hover: #d97706; --app-danger: #ef4444; /* Red danger */ --app-danger-bg: #fee2e2; /* Pastel red bg */ --app-danger-hover: #dc2626; --app-info: #06b6d4; /* Cyan info */ --app-info-bg: #ecfeff; /* Pastel cyan bg */ --app-info-hover: #0891b2; --app-waiting: #7c3aed; /* Purple waiting */ --app-waiting-bg: #ede9fe; /* Pastel purple bg */ --app-waiting-hover: #6d28d9; --app-secondary: #64748b; /* Muted secondary */ --app-secondary-bg: #f1f5f9; /* Light grey bg */ /* Pastel Specific Tones for badges & cards */ --pastel-blue-bg: #e0f2fe; --pastel-blue-text: #0369a1; --pastel-green-bg: #dcfce7; --pastel-green-text: #15803d; --pastel-orange-bg: #ffedd5; --pastel-orange-text: #c2410c; --pastel-purple-bg: #f3e8ff; --pastel-purple-text: #7e22ce; --pastel-red-bg: #fee2e2; --pastel-red-text: #b91c1c; --pastel-cream-bg: #fafaf6; --pastel-cream-text: #854d0e; /* Geometry & Borders */ --app-radius: 12px; --app-radius-lg: 20px; --app-radius-sm: 8px; /* Shadows & Animations */ --app-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.08), 0 2px 8px -1px rgba(148, 163, 184, 0.04); --app-shadow-hover: 0 12px 30px -4px rgba(148, 163, 184, 0.16), 0 4px 12px -2px rgba(148, 163, 184, 0.08); --app-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); /* Typography Font Stack */ --app-font-family: "LINE Seed Sans TH", "Sarabun", system-ui, -apple-system, sans-serif; } html, body, button, input, select, textarea { font-family: var(--app-font-family); } /* Dark Mode Variables (Structure prepared, but inactive by default) */ /* Can be toggled in future by adding [data-theme="dark"] to the tag */ [data-theme="dark"] { --app-bg: #0f172a; --app-surface: #1e293b; --app-border: #334155; --app-text: #f8fafc; --app-muted: #94a3b8; --app-primary-bg: rgba(37, 99, 235, 0.2); --app-success-bg: rgba(16, 185, 129, 0.2); --app-warning-bg: rgba(245, 158, 11, 0.2); --app-danger-bg: rgba(239, 68, 68, 0.2); --app-info-bg: rgba(6, 182, 212, 0.2); --app-waiting-bg: rgba(124, 58, 237, 0.2); --app-secondary-bg: #334155; --app-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3); --app-shadow-hover: 0 12px 30px -4px rgba(0, 0, 0, 0.4); --pastel-blue-bg: rgba(14, 165, 233, 0.2); --pastel-blue-text: #38bdf8; --pastel-green-bg: rgba(34, 197, 94, 0.2); --pastel-green-text: #4ade80; --pastel-orange-bg: rgba(249, 115, 22, 0.2); --pastel-orange-text: #fdbb2d; --pastel-purple-bg: rgba(168, 85, 247, 0.2); --pastel-purple-text: #c084fc; --pastel-red-bg: rgba(239, 68, 68, 0.2); --pastel-red-text: #fca5a5; --pastel-cream-bg: rgba(254, 240, 138, 0.15); --pastel-cream-text: #fef08a; }