:root{
    --max-content-width: 1280px;

    --default-font-family: "Inter", Arial, sans-serif;
    --default-serif-font-family: "Old Standard TT", serif;
    --default-sans-serif-font-family: "Inter", sans-serif;
    --default-monospace-font-family: "Courier New", monospace;
    --default-special-font-family: "Javanese Text", serif;

    --palette-blue-1: #0B0572;
    --palette-blue-2: #050d33;
    --palette-blue-3: #080b44;
    --palette-blue-4: #08133f;
    --palette-blue-5: #384164;
    
    --palette-yellow-1: #FFE539;
    --palette-yellow-2: #FFB800;    
    --palette-yellow-3: #ecae10;     
    --palette-yellow-4: #9d6400;   
    --palette-yellow-5: rgb(246, 241, 233); 

    --palette-gray-1: #F5F5F5;
    --palette-gray-2: #E0E0E0;
    --palette-gray-3: #f8fafc;
    --palette-gray-4: #e2eaf2;
    --palette-gray-5: #c9d8e8;
    --palette-gray-6: #8496aa;


    /* Header Theme Variables */
    --header-bg-color: #0B0572; 
    --header-fg-color: #ffffff;
    --header-fg-dim-color: #b4c4db;
    --header-fg-dimmer-color: #8399b5;
    --header-ui-border-color: #ffffff;
    --header-separator-line-color: #b1bfc9;   
    --header-input-focus-color: #ffffff;
    --header-badge-bg-color: #FFE539;
    --header-badge-fg-color: #0B0572;

    --header-overlay-bg-color: #001075;
    --header-overlay-border-color: #0033d9;
}

[data-header-theme="light"] {
    --header-bg-color: #a8bbc9;
    --header-fg-color: #0B0572;
    --header-fg-dim-color: #28238a;
    --header-fg-dimmer-color: #40597c;
    --header-ui-border-color: #0B0572;
    --header-separator-line-color: #2c2878;
    --header-input-focus-color: #0B0572;
    --header-badge-bg-color: #0B0572;
    --header-badge-fg-color: #a8bbc9;

    --header-overlay-bg-color: #1a1f3c;
    --header-overlay-border-color: #2d4183;
}