/* ============================================================
   DARK PURPLE THEME
   Replace this file (or swap the @import in globals.css)
   to change the entire color palette without touching any
   TypeScript or component files.
   ============================================================ */
:root {
    /* --- Brand palette --- */
    --color-1-opacity:       28 1 37;
    --color-1:               #1C0125;
    --color-2:               #71197E;
    --color-3-opacity:       19 0 25;
    --color-3:               #130019;
    --color-4-opacity:       255 255 255;
    --color-4:               #FFFFFF;
    --color-5-opacity:       166 130 172;
    --color-5:               #A682AC;
    --color-6:               #562E5F;
    --color-7-opacity:       82 28 95;
    --color-7:               #521C5F;
    --color-8:               #FBB314;
    --color-9-opacity:       235 112 247;
    --color-9:               #EB70F7;
    --color-10-opacity:      60 18 74; /* Form text */
    --color-10:              #3C124A; /* Form text */
    --color-11:              #1D0226; /* Form text */
    --color-12:              #570E6F; /* Form Text */
    --color-13:              #4B0A60; /* Dropdown */
    --color-14:              #570B6E; /* Icon */
    --color-15-opacity:      38 3 50;
    --color-15:              #260332; /* Sidemenu 2 */
    --color-16-opacity:      48 1 62; /* bg category | Card */
    --color-16:              #30013E; /* bg category | Card */
    --color-17-opacity:      238 90 253; /* Label */
    --color-17:              #EE5AFD; /* Label */
    --color-18:              #3C104A; /* Form Text */
    --color-19-opacity:      57 3 75; /* BG Popup */
    --color-19:              #39034B; /* BG Popup */
    --color-20:              #430A56; /* Outline Popup */
    --color-21-opacity:      17 17 17;
    --color-21:              #111111;
    --color-22:              #FD3C3C; /* Text Error */
    --color-23:              #2DEC07; /* Text Success */
    --color-24:              #FFBC20; /* Text Validation */
    --color-25:              #EE0000; /* Required Remark */
    --color-26:              #E39D00; /* Button Primary */
    --color-27:              #B07900; /* Button Disable */
    --color-28:              #410752; /* Button Secondary */
    --color-29-opacity:      101 1 131; /* Button Secondary */
    --color-29:              #650183; /* Button Secondary */

    /* temporary value will have to update */
    /* --- Semantic colors --- */
    --primary:               #260132;
    --secondary:             #FBB314;
    --success:               #6FF082;
    --pending:               #FEB944;
    --rejected:              #FB3E63;
    /* --- Gradients --- */ 
    --gradient-primary:         linear-gradient(180deg, rgb(var(--color-9-opacity) / 0) 0%, var(--color-9) 100%);
    --gradient-down:    linear-gradient(180deg, var(--color-9) 0%, rgb(var(--color-9-opacity) / 0) 100%);
    --gradient-sidebar:    linear-gradient(187.1deg, var(--color-15) 9.54%, var(--color-7) 136.69%);
    --search-dropdown:       linear-gradient(131.62deg, var(--color-17) 17.04%, rgb(var(--color-17-opacity) / 0) 54.06%);
    --gradient-to-br:   linear-gradient(139.34deg, var(--color-9) 11.03%, rgb(var(--color-9-opacity) / 0) 51.24%);
    --custom-gradient:       linear-gradient(63.37deg, var(--color-8) 34.38%, var(--color-27) 137.45%);
    --radial-primary:   radial-gradient(ellipse 110% 58% at 50% 0%, rgb(var(--color-9-opacity) / 0.32) 0%, transparent 70%);
    --gradient-see-all:   linear-gradient(180deg, rgb(var(--color-9-opacity) / 0) 0%, var(--color-9) 100%);
    --gradient-verify-whatsapp: linear-gradient(76.32deg, rgb(var(--color-9-opacity) / 0.48) 12.6%, rgb(var(--color-9-opacity) / 0) 51.19%);
    --gradient-card-smartico: linear-gradient(180deg, var(--color-29) -0.29%, var(--color-1) 100.18%);
    --gradient-card-smartico-hover: linear-gradient(360deg, var(--color-2) -0.18%, var(--color-29) 100.29%);
    --gradient-card-smartico-home: linear-gradient(180deg, var(--color-29) 0%, var(--color-1) 100%);
}