@import url('../fonts/index.css');

:root {
    /***base pallete***/
    --color-white: #ffffff;
    --color-dark-blue-main: #132361;
    --color-light-blue-main: #60cbea;
    --color-pale-blue-main: #B6D2FC;
    --color-purple-main: #9e76b4;
    --color-blue-main: #243a77;
    --color-yellow-main: #f3cd51;

    --color-yellow: #f7da5c;
    --color-green: #00aa00;
    --color-gray: #b8babe;
    --color-light-gray: #f3f3f2;
    --color-blue-gray: #d8e7fc;
    --color-dark-blue-gray: #23527c;

    /*error*/
    --color-red-1: #fcc4c1;
    --color-red-2: #F2736A;
    --color-red-3: #dd655e;
    --color-red-4: #ED4337;
    --color-red-5: #ff1b19;
    --color-red-6: #850e0d;

    /*success*/
    --color-green-1: #d7fae6;
    --color-green-2: #06FF06;
    --color-green-3: #20a75a;
    --color-green-4: #008000;
    --color-green-5: #1c7743;
    --color-green-6: #32473b;

    /*warning*/
    --color-yellow-1: #f7da5c;
    --color-yellow-2: #d3b947;
    --color-yellow-3: #ffd000;
    --color-yellow-4: #c9a400;
    --color-yellow-5: #493c00;

    /*info*/

    --color-blue-1: #eaf2fe;
    --color-blue-2: #eaeef5;
    --color-blue-3: #D2E3FD;
    --color-blue-4: #B6D2FC;
    --color-blue-5: #243a77;
    --color-blue-6: #2C4ED5;
    --color-blue-7: #132361;
    --color-blue-8: #223249;
    --color-blue-9: #1a283a;


    --color-gray-1: #f8f9fa;
    --color-gray-2: #e9ecef;
    --color-gray-3: #dee2e6;
    --color-gray-4: #c8c9cf;
    --color-gray-5: #9ea1a3;
    --color-gray-6: #726f6f;
    --color-gray-7: #515458;
    --color-gray-8: #313131;
    --color-gray-9: #222222;

    --color-light-blue-3: #a5eafd;
    --color-light-blue-4: #60cbea;

    /*new colors*/

    /*main*/
    --violet---dark-theme: #9e86ff;
    --violet---white-theme: #834FFF;
    /* --purple-dark: #211d2a; */
    --purple-dark: #221c2b;
    --beige: #eeede6;
    --beige-light: #f7f7f3;
    --error: #EB5757;
    --main-beige: #F2EFE9;
    --beige-darker: #F1F1ED;
    --app-off-dark: #272531;
    --purple-black: #18171A;
    --purple-white: #373340;

    /*gradients*/
    --gradient-beige: linear-gradient(160deg, #F7F7F3 8.37%, #E5E1DA 91.59%);
    --gradient-blue: linear-gradient(153deg, #83A6BB 7.98%, #DFDFDD 90.53%);
    --gradient-dark: linear-gradient(142deg, #211D2A 7.99%, #342E45 95.77%);

    /*variables*/
    --grey-stroke: #b5afc2;
    --violet-transparent: rgba(158, 134, 255, 0.5);
    --beige-transparent: rgba(247, 247, 243, 0.5);
    --dark-transparent: rgba(33, 29, 42, 0.5);
    --grey-transparent: rgba(137, 137, 165, 0.251);
    --grey-transparent---dark-theme: rgba(137, 137, 165, 0.25);
    --grey--forms: #B5AFC2;
    --off-dark: #302a3b;
    --grey-beige: #e2e2dd;


    /*additional(found)*/
    --violet-hover---dark-theme: #C0B0FF;
    --violet-hover---white-theme: #6E37F1;


    --main-beige: #F2EFE9;

    --background-gradient-blue: linear-gradient(149deg, #83A6BB 8.8%, #E6E3DF 83.75%);
    --background-gradient-blue-inverted: linear-gradient(149deg, #E6E3DF 8.8%, #A2BFE0 83.75%);
    --background-gradient-dark: linear-gradient(142deg, #211D2A 7.99%, #342E45 95.77%);
    --background-gradient-blue-inverted-animated-section: linear-gradient(149deg, #E6E3DF 1.8%, #A2BFE0 15.75%);

    /*main*/
    /***colors***/

    --color-primary: var(--purple-dark);
    --color-accent: var(--violet---white-theme);
    --color-secondary: #834FFF;
    --background-error: var(--color-red-1);
    --background-error-hover: var(--color-red-1);
    --border-error: var(--color-red-4);
    --color-error: var(--color-red-4);
    --border-error-hover: var(--color-red-6);
    --color-success: var(--color-green-5);
    --background-success: var(--color-green-1);
    --color-details: var(--dark-transparent);

    --background: var(--beige-light);
    --background-secondary: var(--beige-light);
    --background-tertiary: var(--beige-darker);
    --color-hover: var(--color-blue-7);
    --background-hover: var(--color-blue-4);
    --color-border: #dee2e6;
    --footer-background: var(--purple-dark);

    --color-dark: #6745a6;
    --color-type: #00918e;

    --background-table-props: var(--beige-darker);
    --background-table-header: var(--grey-beige);
    --background-details: var(--beige);
    --scroll-track-background: var(--beige-transparent);

}

[data-theme='dark'] {
    /***colors***/
    --color-primary: var(--beige-light);
    --color-accent: var(--violet---dark-theme);
    --color-secondary: #834FFF;
    --background-error: #463236;
    --background-error-hover: var(--color-red-3);
    --border-error: var(--color-red-4);
    --color-error: var(--color-red-4);
    --border-error-hover: var(--color-red-2);
    --color-success: var(--color-green-3);
    --background-success: var(--color-green-6);
    --color-details: var(--beige-transparent);
  
    --background: var(--purple-black);
    --background-secondary: #2b2a2a;
    --background-tertiary: var(--purple-white);
    --color-hover: var(--color-blue-7);
    --background-hover: var(--color-blue-4);
    --color-border: var(--color-gray-7);
    --footer-background: var(--purple-dark);

    --color-dark: #c6b5ed ;

    --background-table-props: var(--dark-transparent);
    --background-table-header: var(--off-dark);
    --background-details: var(--off-dark);
}

html, body {
    background-color: var(--background) !important; 
    font-family: PP Mori;
}

* {
    font-family: PP Mori; 
}

*:focus-visible {
    outline-color: var(--color-accent) !important;
}


dt {
    color: var(--color-primary);
}

dl, dt a{
    color: var(--color-accent) !important;
}

table th {
    background-color: var(--background-table-header) !important;
}

table tbody td {
    background-color: var(--background-table-props) !important;
}

header h1 {
    color: var(--color-primary) !important;
    font-size: 2.5rem;
}

.subsection-title {
    font-size: 1.5rem;
}

.name {
    color: var(--color-dark) !important;
    font-size: 1.25rem;
}

.type-signature a {
    color: var(--color-accent) !important;
}

td code {
    border-radius: 0.25rem !important;
    background-color: var(--violet-transparent) !important;
    color: var(--color-primary) !important;
}

table td:last-child, .params td:last-child, table thead th:last-child, .params thead th:last-child, .props thead th:last-child {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

table td:first-child, .params td:first-child, table thead th:first-child, .params thead th:first-child, .props thead th:first-child {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

dd .param-type {
    color: var(--color-type) !important;
}

.param-type a {
    color: var(--color-accent) !important;
}

.sidebar {
    background-color: var(--background) !important;
}

.sidebar-title {
    color: var(--color-primary) !important;
}

.sidebar-section-title {
    border-radius: 0.25rem !important;
    color: var(--color-primary) !important;
    font-size: 1rem !important;
    font-weight: bold;
}

.sidebar-section-title:hover {
    background-color: var(--violet-transparent) !important;
}

.sidebar-section-children-container {
    border-radius: 0 !important;
    background: var(--background) !important;
}

.sidebar-section-children {
    font-size: 0.90rem !important;
}

.sidebar-section-children a{
    border-radius: 0.25rem !important;
    padding-left: 3rem !important;
}

.sidebar-section-children a:hover{
    background-color: var(--violet-transparent) !important;
}

.sidebar-section-children.active {
    border-radius: 0.25rem !important;
    background-color: var(--color-secondary) !important;
}

.sidebar-section-children.active a {
    color: white !important;
}

.mobile-sidebar-wrapper {
    background-color: var(--background) !important;
}

.mobile-menu-icon-container .icon-button {
    background: var(--color-secondary) !important;
}

.mobile-menu-icon-container .icon-button svg {
    color: white !important;
    fill: white !important;
}

.mobile-menu-icon-container .icon-button:hover {
    background: var(--violet-hover---white-theme) !important;
}

[data-theme='dark'] .mobile-menu-icon-container .icon-button {
    background: var( --violet-hover---dark-theme) !important;
}

[data-theme='dark'] .mobile-menu-icon-container .icon-button svg {
    color: var(--purple-dark) !important;
    fill: var(--purple-dark) !important;
}

[data-theme='dark'] .mobile-menu-icon-container .icon-button:hover {
    background: var(--color-secondary) !important;
}

.navbar-container {
    background-color: var(--background) !important;
}

/* .light .sidebar {
    border: 1px solid var(--grey-stroke) !important;
    background-color: var(--background-tertiary) !important;
} */

.details {
    border-radius: 0.25rem !important;
    background-color: var(--background-details) !important;
}

.details a{
    color: var(--color-accent) !important;
}

article ul li a {
    color: var(--color-accent) !important;
}

/* a {
    color: var(--color-accent) !important;
} */

.toc-link {
    color: #525860;
}

.is-active-link {
    color: var(--color-accent) !important;
}

.tag-source a {
    color: var(--color-accent) !important;
}

.search-container {
    background: rgb(0 0 0 / 50%) !important;
}

.search-container .wrapper {
    border-radius: 0.25rem !important;
    background: var(--background-secondary) !important;
}

.icon-button svg {
    color: var(--color-primary) !important;
    fill: var(--color-primary) !important;
}

.icon-button:hover {
    background: var(--violet-transparent) !important;
}

.search-result-item {
    margin: 0 !important;
    border-radius: 0.25rem !important;
    background: transparent !important;
    padding: 0.6rem 1rem !important;
}

.search-result-item:hover {
    background-color: var(--violet-transparent) !important;
    color: var(--color-secondary) !important;
}

.search-result-item:hover .search-result-item-p {
    color: var(--color-primary) !important;
}

.search-result-item-title {
    color: var(--color-primary) !important;
    font-size: 1rem !important;
}

.search-input {
    outline-color: var(--color-accent) !important;
    border-radius: 0.25rem !important;
    background-color: var(--background-tertiary) !important;
    padding: 0.75rem 2rem 0.75rem 4rem !important;
    color: var(--color-primary) !important;
    font-size: 1.25rem;
}

.tippy-box {
    background: var(--background-tertiary) !important;
    color: var(--color-primary) !important;
}

.readme h1 {
    font-size: 3rem !important;
}

.readme a {
    color: var(--color-accent) !important;
}

/* width */
::-webkit-scrollbar {
    border: none;
    border-radius: 10px;
    background: #eee;
    width: 5px;
    height: 8px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: none;
    background: var(--scroll-track-background) !important;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--violet-transparent) !important;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--violet-transparent) !important;
  }