/* ============================================================ tuzama — CSS Custom Properties Single source of truth for all design tokens. Never hardcode these values directly in component CSS — always reference the variable. ============================================================ */ :root { /* ---------------------------------------------------------- Colors — Brand (deep forest green) ---------------------------------------------------------- */ --color-primary: #1F4D3B; --color-primary-hover: #2A6350; --color-primary-light: #3B7A62; --color-primary-subtle: #E8F3EE; --color-primary-dark: #163729; /* ---------------------------------------------------------- Colors — Neutral / Surface ---------------------------------------------------------- */ --color-background: #FAF7F2; /* warm cream — main page bg */ --color-surface: #FFFFFF; /* card / panel backgrounds */ --color-surface-alt: #F3EFE8; /* slightly deeper cream, hover states */ --color-border: #E2DDD6; /* default border */ --color-border-strong: #C8C0B5; /* emphasized border / divider */ /* ---------------------------------------------------------- Colors — Text ---------------------------------------------------------- */ --color-text: #2B2B2B; /* primary body copy — charcoal, not pure black */ --color-text-secondary: #6B6560; /* secondary / supporting copy */ --color-text-muted: #9E9790; /* captions, placeholders, metadata */ --color-text-inverse: #FFFFFF; /* text on dark/green backgrounds */ --color-text-on-primary: #FFFFFF; /* text on --color-primary */ /* ---------------------------------------------------------- Colors — Status / Semantic ---------------------------------------------------------- */ --color-success: #2E7D52; --color-success-bg: #EAF5EF; --color-warning: #B45309; --color-warning-bg: #FEF3C7; --color-error: #B91C1C; --color-error-bg: #FEE2E2; --color-info: #1D4ED8; --color-info-bg: #DBEAFE; /* Listing status badges */ --color-status-active: #2E7D52; --color-status-active-bg: #EAF5EF; --color-status-taken: #B91C1C; --color-status-taken-bg: #FEE2E2; --color-status-pending: #B45309; --color-status-pending-bg: #FEF3C7; --color-status-flagged: #7C3AED; --color-status-flagged-bg: #F3E8FF; /* ---------------------------------------------------------- Typography — Families Note: Poppins is loaded via in HTML . ---------------------------------------------------------- */ --font-sans: 'Poppins', 'Montserrat', ui-sans-serif, system-ui, sans-serif; /* Font weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---------------------------------------------------------- Typography — Type scale ---------------------------------------------------------- */ --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 */ /* Line heights */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ---------------------------------------------------------- Spacing — 4px base unit Use multiples of 4 to keep the rhythm consistent. ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---------------------------------------------------------- Border radius ---------------------------------------------------------- */ --radius-sm: 0.25rem; /* 4px */ --radius-base: 0.5rem; /* 8px */ --radius-md: 0.75rem; /* 12px */ --radius-lg: 1rem; /* 16px */ --radius-xl: 1.5rem; /* 24px */ --radius-2xl: 2rem; /* 32px */ --radius-full: 9999px; /* ---------------------------------------------------------- Shadows ---------------------------------------------------------- */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-base: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06); --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.06); --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.20); /* ---------------------------------------------------------- Transitions ---------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --container-max-width: 1200px; --container-padding-x: var(--space-4); /* ---------------------------------------------------------- Z-index scale ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; }