.light {
    --outline-variant: #514255;
    --surface-dim: #e4e1e8;
    --outline: #131318;
    --surface-container-lowest: #ffffff;
    --surface-bright: #ffffff;
    --surface-container-highest: #e4e1e8;
    --surface: #ffffff;
    --surface-container-low: #f4f4f7;
    --surface-container-high: #ebebed;
    --on-background: #131318;
    --surface-container: #f9f9fb;
    --on-surface-variant: #514255;
    --on-surface: #131318;
    --background: #f9f9fb;
    --surface-variant: #ebebed;
}

.dark {
    color-scheme: dark;
    --outline-variant: #938397;
    --surface-dim: #0d0c10;
    --outline: #e8dff0;
    --surface-container-lowest: #09080b;
    --surface-bright: #29252d;
    --surface-container-highest: #302b34;
    --surface: #121015;
    --surface-container-low: #19161c;
    --surface-container-high: #28232b;
    --on-background: #f4edf7;
    --surface-container: #211d24;
    --on-surface-variant: #cfc2d3;
    --on-surface: #f4edf7;
    --background: #0d0c10;
    --surface-variant: #28232b;
}

html, body, header, footer, section, input, button {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.dark .bg-white {
    background-color: #18151b !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* Custom Pixel Aesthetics */
.pixel-border-sm { border-width: 2px; }
.pixel-border-md { border-width: 4px; }
            
.step-progress-bg {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 18%,
        #f9f9fb 18%,
        #f9f9fb 20%
    );
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
    .animate-pixel-blink {
    animation: blink 1s steps(1) infinite;
}

/* Prevent any rounding from tailwind defaults */
* { border-radius: 0 !important; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.35s ease-in-out;
}