Polish Dusk accessibility details

app/globals.css

@@ -269,6 +269,12 @@ a {
     background: var(--primary);
     box-shadow: var(--shadow-2);
   }
+
+  .cn-toast {
+    border: 1px solid color-mix(in oklab, var(--border) 92%, transparent);
+    box-shadow: var(--shadow-3);
+    backdrop-filter: blur(18px);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

app/login/page.tsx

@@ -41,7 +41,7 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
       footer={
         <p>
           Nog geen account?{" "}
-          <Link href={signUpHref} className="font-semibold text-primary">
+          <Link href={signUpHref} className="font-semibold text-primary underline-offset-4 hover:underline">
             Maak er een aan
           </Link>
         </p>

app/sign-up/page.tsx

@@ -41,7 +41,7 @@ export default async function SignUpPage({ searchParams }: SignUpPageProps) {
       footer={
         <p>
           Heb je al een account?{" "}
-          <Link href={loginHref} className="font-semibold text-primary">
+          <Link href={loginHref} className="font-semibold text-primary underline-offset-4 hover:underline">
             Log dan in
           </Link>
         </p>

components/check-in/check-in-form.tsx

@@ -103,6 +103,7 @@ export function CheckInForm({ todayCheckIn }: CheckInFormProps) {
                     disabled={isPending}
                     onClick={() => setEnergyScore(value)}
                     aria-pressed={isSelected}
+                    aria-label={`Energie ${value} van 10`}
                     className={cn(
                       buttonVariants({
                         variant: isSelected ? "default" : "outline",