: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 (Deep Emerald) === */
    --login-big-gradient: linear-gradient(
        90deg,
        rgba(2, 44, 34, 0.92) 0%,
        rgba(5, 30, 22, 0.85) 30%,
        var(--background-950) 100%
    );

    --login-mobile-gradient: linear-gradient(
        180deg,
        rgba(16, 185, 129, 0.85) 0%,
        rgba(5, 150, 105, 0.65) 14%,
        rgba(10, 18, 15, 0.85) 35%,
        rgba(5, 8, 7, 1) 60%
    );

    /* === TEXT & BACKGROUND === */
    --text: hsl(160, 20%, 88%);

    --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: #064e3b;
    --background-900: #022c22;
    --background-950: #021a14;
}