:root {
    
    --orange-50:  #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;
    --orange-900: #7c2d12;
    --orange-950: #431407;

    --stone-50:  #fafaf9;
    --stone-100: #f5f5f4;
    --stone-200: #e7e5e4;
    --stone-300: #d6d3d1;
    --stone-400: #a8a29e;
    --stone-500: #78716c;
    --stone-600: #57534e;
    --stone-700: #44403c;
    --stone-800: #292524;
    --stone-900: #1c1917;
    --stone-950: #0c0a09;

}

/* BUTTON */
.btn-stone-100 {
    --bs-btn-color: var(--stone-900);
    --bs-btn-bg: var(--stone-100);
    --bs-btn-border-color: var(--stone-100);
    --bs-btn-hover-color: var(--stone-900);
    --bs-btn-hover-bg: var(--stone-200);
    --bs-btn-hover-border-color: var(--stone-200);
    --bs-btn-focus-shadow-rgb: 120, 113, 108;
    --bs-btn-active-color: var(--orange-500);
    --bs-btn-active-bg: var(--orange-200);
    --bs-btn-active-border-color: var(--orange-200);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--stone-400);
    --bs-btn-disabled-border-color: var(--stone-400);
}
.btn-outline-stone {
    --bs-btn-color: var(--stone-600);
    --bs-btn-border-color: var(--stone-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--stone-500);
    --bs-btn-hover-border-color: var(--stone-500);
    --bs-btn-focus-shadow-rgb: 120, 113, 108;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--stone-600);
    --bs-btn-active-border-color: var(--stone-600);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--stone-400);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--stone-300);
    --bs-gradient: none;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}