/*========================================
            ROOT COLOR TOKENS
========================================*/

:root {
    /* PRIMARY */
    --primary-50: #F0F5FF;
    --primary-100: #B2CEFF;
    --primary-200: #8CA7D6;
    --primary-300: #6881AE;
    --primary-400: #455D88;
    --primary-500: #243B65;
    --primary-600: #143169;
    --primary-700: #002369;
    --primary-800: #001A54;
    --primary-900: #001342;

    /* SECONDARY */
    --secondary-50: #FFFDF9;
    --secondary-100: #FBF7EE;
    --secondary-200: #F5F1E8;
    --secondary-300: #F0ECE2;
    --secondary-400: #EAE6DC;
    --secondary-500: #E5E0D4;
    --secondary-600: #BFB396;
    --secondary-700: #8B784B;
    --secondary-800: #554000;
    --secondary-900: #201700;

    /* ACCENT */
    --accent-50: #FFF3E2;
    --accent-100: #FFDAA3;
    --accent-200: #EDC588;
    --accent-300: #D8B175;
    --accent-400: #C49E62;
    --accent-500: #B18A4B;
    --accent-600: #9C6C00;
    --accent-700: #714D00;
    --accent-800: #462E00;
    --accent-900: #231500;
}


/*========================================
          BACKGROUND UTILITIES
========================================*/


.bg-primary-50   { background-color: var(--primary-50) !important; }
.bg-secondary-50 { background-color: var(--secondary-50) !important; }
.bg-accent-50    { background-color: var(--accent-50) !important; }


.bg-primary-100   { background-color: var(--primary-100) !important; }
.bg-secondary-100 { background-color: var(--secondary-100) !important; }
.bg-accent-100    { background-color: var(--accent-100) !important; }


.bg-primary-200   { background-color: var(--primary-200) !important; }
.bg-secondary-200 { background-color: var(--secondary-200) !important; }
.bg-accent-200    { background-color: var(--accent-200) !important; }


.bg-primary-300   { background-color: var(--primary-300) !important; }
.bg-secondary-300 { background-color: var(--secondary-300) !important; }
.bg-accent-300    { background-color: var(--accent-300) !important; }


.bg-primary-400   { background-color: var(--primary-400) !important; }
.bg-secondary-400 { background-color: var(--secondary-400) !important; }
.bg-accent-400    { background-color: var(--accent-400) !important; }


.bg-primary-500   { background-color: var(--primary-500) !important; }
.bg-secondary-500 { background-color: var(--secondary-500) !important; }
.bg-accent-500    { background-color: var(--accent-500) !important; }


.bg-primary-600   { background-color: var(--primary-600) !important; }
.bg-secondary-600 { background-color: var(--secondary-600) !important; }
.bg-accent-600    { background-color: var(--accent-600) !important; }


.bg-primary-700   { background-color: var(--primary-700) !important; }
.bg-secondary-700 { background-color: var(--secondary-700) !important; }
.bg-accent-700    { background-color: var(--accent-700) !important; }


.bg-primary-800   { background-color: var(--primary-800) !important; }
.bg-secondary-800 { background-color: var(--secondary-800) !important; }
.bg-accent-800    { background-color: var(--accent-800) !important; }


.bg-primary-900   { background-color: var(--primary-900) !important; }
.bg-secondary-900 { background-color: var(--secondary-900) !important; }
.bg-accent-900    { background-color: var(--accent-900) !important; }


.bg-primary     { background-color: var(--primary-500) !important; }
.bg-secondary   { background-color: var(--secondary-500) !important; }
.bg-accent      { background-color: var(--accent-500) !important; }

/* SOFT / LIGHT */
.bg-primary-soft, .bg-primary-light         { background-color: var(--primary-100) !important; }
.bg-secondary-soft, .bg-secondary-light     { background-color: var(--secondary-100) !important; }
.bg-accent-soft, .bg-accent-light           { background-color: var(--accent-100) !important; }

/* MUTED */
.bg-primary-muted    { background-color: var(--primary-300) !important; }
.bg-secondary-muted  { background-color: var(--secondary-300) !important; }
.bg-accent-muted     { background-color: var(--accent-300) !important; }

/* STRONG / DARK */
.bg-primary-strong, .bg-primary-dark       { background-color: var(--primary-700) !important; }
.bg-secondary-strong, .bg-secondary-dark   { background-color: var(--secondary-700) !important; }
.bg-accent-strong, .bg-accent-dark         { background-color: var(--accent-700) !important; }

/* INVERSE */
.bg-primary-inverse   { background-color: var(--primary-900) !important; }
.bg-secondary-inverse { background-color: var(--secondary-900) !important; }
.bg-accent-inverse    { background-color: var(--accent-900) !important; }


/*========================================
             TEXT UTILITIES
========================================*/


.text-primary-50   { color: var(--primary-50) !important; }
.text-secondary-50 { color: var(--secondary-50) !important; }
.text-accent-50    { color: var(--accent-50) !important; }


.text-primary-100   { color: var(--primary-100) !important; }
.text-secondary-100 { color: var(--secondary-100) !important; }
.text-accent-100    { color: var(--accent-100) !important; }


.text-primary-200   { color: var(--primary-200) !important; }
.text-secondary-200 { color: var(--secondary-200) !important; }
.text-accent-200    { color: var(--accent-200) !important; }


.text-primary-300   { color: var(--primary-300) !important; }
.text-secondary-300 { color: var(--secondary-300) !important; }
.text-accent-300    { color: var(--accent-300) !important; }


.text-primary-400   { color: var(--primary-400) !important; }
.text-secondary-400 { color: var(--secondary-400) !important; }
.text-accent-400    { color: var(--accent-400) !important; }


.text-primary-500   { color: var(--primary-500) !important; }
.text-secondary-500 { color: var(--secondary-500) !important; }
.text-accent-500    { color: var(--accent-500) !important; }


.text-primary-600   { color: var(--primary-600) !important; }
.text-secondary-600 { color: var(--secondary-600) !important; }
.text-accent-600    { color: var(--accent-600) !important; }


.text-primary-700   { color: var(--primary-700) !important; }
.text-secondary-700 { color: var(--secondary-700) !important; }
.text-accent-700    { color: var(--accent-700) !important; }


.text-primary-800   { color: var(--primary-800) !important; }
.text-secondary-800 { color: var(--secondary-800) !important; }
.text-accent-800    { color: var(--accent-800) !important; }


.text-primary-900   { color: var(--primary-900) !important; }
.text-secondary-900 { color: var(--secondary-900) !important; }
.text-accent-900    { color: var(--accent-900) !important; }


.text-primary, .text-primary-500      { color: var(--primary-500) !important; }
.text-secondary, .text-secondary-500  { color: var(--secondary-500) !important; }
.text-accent, .text-accent-500        { color: var(--accent-500) !important; }

/* SOFT / LIGHT */
.text-primary-soft, .text-primary-light     { color: var(--primary-100) !important; }
.text-secondary-soft, .text-secondary-light { color: var(--secondary-100) !important; }
.text-accent-soft, .text-accent-light       { color: var(--accent-100) !important; }

/* MUTED */
.text-primary-muted    { color: var(--primary-300) !important; }
.text-secondary-muted  { color: var(--secondary-300) !important; }
.text-accent-muted     { color: var(--accent-300) !important; }

/* STRONG / DARK */
.text-primary-strong, .text-primary-dark       { color: var(--primary-700) !important; }
.text-secondary-strong, .text-secondary-dark   { color: var(--secondary-700) !important; }
.text-accent-strong, .text-accent-dark         { color: var(--accent-700) !important; }

/* INVERSE */
.text-primary-inverse   { color: var(--primary-900) !important; }
.text-secondary-inverse { color: var(--secondary-900) !important; }
.text-accent-inverse    { color: var(--accent-900) !important; }


/*========================================
            BORDER UTILITIES
========================================*/


.border-primary-50   { border-color: var(--primary-50) !important; }
.border-secondary-50 { border-color: var(--secondary-50) !important; }
.border-accent-50    { border-color: var(--accent-50) !important; }


.border-primary-100   { border-color: var(--primary-100) !important; }
.border-secondary-100 { border-color: var(--secondary-100) !important; }
.border-accent-100    { border-color: var(--accent-100) !important; }


.border-primary-200   { border-color: var(--primary-200) !important; }
.border-secondary-200 { border-color: var(--secondary-200) !important; }
.border-accent-200    { border-color: var(--accent-200) !important; }


.border-primary-300   { border-color: var(--primary-300) !important; }
.border-secondary-300 { border-color: var(--secondary-300) !important; }
.border-accent-300    { border-color: var(--accent-300) !important; }


.border-primary-400   { border-color: var(--primary-400) !important; }
.border-secondary-400 { border-color: var(--secondary-400) !important; }
.border-accent-400    { border-color: var(--accent-400) !important; }


.border-primary-500   { border-color: var(--primary-500) !important; }
.border-secondary-500 { border-color: var(--secondary-500) !important; }
.border-accent-500    { border-color: var(--accent-500) !important; }


.border-primary-600   { border-color: var(--primary-600) !important; }
.border-secondary-600 { border-color: var(--secondary-600) !important; }
.border-accent-600    { border-color: var(--accent-600) !important; }


.border-primary-700   { border-color: var(--primary-700) !important; }
.border-secondary-700 { border-color: var(--secondary-700) !important; }
.border-accent-700    { border-color: var(--accent-700) !important; }


.border-primary-800   { border-color: var(--primary-800) !important; }
.border-secondary-800 { border-color: var(--secondary-800) !important; }
.border-accent-800    { border-color: var(--accent-800) !important; }


.border-primary-900   { border-color: var(--primary-900) !important; }
.border-secondary-900 { border-color: var(--secondary-900) !important; }
.border-accent-900    { border-color: var(--accent-900) !important; }


.border-primary, .border-primary-500      { border-color: var(--primary-500) !important; }
.border-secondary, .border-secondary-500  { border-color: var(--secondary-500) !important; }
.border-accent, .border-accent-500        { border-color: var(--accent-500) !important; }

/* SOFT / LIGHT */
.border-primary-soft, .border-primary-light     { border-color: var(--primary-100) !important; }
.border-secondary-soft, .border-secondary-light { border-color: var(--secondary-100) !important; }
.border-accent-soft, .border-accent-light       { border-color: var(--accent-100) !important; }

/* MUTED */
.border-primary-muted    { border-color: var(--primary-300) !important; }
.border-secondary-muted  { border-color: var(--secondary-300) !important; }
.border-accent-muted     { border-color: var(--accent-300) !important; }

/* STRONG / DARK */
.border-primary-strong, .border-primary-dark     { border-color: var(--primary-700) !important; }
.border-secondary-strong, .border-secondary-dark { border-color: var(--secondary-700) !important; }
.border-accent-strong, .border-accent-dark       { border-color: var(--accent-700) !important; }


/*========================================
            GRADIENT UTILITIES
========================================*/

/* SINGLE-COLOR */
.bg-gradient-primary        { background: linear-gradient(to right, var(--primary-600), var(--primary-300)); }
.-bg-gradient-primary       { background: linear-gradient(to right, var(--primary-300), var(--primary-600)); }

.bg-gradient-secondary      { background: linear-gradient(to right, var(--secondary-600), var(--secondary-300)); }
.-bg-gradient-secondary     { background: linear-gradient(to right, var(--secondary-300), var(--secondary-600)); }

.bg-gradient-accent         { background: linear-gradient(to right, var(--accent-600), var(--accent-300)); }
.-bg-gradient-accent        { background: linear-gradient(to right, var(--accent-300), var(--accent-600)); }

/* SINGLE-COLOR (LIGHT VARIANTS) */
.bg-gradient-primary-light      { background: linear-gradient(to right, var(--primary-300), var(--primary-100)); }
.bg-gradient-secondary-light    { background: linear-gradient(to right, var(--secondary-300), var(--secondary-100)); }
.bg-gradient-accent-light       { background: linear-gradient(to right, var(--accent-300), var(--accent-100)); }

.-bg-gradient-primary-light     { background: linear-gradient(to right, var(--primary-100), var(--primary-300)); }
.-bg-gradient-secondary-light   { background: linear-gradient(to right, var(--secondary-100), var(--secondary-300)); }
.-bg-gradient-accent-light      { background: linear-gradient(to right, var(--accent-100), var(--accent-300)); }


/* CROSS-COLOR */
.bg-gradient-primary-secondary   { background: linear-gradient(to right, var(--primary-500), var(--secondary-500)); }
.bg-gradient-primary-accent      { background: linear-gradient(to right, var(--primary-500), var(--accent-500)); }
.bg-gradient-accent-secondary    { background: linear-gradient(to right, var(--accent-500), var(--secondary-500)); }

/* CROSS-COLOR REVERSE */
.-bg-gradient-primary-secondary  { background: linear-gradient(to right, var(--secondary-500), var(--primary-500)); }
.-bg-gradient-primary-accent     { background: linear-gradient(to right, var(--accent-500), var(--primary-500)); }
.-bg-gradient-accent-secondary   { background: linear-gradient(to right, var(--secondary-500), var(--accent-500)); }

/*========================================
            BUTTON UTILITIES
========================================*/

/* BTN */ 
.btn-md        { padding: 8px 14px; font-size: 1rem; }
.btn-sm     { padding: 4px 10px; font-size: 0.85rem; }
.btn-lg     { padding: 12px 20px; font-size: 1.125rem; }

/* PRIMARY BTN */
.btn-primary {
    color: #fff;
    border-radius: 6px;
    border: none;
    background-color: var(--primary-500);
    background-clip: padding-box;
    transition: background-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font: inherit;
}
.btn-primary:hover      { background-color: var(--primary-600); }
.btn-primary:active     { background-color: var(--primary-700); }
.btn-primary:focus      { box-shadow: 0 0 0 3px var(--primary-100); outline: none; }
.btn-primary:disabled   { background-color: var(--primary-300); cursor: not-allowed; filter: grayscale(0.4); }

/* SECONDARY BTN */
.btn-secondary {
    color: #fff;
    border-radius: 6px;
    border: none;
    background-color: var(--secondary-500);
    background-clip: padding-box;
    transition: background-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font: inherit;
}
.btn-secondary:hover      { background-color: var(--secondary-600); }
.btn-secondary:active     { background-color: var(--secondary-700); }
.btn-secondary:focus      { box-shadow: 0 0 0 3px var(--secondary-100); outline: none; }
.btn-secondary:disabled   { background-color: var(--secondary-300); cursor: not-allowed; filter: grayscale(0.4); }

/* ACCENT BTN */
.btn-accent {
    color: #fff;
    border-radius: 6px;
    border: none;
    background-color: var(--accent-500);
    background-clip: padding-box;
    transition: background-color 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    user-select: none;
    appearance: none;
    font: inherit;
}
.btn-accent:hover      { background-color: var(--accent-600); }
.btn-accent:active     { background-color: var(--accent-700); }
.btn-accent:focus      { box-shadow: 0 0 0 3px var(--accent-100); outline: none; }
.btn-accent:disabled   { background-color: var(--accent-300); cursor: not-allowed; filter: grayscale(0.4); }