/* ==========================
   DARK MODE COLOR PALETTE (HSLA)
   ========================== */

/* Primary Colors */
:root {
  --color-primary: hsla(210, 100%, 45%, 1);          /* main primary */
  --color-primary-light: hsla(210, 100%, 65%, 1);    
  --color-primary-dark: hsl(210, 84%, 17%);     

  --color-secondary: hsla(6, 100%, 64%, 1);          /* main secondary */
  --color-secondary-light: hsla(6, 100%, 75%, 1);  
  --color-secondary-dark: hsla(6, 80%, 17%, 1);   

  --color-accent: hsla(51, 100%, 50%, 1);           /* accent color */
  --color-accent-light: hsla(51, 100%, 65%, 1);
  --color-accent-dark: hsla(51, 100%, 35%, 1);

  /* Feedback Colors */
  --color-success: hsla(145, 63%, 42%, 1);          
  --color-success-light: hsla(145, 63%, 60%, 1);
  --color-success-dark: hsla(145, 63%, 17%, 1);

  --color-warning: hsla(45, 100%, 50%, 1);          
  --color-warning-light: hsla(45, 100%, 70%, 1);
  --color-warning-dark: hsla(45, 100%, 17%, 1);

  --color-error: hsla(348, 83%, 47%, 1);            
  --color-error-light: hsla(348, 83%, 65%, 1);
  --color-error-dark: hsla(348, 83%, 28%, 1);

  /* Neutral / Grayscale */
  --color-bg: hsla(0, 0%, 7%, 1);               /* dark background */
  --color-surface: hsla(0, 0%, 12%, 1);          /* card or container background */
  --color-border: hsla(0, 0%, 16%, 1);           /* subtle border */
  --color-text-primary: hsla(0, 0%, 88%, 1);     /* high contrast text */
  --color-text-secondary: hsla(0, 0%, 63%, 1);   /* secondary text */
  --color-text-inverse: hsla(0, 0%, 7%, 1);      /* text on light backgrounds */
}

/* 
:root{

    --primary-color-100:hsla(240,30%,10%,1);
    --primary-color-200: hsla(240,40%,40%,1);
    --primary-darker-100: hsla(from var(--primary-color-100) h calc(s - 10) l);
    --font-color:hsla(0,100%,100%,1);

    --secondary-color-100:rgb(24, 68, 124);
    --secondary-color-200: hsla(from var(--secondary-color-100) h s calc(l + 30));
    --secondary-font: var(--primary-color);

    --color-darker-200: rgba(0,0,0,0.2);
    --color-darker-400: rgba(0,0,0,0.4);
    --color-darker-600: rgba(0,0,0,0.6);
    --color-darker-800: rgba(0,0,0,0.8);
    --color-lighter-200: rgba(255, 255, 255, 0.2);
    --color-lighter-400: rgba(255, 255, 255, 0.4);
    --color-lighter-600: rgba(255, 255, 255, 0.6);
    --color-lighter-800: rgba(255, 255, 255, 0.8);

    --color-danger: hsl(0, 63%, 32%);
    --color-danger-darker: hsla(from var(--color-danger) h calc(s - 10) calc(l - 15));
    --color-warning: hsl(41, 86%, 34%);
    --color-warning-darker: hsla(from var(--color-warning) h calc(s - 10) calc(l - 15));
    --color-success: hsl(140, 84%, 25%);
    --color-success-darker: hsla(from var(--color-success) h calc(s - 10) calc(l - 15));
    --button-gradient: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.7) 100%);
    --button-shadow: rgba(0, 0, 0, 0.3);
} */

.white {
    color: var(--font-color);
}

.color-primary-100{
    color: var(--font-color);
    background-color: var(--primary-color-100);
}

.color-primary-200{
    color: var(--font-color);
    background-color: var(--primary-color-200);
}

.color-primary-darker{
    position: relative;
    background-color: var(--color-danger-darker);
}
button {
    all:unset;
    outline: revert;
}

body {
    box-sizing: border-box;
    margin: 0;
}

table {
    border: none;
}

input {
    border-radius: 20px;
    border: none;
}

ul {
    all:unset;
}

li {
    all:unset;
    display: block;
}
a {
    all:unset;
    cursor: pointer;
}

dialog {
    background-color: unset;
    color:unset;
    border:unset;
}
article {
    all: unset;
    /* display: none; */
}
@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }

    100% {
        transform:rotate(360deg);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Optional content styling */
.card img {
  width: 100%;
  display: block;
}
:root {
    --border-rounding: .25rem;
    --grid-gaps: 1.25rem;
    --spacing: 1rem;
}
.flex {
    display: flex;
}

.full-height {
    min-height: 100%;
}

.flex-v {
    flex-direction: column;
}

.flex-main {
    flex-grow: 10;
}
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 9999;
}

.toast {
    min-width: 200px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 8px;
    /* color: white; */
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* opacity: 0; */
    transform: translateY(10px);
    animation: fadeInUp 0.3s ease-out forwards;
}

.toast.info {
    background-color: var(--secondary-color-100);
    /* margin: 20px; */
}

.toast.error {
    background-color: var(--color-error);
}
/* @import url(./grid.css); */
/* @import url(./root.css); */
/* @import url(./svg.css); */
html,
body,
#root {
    /* background: var(--color-bg); */
    /* color: var(--color-text-primary); */
    /* box-sizing: border-box; */
    height: 100%;
    overflow: hidden;
}