:root{
/* Brand Greens */
--green-700: #204051; /* Use for headings, strong text on light bg, button hover */
--green-500: #3b6978; /* Primary brand color: links, primary buttons, active controls */
--green-100: #d8f3dc; /* Subtle brand tint: section backgrounds, info panels */
/* Brand Yellows (accent) */
--yellow-400: #f6bf4f; /* Accent highlight: badges, chips, callouts, inline highlights */
--yellow-100: #f1efea; /* Soft accent background: warnings, promo bands */
/* Optional Info Blues (nice to have) */
--blue-500: #3a7ca5; /* Info links, neutral “info” state */
--blue-100: #d9ecf5; /* Info background */
/* Feedback Reds */
--red-500: #c45c54; /* Errors/destructive actions */
--red-100: #f8d4d2; /* Error background */
/* Neutrals */
--gray-900: #333333; /* Primary text */
--gray-700: #393939; /* Strong UI text (labels), muted headings on white */
--gray-600: #aaaaaa; /* Secondary text, placeholders */
--gray-300: #e3e3e3; /* Dividers, borders */
--gray-100: #f8f8f8; /* App background */
/* Base */
--white: #ffffff;
--black: #000000;
/* Shadows & radii */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
/* Spacing scale (use utilities below) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--header-height: 64px;
--aside-height: 78px;
/* Typography scale */
--font-sans:
ui-sans-serif, system-ui, -apple-system,
Segoe UI, Roboto, Helvetica, Arial,
"Apple Color Emoji", "Segoe UI Emoji";
--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px; /* default body */
--fs-lg: 18px;
--fs-xl: 22px;
--fs-2xl: 28px;
--fs-3xl: 36px;
--lh-tight: 1.2;
--lh-normal: 1.5;
/* Focus ring (accessible) */
--focus-ring: 0 0 0 3px rgba(58, 124, 165, 0.35); /* blue-500 at ~35% */
/* Elevation */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 24px rgba(0,0,0,0.14);
/*icons*/
--z-icon: url("data:image/svg+xml;utf8,");
--logout-icon: url("data:image/svg+xml;utf8,");
--user-icon: url("data:image/svg+xml;utf8,");
--delete-icon: url("data:image/svg+xml;utf8,");
--password-icon: url("data:image/svg+xml;utf8,");
--edit-icon: url("data:image/svg+xml;utf8,");
--x-icon: url("data:image/svg+xml;utf8,");
--search-icon: url("data:image/svg+xml;utf8,");
--camera-icon: url("data:image/svg+xml;utf8,");
--star-icon: url("data:image/svg+xml;utf8,");
--dots-icon: url("data:image/svg+xml;utf8,");
--add-icon: url("data:image/svg+xml;utf8,");
--cart-icon: url("data:image/svg+xml;utf8,");
--filter-icon: url("data:image/svg+xml;utf8,");
--pin-icon: url("data:image/svg+xml;utf8,");
--email-icon: url("data:image/svg+xml;utf8,");
--phone-icon: url("data:image/svg+xml;utf8,");
--success-icon: url("data:image/svg+xml;utf8,");
--error-icon: url("data:image/svg+xml;utf8,");
--info-icon: url("data:image/svg+xml;utf8,");
--warning-icon: url("data:image/svg+xml;utf8,");
}
@media (prefers-color-scheme: dark) {
:root {
--gray-900: #f1f1f1; /* primary text becomes light */
--gray-700: #e0e0e0;
--gray-600: #bdbdbd;
--gray-300: #2a2a2a;
--gray-100: #161616; /* app background */
--white: #111315; /* “card” background in dark */
--focus-ring: 0 0 0 3px rgba(58, 124, 165, 0.55);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
--shadow-md: 0 4px 12px rgba(0,0,0,0.55);
--shadow-lg: 0 10px 24px rgba(0,0,0,0.6);
}
}