:root {
    /* === PRIMARY (Emerald Teal — "Mutiara" gemstone identity) === */
    --primary-color-lighter: #34d399 !important;  /* bright mint */
    --primary-color: #059669 !important;           /* deep emerald */
    --primary-color-hover: #047857;                /* darker emerald */
    --primary-dark-color: #022c22;                 /* near-black teal */

    --primary-text-color: #ffffff;

    /* === SECONDARY / ACCENT === */
    --secondary-lighter-color: #0f1a15;
    --secondary-oso: #10b981;
    --accent: #10b981;

    /* === EMERALD GRADIENTS === */
    --golden-gradient: linear-gradient(to bottom, #10b981, #047857);
    --golden-solid: #059669;
    --gold-dark-solid: #022c22;

    /* === DARK UI === */
    --input-dark-color: #0a1210;
    --card-dark: #0d1612;
    --sidebar-active-color: #10b981;

    /* === LOGIN GRADIENTS === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(16, 185, 129, 0.2) 0%,
        rgba(30, 31, 28, 0.8) 35%,
        var(--background-950) 100%
    );

    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(16, 185, 129, 0.2) 0%,
        rgba(16, 185, 129, 0.1) 15%,
        rgba(30, 31, 28, 0.85) 30%,
        rgba(26, 28, 24, 1) 55%
    );

    /* === TEXT & BACKGROUND === */
    --text: #f1f5f1;

    --background-50: #ecfdf5;
    --background-100: #d1fae5;
    --background-200: #a7f3d0;
    --background-300: #6ee7b7;
    --background-400: #34d399;
    --background-500: #10b981;
    --background-600: #059669;
    --background-700: #047857;
    --background-800: #1a1c18;
    --background-900: #131511;
    --background-950: #0d0e0c;
}